Animation

Animation 객체는 레이어와 속성값 집합을 대상으로 애니메이션을 관리한다.

애니메이션은 커브에서 시작과 끝을 가진다. 시작값은 애니메이션이 시작 순간에 결정되고 끝값은 속성에 정의한다. 옵션으로 전달되는 속성값들만 지정한 애니메이션에 의해 값이 변하게 된다. 현재 값과 끝값이 같다면, 애니메이션은 동작하지 않는다.

You can have multiple animations target the same layer as long as they don't target the same properties. If you start two animations both targeting x for the same layer, the second one will fail. 동일 속성을 타겟으로 하지 않는다면 동일한 레이어는 여러개의 애니메이션을 가질 수 있다. 동일 레이어에 대해서 x를 타겟으로 하는 2개 애니메이션이 있다면, 2번째 애니메이션은 동작하지 않는다.

Only numeric layer properties can be animated. The full list is x, y, z, width, height, opacity, rotation, rotationX, rotationY, rotationZ, scale scaleX, scaleY, scaleZ, originX, originY, perspective, scrollX, scrollY, borderRadius, borderWidth, shadowX, shadowY, shadowBlur, shadowSpread, blur, brightness, saturate, hueRotate, contrast, invert, grayscale, sepia. You can also animate the dynamic properties minX, midX, maxX, minY, midY and maxY.

Most properties can benefit from gpu accelerated drawing and you can animate many of them without hurting your frame rate. But some properties need to involve the CPU to animate and are therefore more expensive to render. The full list is width, height, scrollX, scrollY,borderRadius, borderWidth.

To listen to animation events like start, stop and end please see the animation events. Animation events will be passed onto the animated layer as well with the animation as the first argument.

Options	Value	Description
layer (required)	Layer Object	The targeted layer
properties (required)	Object	The target values for the animated properties
curve	String	Used curve for the animation. For a full list see curve types. You can also combine the curve with its options as a shorthand: "spring(100,10,0)". The default curve is linear.
curveOptions	Object	Options for the used curve. For a full list see curve options.
time	Number	The duration in seconds. Ignored for spring values. Default value is 1 second.
delay (optional)	Number	The delay before the animation starts in seconds.
repeat (optional)	Number	The number of times this animation needs to repeat.

Animation Curve Types

Curve types	Description
linear	Constant speed
bezier-curve	Bezier Curve
spring-rk4	Runge-Kutta spring. Precise spring physics.
spring-dho	Damping harmonic oscillator spring. Sloppy spring physics.
spring	alias for "spring-rk4"

Animation Curve Options

Curve Types	Type	Description
bezier-curve
preset	string	"ease-in", "ease-out", "ease-in-out"
curve bezier values	array	[0, 1, 0, 1]
spring-rk4
tension	number	Strength of the spring
friction	number	How hard it is to move the object
velocity	number	Velocity at start
tolerance	number	Minimal movement threshold before we say the spring finished
spring-dho
stiffness	number	Strength of the spring
damping	number	How quickly the spring should reduce motion/force
mass	number	Weight of the object
tolerance	number	Minimal movement threshold before we say the spring finished

Some examples. Notice that none of these animations actually start running until you call animation.start()

layerA = new Layer

# Animate the layer to the right
animationA = new Animation
    layer: layerA
    properties:
        x: 100


# Animate multiple properties
animationB = new Animation
    layer: layerA
    properties:
        x: 100
        opacity: 0.5

# Animate the layer to the right in 5 seconds
animationC = new Animation
    layer: layerA
    properties:
        x: 100
    time: 5


# Repeat an animation 5 times
animationD = new Animation
    layer: layerA
    properties:
        x: 100
    repeat: 5


# Start an animation after 5 seconds
animationE = new Animation
    layer: layerA
    properties:
        x: 100
    delay: 5


# Animate the layer with a spring curve
animationF = new Animation
    layer: layerA
    properties:
        x: 100
    curve: "spring(100, 10, 0)"


# Animate the layer with a bezier curve
animationG = new Animation
    layer: layerA
    properties:
        x: 100
    curve: "ease-in-out"

animation.start()

Start the animation.

layerA = new Layer

animationA = new Animation
    layer: layerA
    properties:
        x: 100

# Nothing will move until we start
animationA.start()

animation.stop()

Stop the animation.

layerA = new Layer

animationA = new Animation
    layer: layerA
    properties:
        x: 100

animationA.start()

# Stop the animation
animationA.stop()
animation.reverse()

Returns: Animation Object
Create a new animation with all reverse values.

layerA = new Layer

animationA = new Animation
    layer: layerA
    properties:
        x: 100

animationB = animationA.reverse()

# Alternate between the two animations
animationA.on(Events.AnimationEnd, animationB.start)
animationB.on(Events.AnimationEnd, animationA.start)

animationA.start()