0
Upcoming SlideShare
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Standard text messaging rates apply

# Albus

168

Published on

Published in: Technology, Education
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

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

• Be the first to like this

Views
Total Views
168
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
0
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Transcript

• 1. Engine
• 2. Animation
• 3. Animation Engine Nguyên lý hoạt động Cách thứ mở rộng
• 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. Nguyên lý 1Vị trí 0 Thời gian 1
• 6. Nguyên lý 1Vị 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ộngAlbus.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.phphttp://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.htm