To test examples, append them to the boilerplate
// Figure has two rectangles and a slide navigator. Slides will dissolve in,
// dissolve out, move and rotate rectangles
const [rect1, rect2] = figure.add([
{
name: 'rect1',
make: 'primitives.rectangle',
width: 0.4,
height: 0.4,
position: [-0.5, 0.5],
},
{
name: 'rect2',
make: 'primitives.rectangle',
width: 0.4,
height: 0.4,
position: [0.5, 0.5],
},
{
name: 'nav',
make: 'collections.slideNavigator',
},
]);
const setPositionAndRotation = (r1Pos, r1Rot, r2Pos, r2Rot) => {
rect1.setPosition(r1Pos);
rect1.setRotation(r1Rot);
rect2.setPosition(r2Pos);
rect2.setRotation(r2Rot);
};
// Add slides to the navigator
figure.getElement('nav').loadSlides([
// Slide 1
{
showCommon: 'rect1',
enterStateCommon: () => setPositionAndRotation([-0.5, 0.5], 0, [0.5, 0.5], 0),
},
// Slide 2
{
transition: (done) => {
rect2.animations.new()
.dissolveIn({ duration: 1 })
.whenFinished(done) // Make sure to process done when finished
.start();
},
// When using a transition function, any changes during the transition
// need to be explicitly set at steady state
steadyState: () => {
rect2.show();
},
},
// Slide 3
// When using animation objects, the targets of animations will be
// automatically set at steady state, so user does not need to set them
{
showCommon: ['rect1', 'rect2'],
transition: { position: 'rect2', target: [0.3, 0.5], duration: 1 },
},
// Slide 4
// Use an array of animation object definitions to create a sequence of steps
{
enterState: () => setPositionAndRotation([-0.5, 0.5], 0, [0.3, 0.5], 0),
transition: [
{ position: 'rect1', target: [-0.3, 0.5], duration: 1 },
{ rotation: 'rect1', target: Math.PI / 4, duration: 1 },
{ rotation: 'rect2', target: Math.PI / 4, duration: 1 },
],
},
// Slide 5
// Use an array within an array to create parallel steps
{
enterState: () => setPositionAndRotation([-0.3, 0.5], Math.PI / 4, [0.3, 0.5], Math.PI / 4),
transition: [
[
{ rotation: 'rect1', target: 0, duration: 1 },
{ rotation: 'rect2', target: 0, duration: 1 },
],
[
{ position: 'rect1', target: [-0.5, 0.5], duration: 1 },
{ position: 'rect2', target: [0.5, 0.5], duration: 1 },
],
{ out: ['rect1', 'rect2'] },
],
},
]);
Transition Definition
TypeSlideTransitionCallback | OBJ_AnimationDefinition | Array<OBJ_AnimationDefinition | Array<OBJ_AnimationDefinition>>
For complete control in creating a transition animation, and/or setting necessary transition state within an application, use a function definition TypeSlideTransitionCallback.
Many transitions will be simple animations, dissolving in elements, dissolving out elements, or animating between positions. For these, a short hand way of defining animations can be used.
OBJ_AnimationDefinition is a json like object that defines the animation. When used in an array, multiple animations will be executed in series.
If an array of OBJ_AnimationDefinition objects has an element that itself is an array of OBJ_AnimationDefinition objects, then the the animations within the nested array will be executed in parallel.