Latest 1.0.0
Homepage https://github.com/google/GOSSpritedAnimationView
License Apache 2.0
Platforms ios 7.0, requires ARC
Authors

Build Status

This control provides an alternative to animating an array of images with an UIImageView. Only a
single image composed of individual sprite frames is used, and animation simply consists of
updating the layer contentsRect.

Installation

Requirements

  • Xcode 7.0 or higher.
  • iOS SDK version 7.0 or higher.

Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'GOSScrollViewDelegateMultiplexer'

Then, run the following command:

$ pod install

Create a sprite sheet asset

A sprite sheet consists of a single image composed of a single column of individual sprite frames.
The individual sprite frames must be sized and spaced evenly across the overall image bounds. A
typical use case is to generate three sprite sheet images (1x, 2x, and 3x) and add these to an
.xcassets file for use in the app by the spritedAnimationView.

Animating the sprite sheet

Once a sprite sheet is added to a spritedAnimationView (either at init or adding later), the
spritedAnimationView can animate the image from the first sprite frame to the last sprite frame.
Properties are available to set the frame rate, which defaults to 60 fps (frames per second). The
animation can happen once or be looped via the animationRepeatCount property. To start the
animation, use the -startAnimationWithCompletion: method. A completion block gets called once
the animation is finished. However, if the animationRepeatCount is set to loop infinitely (with
a 0 setting), this block will not get called. Additional methods are provided to reset the
spritedAnimationView to the beginning or end without animation.

Achieving two-state animation

It is enough to provide a single sprite sheet, animate the image, and simply reset to the beginning
once finished. However, in some cases, a nice user experience can be achieved by providing two
separate sprite sheets. One showing an animation from state A to state B, then another sprite sheet
showing state B going back to state A. This way, the sprite sheet can be swapped out after the
animation completes for each state, and be replaced with the other sprite image.

Two sample sprite sheets (showing List and Grid icon states)

List Sprite Sheet Grid Sprite Sheet
List Icon Grid Icon

Two-state example

// Animate the sprited view.
[_animationView startAnimatingWithCompletion:^{

  // When animation completes, toggle image.
  _toggle = !_toggle;
  UIImage *spriteImage =
      [UIImage imageNamed:_toggle ? kSpriteGridImage : kSpriteListImage];
  _animationView.spriteSheetImage = spriteImage;
}];

Usage

Integrating the spritedAnimationView is somewhat similar to adding an UIImageView to a view.

#import "GOSSpritedAnimationView.h"

// Create a Sprited Animation View.
UIImage *spriteSheet = [UIImage imageNamed:@"myImage"];
GOSSpritedAnimationView *animationView =
    [[GOSSpritedAnimationView alloc] initWithSpriteSheetImage:spriteSheet];
animationView.tintColor = [UIColor blueColor];
[self.view addSubview:animationView];

// To Animate.
[animationView startAnimatingWithCompletion:^{
    NSLog(@"Done animating.");
}];

Latest podspec

{
    "name": "GOSSpritedAnimationView",
    "version": "1.0.0",
    "authors": {
        "Chris Cox": "[email protected]"
    },
    "summary": "A control providing an alternative to animating an array of images with an UIImageView.",
    "homepage": "https://github.com/google/GOSSpritedAnimationView",
    "license": "Apache 2.0",
    "source": {
        "git": "https://github.com/google/GOSSpritedAnimationView.git",
        "tag": "1.0.0"
    },
    "platforms": {
        "ios": "7.0"
    },
    "requires_arc": true,
    "public_header_files": "src/*.h",
    "source_files": "src/*.{h,m}",
    "header_mappings_dir": "src/*"
}

Pin It on Pinterest

Share This