# Animation(​properties)

An object for drawing sprite sheet animations.

An animation defines the sequence of frames to use from a sprite sheet. It also defines at what speed the animation should run using `frameRate`.

Typically you don't create an Animation directly, but rather you would create them from SpriteSheet by passing the `animations` argument.

    let { SpriteSheet, Animation } = kontra;

    let image = new Image();
    image.src = 'assets/imgs/character_walk_sheet.png';
    image.onload = function() {
      let spriteSheet = SpriteSheet({
        image: image,
        frameWidth: 72,
        frameHeight: 97
      });

      // you typically wouldn't create an Animation this way
      let animation = Animation({
        spriteSheet: spriteSheet,
        frames: [1,2,3,6],
        frameRate: 30
      });
    };

    import { SpriteSheet, Animation } from 'path/to/kontra.mjs';

    let image = new Image();
    image.src = 'assets/imgs/character_walk_sheet.png';
    image.onload = function() {
      let spriteSheet = SpriteSheet({
        image: image,
        frameWidth: 72,
        frameHeight: 97
      });

      // you typically wouldn't create an Animation this way
      let animation = Animation({
        spriteSheet: spriteSheet,
        frames: [1,2,3,6],
        frameRate: 30
      });
    };

    import { SpriteSheet, Animation } from 'kontra';

    let image = new Image();
    image.src = 'assets/imgs/character_walk_sheet.png';
    image.onload = function() {
      let spriteSheet = SpriteSheet({
        image: image,
        frameWidth: 72,
        frameHeight: 97
      });

      // you typically wouldn't create an Animation this way
      let animation = Animation({
        spriteSheet: spriteSheet,
        frames: [1,2,3,6],
        frameRate: 30
      });
    };

### Animation Parameters

`properties`

  Object. Properties of the animation.

`properties.spriteSheet`

  SpriteSheet. Sprite sheet for the animation.

`properties.frames`

  An Array of Numbers. List of frames of the animation.

`properties.frameRate`

  Number. Number of frames to display in one second.

`properties.loop` Optional

  Boolean. If the animation should loop. Defaults to `true`.

## Animation​.clone(​) #

Clone an animation so it can be used more than once. By default animations passed to Sprite will be cloned so no two sprites update the same animation. Otherwise two sprites who shared the same animation would make it update twice as fast.

### clone Return value

A new Animation instance.

## Animation​.frameRate #

Number of frames to display per second. Adjusting this value will change the speed of the animation.

## Animation​.frames #

Sequence of frames to use from the sprite sheet.

## Animation​.height #

The height of an individual frame. Taken from the property of the same name in the spriteSheet.

## Animation​.loop #

If the animation should loop back to the beginning once completed.

## Animation​.margin #

The space between each frame. Taken from the property of the same name in the spriteSheet.

## Animation​.render(​properties) #

Draw the current frame of the animation.

### render Parameters

`properties`

  Object. Properties to draw the animation.

`properties.x`

  Number. X position to draw the animation.

`properties.y`

  Number. Y position to draw the animation.

`properties.width` Optional

  Number. width of the sprite. Defaults to Animation.width.

`properties.height` Optional

  Number. height of the sprite. Defaults to Animation.height.

`properties.context` Optional

  Canvas​Rendering​Context2D. The context the animation should draw to. Defaults to core.getContext().

## Animation​.reset(​) #

Reset an animation to the first frame.

## Animation​.spriteSheet #

The sprite sheet to use for the animation.

## Animation​.update(​[dt]) #

Update the animation.

### update Parameters

`dt` Optional

  Number. Time since last update. Defaults to `1/60`.

## Animation​.width #

The width of an individual frame. Taken from the property of the same name in the spriteSheet.