Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Tweening and animating HTML5 and JavaScript properties with Tween.js
Tween.js is a JavaScript library that is mainly used when we want to tween or animate an HTML5 or JavaScript property. It can work standalone as well as when integrated with Easel.js. In this tutorial, we will learn how we can make use of Tween.js with the help of a few examples.
Before we go on to the main example, let's first discuss a few simple tweens so that when we use them in the main example, you don't get overwhelmed.
Simple Tween
In this tween, we will tween the alpha property of the target from 0 to 1 for 500 ms and then we will call the handleComplete function, which we have chained via the call method.
target.alpha = 0; createjs.Tween.get(target).to({alpha:1}, 500).call(handleComplete); function handleComplete() { // Tween done }
Chainable Tween
In this tween, we will see how we can chain tweens. This particular tween will wait for 0.5s, then we will tween the target's alpha property to 0 over 500 ms, and then set its "visible" to false. Finally, we will call the handleComplete function.
target.alpha = 1; createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 500).call(handleComplete); function handleComplete() { // Tween one }
Example
Now let's move our focus to the main example. In this program, we will try to create a circle, which will be active. By active, I mean that when you move your mouse, it will change its position and you will get a good animation while doing it. It is a good example of Tween.js in which we will use different tween.js functions and methods.
<!DOCTYPE html>
<html>
<head>
<title>TweenJS Example: Circles</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script id="editable">
let canvas;
let stage;
let tweens;
let activeCount;
let circleCount = 25;
let text;
function init() {
canvas = document.getElementById("simpleCanvas");
stage = new createjs.Stage(canvas);
stage.enableDOMEvents(true);
tweens = [];
stage.enableMouseOver(10);
createjs.Touch.enable(stage);
for (let i = 0; i < circleCount; i++) {
let circle = new createjs.Shape();
circle.graphics.setStrokeStyle(15);
circle.graphics.beginStroke("#113355");
circle.graphics.drawCircle(0, 0, (i + 1) * 4);
circle.alpha = 1 - i * 0.02;
circle.x = Math.random() * 550;
circle.y = Math.random() * 400;
circle.compositeOperation = "lighter";
let tween = createjs.Tween.get(circle).to({
x: 275,
y: 150
}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
tweens.push({
tween: tween,
ref: circle
});
stage.addChild(circle);
}
activeCount = circleCount;
stage.addEventListener("stagemouseup", handleMouseUp);
text = new createjs.Text("Click to Tween", "24px Arial", "#777");
text.x = 350;
text.y = 200;
stage.addChild(text);
createjs.Ticker.addEventListener("tick", tick);
}
function handleMouseUp(event) {
if (text) {
stage.removeChild(text);
text = null;
}
for (let i = 0; i < circleCount; i++) {
let ref = tweens[i].ref;
let tween = tweens[i].tween;
createjs.Tween.get(ref, {
override: true
}).to({
x: stage.mouseX,
y: stage.mouseY
}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
}
activeCount = circleCount;
}
function tweenComplete() {
activeCount--;
}
function tick(event) {
if (activeCount) {
stage.update(event);
}
}
</script>
</head>
<body onload="init();">
<header class="TweenJS">
<h3>TweenJS Plugin Example</h3>
</header>
<canvas id="simpleCanvas" width="580" height="350" style="background:#000;"></canvas>
</body>
</html>
If you run the above code in the browser, you will get an animation. Once you click anywhere, the animated circle will react to your mouse movements and clicks.
Explanation
In the above code, we are first calling the function named onInit() when the body loads, and then everything related to Tween and the circle animation is happening inside that function.
First, we create a canvas by using the Stage() method
Next, we enable the DOM events on that canvas and then we also enable the mouseover for that canvas.
Thereafter, we enable the Touch property by using the line createjs.Touch.enable(stage).
The next step is to draw a circle, and then for each shape, we are setting the graphics property values to some specified values of our choice. Feel free to change them according to your choice.
Later, we are using Tween to get the canvas and then append some coordinate positions and then pushing the values in it.
In the next step, I am appending an eventListener, on which a function named handleMouseUp will get invoked and in that function, we are checking if someone has clicked the text. If not, then we are overriding the Tween animation and updating the activeCount with the current circleCount.
In the above example, I have used the tick function as well, in which I am simply checking if the activeCount is present, then I am updating the current stage with an event.
Conclusion
In this tutorial, we explained how you can use Tween.js to tween and animate HTML5 and JavaScript properties.
332 Views
