While we recommend you give this article a good read through you may also like to check out our in-depth video tutorial on Timelines.
In ZapWorks Studio, Controllers and States provide the basic tools for animating experiences. Timelines extend these concepts to allow for custom animations between states.
Timelines can be created from the right-click menu of a state. Selecting a destination state will create a timeline that will define the animation that occurs when the system moves between these states.
The timeline view in the center of the screen is used to modify the timeline. The left-most diamond on a row represents the starting state's value, while the right-most diamond represents the destination state's value.
The time handle can be dragged to change the timeline's current position.
The text boxes in the toolbar can be used to set the time or change the length of the timeline. These numbers express time in milliseconds.
Keyframes and Blocks
Diamonds in the timeline view represent keyframes - a value for a property at a specific time along the timeline. Most properties can be transitioned from one keyframe to another. This is represented by a solid block between the keyframes. The right-click menu for a block can be used to change the interpolation type for the transition - to make it a smooth, or bounce, for instance.
Some value types (such as true / false properties) can't be transitioned and thus cannot have blocks.
Keyframes can be added or modified at the timeline's current time by changing the property value in the Properties table or from the 3D view.
In addition to blocks, keyframes can be linked together. Links are represented by thin lines connecting keyframes. Modifying the value of a keyframe will also change the values of any linked keyframes.
In this example the keyframe at time 0 is linked to the state's keyframe to its left. This means that if that state's value is changed then the keyframe at time 0 will also be changed.
Once a timeline has been created between two states it's played according to the following rules. Consider two states, A and B, and a timeline A -> B.
- If state A is active and B.activate() is called then A -> B will play from the start to the end. Once complete, B will be active.
- If state B is active and A.activate() is called then A -> B will play backwards from the end to the start, unless a timeline B -> A exists in which case B -> A will play from start to end. Once complete, A will be active.
- If timeline A -> B is in progress when state A or B has activate() called then A -> B will play in the appropriate direction towards that state. Once complete the activated state will be active.
- If any other timeline or state is active when states A or B has activate() called then the default state animation will play.
It's sometimes desirable to create a timeline without explicit start and end states. This can be done from the right-click menu of a controller in the controllers panel.
The timeline can be controlled from a script by dragging the timeline into the script and inserting it as a local variable.
time(t) function will set the time of the timeline to a specific point.
play(speed) function will start playback of the timeline. A value of
1 plays the timeline forward at normal speed, a value of
2 at double speed, etc.
You have some additional common functions available to be automatically called when you drag a timeline in such as
For more details about using controllers and timelines from script check out the following reference articles:
Timelines make it possible to create complex animations from the elements that make up your experience.
The next article discusses creating fully Augmented Reality experiences with tracking images.