Tutorial on how to animate the DOM elements in Caph applications. Caph provides a simple animations engine using CSS3 transformations such as move, rotation, scale and opacity. It also allows you to apply multiple animations simultaneously by using the timeline.
To use the Caph framework, just reference the Caph library in your index.html file. The library should be loaded as first, before all of your application source files. Refer to the sample source code below:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html>
<html>
<head>
<title>Sample Application</title>
<script src="caph.base-2.0.0.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// your code is here.
</script>
</body>
</html>
|
You can apply a simple animation using caph.animation.Transform. If you want to apply multiple animations to a DOM element simultaneously, using caph.animation.Timeline and caph.animation.Player.
caph.animation.Transform consists of very simple APIs. All Caph animation APIs support the method chaining. Detailed list can be found below:
| Method | Description |
|---|---|
| rotate | Rotates the element. |
| retateX | Rotates the element by X-axis. |
| rotateY | Rotates the element by Y-axis. |
| rotateZ | Rotates the element by Z-axis. |
| rotateAxis | Rotates the element by axis. |
| move | Moves the element. |
| scale | Scales the element. |
| opacity | Sets opacity to the element. |
| delay | Sets the transition delay time. |
| callback | Adds a callback function which is called after animation finish. |
| start | Starts the transformation. |
| stop | Stops the transformation. |
| resume |
Resumes the transformation. |
The animation API can be called in any order and chained one after another. After setting all parameters and actions, call caph.animation.Transform.start() to run the animation
1 2 3 4 5 6 7 |
<script type="text/javascript">
var transform = new caph.animation.Transform(document.getElementById('test'));
transform.move(100, 0, 0, 500, 'ease-out').delay(500);
transform.rotateX(360, 500).callback(function() { console.log('OK'); });
transform.scale(1.5, 1.5, 0, 500, 'ease-in', 0.5).opacity(1);
transform.start(2);
</script>
|
Code is described below :
| Line | Description |
|---|---|
| 2 | Creates a new caph.animation.Transform object of the element of which id is the "test". |
| 3 | Moves the element to the right 100px position during 500 milliseconds using "ease-out" timing function, then waits 500 milliseconds. |
| 4 | Rotates the element 360 degree by X-axis during 500 millisecondsm then call the callback function which prints the "OK" message to the console. |
| 5 | The element is scaled to 1.5x size along X and Y axis with opacity 0.5 during 500 milliseconds. Then the opacity value becomes 1 during 500 milliseconds. |
| 6 |
Starts the transform animation twice. If you want to play once, do not pass any argument. If you want to play it infinitely, use "caph.animation.Player.INFINITE". |
caph.animation.Transform can’t apply two or more animations to one element at once. For it is not possible to, move the element to the right while rotate 360 degree along X-axis. In that case, you can achieve the goal using timeline. Each of the simple animations should be defined in separate caph.animation.Timeline object. Finally, all the timeline objects and the related DOM element should be added to caph.animation.Player.
Let’s define timelines. caph.animation.Timeline has a add method. This method has a parameter object to define a timeline. The details are below:
| Property | Description |
|---|---|
| transition | Specifies the transition effect. This function returns a function which is passed a current time argument and returns a corresponding 4x4 matrix for that time. Refer to caph.animation.transition for details. It provides frequently used transitions such as move, scale and rotation. |
| ease | Specifies the speed curve of the transition effect. A function which is passed a current time argument and returns a time which is affected by that curve. Refer to caph.animation.ease for details. It provides frequently used curves such as ease-in, ease-out, ease-in-out and so on. It returns an array which consists of two items. The first index of array is the representation of curve and the second index of array is timing function. Default value is caph.animation.ease.linear. |
| opacity | An integer indicates the opacity. Default value is 1. This property also can be a function which is passed a current time argument and returns a opacity for that time. This value is from 0 to 1. caph.animation.transition provides several opacity functions such as flicker, fade-in-out-in and fade-out-in-out. |
| delay | the delay (in milliseconds) before the effect will start. Default value is 0. |
| duration |
complete time of efect animation (in milliseconds). Default value is 0. |
| callback |
A function which is called when the given animation ends. |
Here is an example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript">
var timeline1 = new caph.animation.Timeline();
timeline1.add({transition: caph.animation.transition.move(100, 10, 0), duration: 500, ease: caph.animation.ease.easeInOut, delay: 500});
timeline1.add({transition: caph.animation.transition.rotateZ(45), duration: 500, ease: caph.animation.ease.easeInOut, delay: 500, opacity: caph.animation.transition.opacity(1, 0.5)});
timeline1.add({transition: caph.animation.transition.scale(1.5, 1.5, 1), duration: 500, ease: caph.animation.ease.easeInOut, delay: 500, opacity: caph.animation.transition.opacity(0.5, 1)});
var timeline2 = new caph.animation.Timeline();
timeline2.add({transition: caph.animation.transition.rotateZ(90), duration: 1500, ease: caph.animation.ease.easeInOut});
timeline2.add({transition: caph.animation.transition.rotateZ(90), duration: 1500, ease: caph.animation.ease.easeInOut});
var timeline3 = new caph.animation.Timeline();
timeline3.add({transition: caph.animation.transition.move(100, 100, 0), duration: 500, ease: caph.animation.ease.easeInOut, delay: 500});
timeline3.add({transition: caph.animation.transition.move(-100, 0, 0), duration: 500, ease: caph.animation.ease.easeInOut, delay: 500});
timeline3.add({transition: caph.animation.transition.move(0, -100, 0), duration: 500, ease: caph.animation.ease.easeInOut, delay: 500});
</script>
|
Code is described below :
| Line | Description |
|---|---|
| 2 | Creates a new caph.animation.Timeline object. |
| 3 | Adds a move effect to the timeline1. Moves to the right 100px and down 10px, during 500 milliseconds, after 500 milliseconds delay. |
| 4 | Adds a rotation effect to the timeline1. Rotates 45 degree by Z-axis with opacity from 1 to 0.5, during 500 milliseconds, after 500 milliseconds delay. |
| 5 | Adds a scale effect to the timeline 1. Scales to 1.5x size along X and Y axis with opacity from 0.5 to 1, during 500 milliseconds, after 500 milliseconds delay. |
| 7 |
Creates a new caph.animation.Timeline object. |
| 8 |
Adds a rotation effect to the timeline2. Rotates 90 degree by Z-axis, during 1500 milliseconds. |
| 9 |
Adds a rotation effect to the timeline2. Rotates 90 degree by Z-axis, during 1500 milliseconds. |
| 11 |
Creates a new caph.animation.Timeline object. |
| 12 |
Adds a move effect to the timeline3. Moves to the right 100px and down 100px, during 500 milliseconds, after 500 milliseconds delay. |
| 13 |
Adds a move effect to the timeline3. Moves to the left 100px, during 500 milliseconds, after 500 milliseconds delay. |
| 14 |
Adds a move effect to the timeline3. Moves to the up 100px, during 500 milliseconds, after 500 milliseconds delay. |
Now, timelines are prepared.
We can add these timelines to caph.animation.Player. caph.animation.Player also has a add method. This method has two parameters. First parameter is an element to apply timeline. Second parameter is a timeline to apply to the element. If an element has two or more timelines, apply mixed animation at the same timing to the element. Details are below :
1 2 3 4 5 6 7 8 |
<script type="text/javascript">
var element = document.getElementById('test');
var player = new caph.animation.Player();
player.add(element, timeline1);
player.add(element, timeline2);
player.add(element, timeline3);
player.play();
</script>
|
Code is described below :
| Line | Description |
|---|---|
| 2 | Gets an element by given id. |
| 3 | Creates a new caph.animation.Player object. |
| 4 | Adds timeline1 to element. |
| 5 | Adds timeline2 to element. |
| 6 |
Adds timeline3 to element. |
| 7 |
Plays the mixed animation. |
caph.animation.Player provides more useful APIs such as stop, resume, seek and so on. And caph.animation.transition and caph.animation.ease objects provide a lot of pre-defined animation effects and timing function. Refer to the API reference for the details.