Successfully reported this slideshow.
Upcoming SlideShare
×

# Albus

344 views

Published on

Published in: Technology, Education
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

### Albus

1. 1. Engine
2. 2. Animation
3. 3. Animation Engine Nguyên lý hoạt động Cách thứ mở rộng
4. 4. Simple movevar 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. 5. Nguyên lý 1Vị trí 0 Thời gian 1
6. 6. Nguyên lý 1Vị trí 0 Thời gian 1
7. 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. 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. 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. 10. Mở rộngAlbus.transition = { 0: function(x) { return x; }, 1: function(x) { return x*(2 - x); }, 2: function(x) { return Math.pow(x, 2); }}
11. 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. 12. Đồ thị các hàm. 4 Fx = x JavaScript function:function(x) {return Math.pow(x, 4);}
13. 13. Đồ thị các hàm. 1/4 Fx = x JavaScript function:function(x) {return Math.pow(x, 1/4);}
14. 14. Đồ thị các hàm.bnouce Cos(10*x*Pi)
15. 15. Tham khảo Demo:http://vnjs.net/www/demo/albus/kick.html Tham khảo:http://cross-browser.com/x/examples/animation_tech.phphttp://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.htm