Animating position using bezier with power4 easing on canvas with TweenMax.js
By Bartłomiej Bartel
An example of animating position using bezier tweening with power4 easing on canvas with TweenMax.js
<!DOCTYPE html>
<html>
<head>
<script src="js/plugins/BezierPlugin.min.js"></script>
<script src="js/easing/EasePack.min.js"></script>
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="700" height="500"></canvas>
<script>
var context, canvas, myRectangle;
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = 'black';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'blue';
context.stroke();
}
function renderCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
}
myRectangle = {
x: 60,
y: 60,
width: 50,
height: 50,
borderWidth: 5
};
TweenMax.to(myRectangle, 4, {bezier:{values:[{x:100, y:40},{x:150,y:240},{x:300,y:180}]}, width:120, height:120, borderWidth: 8, onUpdate:renderCanvas, ease: Power4.easeOut });
</script>
</body>
</html>