Position animation step
The position animation step animates the first Translation transform in the FigureElement's Transform.
By default, the position will start with the element's current position.
Use either delta or target to define it's end point.
delta
target
The path of travel between start and target can either be a straight line ('linear') or a quadratic bezier curve ('curve')
start
'linear'
'curve'
For custom paths, the CustomAnimationStep can be used.
To test examples, append them to the boilerplate
// Using durationp.animations.new() .position({ target: [1, 0], duration: 2 }) .start() Copy
// Using durationp.animations.new() .position({ target: [1, 0], duration: 2 }) .start()
// Using velocityp.animations.new() .position({ target: [1, 0], velocity: 0.5 }) .start() Copy
// Using velocityp.animations.new() .position({ target: [1, 0], velocity: 0.5 }) .start()
// Linear and curved pathp.animations.new() .delay(1) .position({ target: [1, 0], duration: 2 }) .position({ target: [0, 0], duration: 2, path: { style: 'curve', magnitude: 0.8, direction: 'up', }, }) .start(); Copy
// Linear and curved pathp.animations.new() .delay(1) .position({ target: [1, 0], duration: 2 }) .position({ target: [0, 0], duration: 2, path: { style: 'curve', magnitude: 0.8, direction: 'up', }, }) .start();
// Different ways to create a stand-alone stepconst step1 = p.animations.position({ target: [1, 0], duration: 2 });const step2 = new Fig.Animation.PositionAnimationStep({ element: p, target: [0, 0], duration: 2,});p.animations.new() .then(step1) .then(step2) .start(); Copy
// Different ways to create a stand-alone stepconst step1 = p.animations.position({ target: [1, 0], duration: 2 });const step2 = new Fig.Animation.PositionAnimationStep({ element: p, target: [0, 0], duration: 2,});p.animations.new() .then(step1) .then(step2) .start();
Get remaining duration of the animation.
define this if you want remaining duration from a custom time
Position animation step
The position animation step animates the first Translation transform in the FigureElement's Transform.
By default, the position will start with the element's current position.
Use either
deltaortargetto define it's end point.The path of travel between
startandtargetcan either be a straight line ('linear') or a quadratic bezier curve ('curve')For custom paths, the CustomAnimationStep can be used.
Param: options
See
To test examples, append them to the boilerplate
Example
Example
Example
Example