Ani

Ani

new Ani()

Look at the Animation reference pages before reading these docs. An `Ani` object contains an array of images (Q5.Image objects) that can be displayed with the `animation` function or by being a sprite's animation. An animation can be created multiple ways, including from: - a list of image file paths as multiple input parameters - a sequence of numbered images by providing the file path to the first image frame and last frame index - a sprite sheet image path and atlas object, subtexture locator, or frame locators array `Ani` is not a shorthand for `Animation`, since that class name is already used by the JS Web Animations API.
Source:
Parameters:
Name Type Attributes Description
...images Image <repeatable>
 Image objects to be used as frames
Example
let shapeShifter = new Ani("dog.png", "cat.png", "snake.png");

Extends

  • Array:.<Image:>

Classes

Ani

Members

frame :Number

The index of the current frame that the animation is on.
Source:
Type:
  • Number

frameDelay :Number

Delay between frames in number of draw cycles. If set to 4 the framerate of the animation would be the sketch framerate divided by 4 (60fps = 15fps)
Default Value:
  • 4
Source:
Type:
  • Number

frameImage :Image

The current frame as an Image object. Read only.
Source:
Type:
  • Image

h :Number

Height of the animation's current frame.
Source:
Type:
  • Number

height :Number

Height of the animation's current frame.
Source:
Type:
  • Number

lastFrame :Number

The index of the last frame. Read only.
Source:
Type:
  • Number

scale :Number|Object

The animation's scale. Can be set to a number to scale both x and y or an object with x and/or y properties.
Default Value:
  • 1
Source:
Type:
  • Number | Object

w :Number

Width of the animation's current frame.
Source:
Type:
  • Number

width :Number

Width of the animation's current frame.
Source:
Type:
  • Number

Methods

clone() → {Ani}

Make a copy of the animation.
Source:
Returns:
Type:
Ani
A copy of the animation.

draw(dx, dy, dwopt, dhopt)

Draws the animation. Similar to the q5.js `image` function. If the animation is playing, it will advance to the next frame automatically. `imageMode` affects the position of the animation.
Source:
Parameters:
Name Type Attributes Description
dx Number x coordinate to draw the animation
dy Number y coordinate to draw the animation
dw Number <optional>
 width to draw the animation
dh Number <optional>
 height to draw the animation

goToFrame(toFrame)

Plays the animation forward or backward toward a target frame.
Source:
Parameters:
Name Type Description
toFrame Number Frame number destination (starts from 0)
Returns:
[Promise] a promise that resolves when the animation completes

loop()

Plays the animation forwards and loops it.
Source:

nextFrame()

Goes to the next frame and stops.
Source:

noLoop()

Prevents the animation from looping
Source:

pause()

Pauses the animation.
Source:

play()

Plays the animation, starting from the specified frame.
Source:
Returns:
[Promise] a promise that resolves when the animation completes

previousFrame()

Goes to the previous frame and stops.
Source:

rewind()

Plays the animation backwards. Equivalent to ani.goToFrame(0)
Source:
Returns:
[Promise] a promise that resolves when the animation completes rewinding

stop()

Stops the animation. Alt for pause.
Source: