1. Engine

2. Animation

3. Animation Engine

Nguyên lý hoạt động

Cách thứ mở rộng

4. Simple move
var ele = document.getElementById(“simple”)
var i = 0;
var timer = setInterval(function(){
++ i;
if (i < 1000) ele.style.left = i + “px”;
else clearTimeout(timer);
}, 10);

5. Nguyên lý
1
Vị trí
0 Thời gian 1

6. Nguyên lý
1
Vị trí
0 Thời gian 1

7. Chia trác.
function _split(source, target, divide, unit, func) {
var x, delta, range = [];
delta = target - source;
for (var i = 0; i <= divide; ++i) {
x = i/divide;
range.push((source + func(x)*delta).toFixed(2) + unit);
}
return range;
}

8. Nguyên lý
function _split(source, target, divide, unit, func) {
var x, delta, range = [];
delta = target - source;
for (var i = 0; i <= divide; ++i) {
x = i/divide;
range.push((source + func(x)*delta).toFixed(2) +
unit);
} target
return range;
}
source t

9. Demo
_split(0, 500, 20, “px”, function(x) {return x;});
Kết quả:
["0.00px", "50.00px", "100.00px", "150.00px", "200.00px", "250.00px",
"300.00px", "350.00px", "400.00px", "450.00px", "500.00px", "550.00px",
"600.00px", "650.00px", "700.00px", "750.00px", "800.00px", "850.00px",
"900.00px", "950.00px", "1000.00px"]

10. Mở rộng
Albus.transition = {
0: function(x) {
return x;
},
1: function(x) {
return x*(2 - x);
},
2: function(x) {
return Math.pow(x, 2);
}
}

11. Đồ thị các hàm.
 Fx = (1 – cos(x*pi))/2
 JavaScript function:
function(x) {
return (0.5 – 0.5*Math.cos(x * Math.PI));
}

12. Đồ thị các hàm.
4

Fx = x

JavaScript function:
function(x) {
return Math.pow(x, 4);
}

13. Đồ thị các hàm.
1/4

Fx = x

JavaScript function:
function(x) {
return Math.pow(x, 1/4);
}

14. Đồ thị các hàm.
bnouce Cos(10*x*Pi)

15. Tham khảo

Demo:
http://vnjs.net/www/demo/albus/kick.html

Tham khảo:
http://cross-browser.com/x/examples/animation_tech.php
http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.htm