Your SlideShare is downloading. ×
0
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Albus
Upcoming SlideShare
Loading in...5
×

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.
Text the download link to your phone
Standard text messaging rates apply

Albus

168

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

×