Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Albus

344 views

Published on

Published in: Technology, Education
  • 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

×