smart-create,
документация по анимации по ссылке выше
более продвинутые варианты смотреть у
Rise
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<input id="go" name="" type="button" value="go" >
<canvas id="canvas" width="300" height="300" ></canvas>
<script>
function anim(a) {
return function() {
var d = performance.now();
requestAnimationFrame(function e(b) {
b = (b - d) / a.duration;
1 <= b && (b = 1);
var k = a.easing ? a.easing(b) : b;
var y = a.from.y + (a.to.y - a.from.y) * k | 0;
var x = a.from.x + (a.to.x - a.from.x) * k | 0;
var ctx = a.elem.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = a.color;
ctx.lineWidth = a.width;
ctx.moveTo(a.from.x, a.from.y);
ctx.lineTo(x, y);
ctx.stroke();
b == 1 && a.callback && a.callback()
1 > b && requestAnimationFrame(e)
})
}
}
function makeEaseInOut(timing) {
return function(timeFraction) {
if (timeFraction < .5)
return timing(2 * timeFraction) / 2;
else
return (2 - timing(2 * (1 - timeFraction))) / 2;
}
}
function circ(timeFraction) {
return 1 - Math.sin(Math.acos(timeFraction))
}
var EaseInOut = makeEaseInOut(circ);
var canvas = document.querySelector("#canvas"),
but = document.querySelector("#go"),
obj = {
easing: circ,
color: "#FF0000",
width: 5,
from: {x : 20,y : 20},
to: {x : 100,y : 200},
duration: 3 * 1000,
elem: canvas,
callback: function() {
anim(obj2)()
}
},
obj2 = {
easing: circ,
color: "#FF0000",
width: 5,
from: {x : 100,y : 200},
to: {x : 200,y : 20},
duration: 3 * 1000,
elem: canvas,
callback: function() {
anim(obj3)()
}
},
obj3 = {
easing: circ,
color: "#FF0000",
width: 5,
from: {x : 200,y : 20},
to: {x : 20,y : 20},
duration: 2 * 1000,
elem: canvas,
callback: function() {
alert("test")
}
}
;
but.addEventListener("mousedown", anim(obj));
</script>
</body>
</html>