Albus

250 views
215 views

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
250
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×