通过js使用动画曲线

来源：互联网发布：sql查询用户名和密码编辑：程序博客网时间：2024/06/17 12:25

<!DOCTYPE html><htmllang="zh-cn"><head><metacharset="UTF-8"><title>通过js使用动画曲线</title><style>#ball { position: absolute; width: 20px; height: 20px; border-radius: 20px; background-color: red; }</style></head> <html> <body> <div id="ball"></div> <script type="text/javascript"> var Tween = { "Elastic" : { easeOut: function(t, b, c, d, a, p) { var s; if(t == 0) return b; if((t /= d) == 1) return b + c; if(typeof p == "undefined") p = d * .3; if(!a || a < Math.abs(c)) { a = c; s = p / 4; } else { s = p / (2 * Math.PI) * Math.asin(c / a); } return(a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); } } }; var ball = document.getElementById("ball") var elasticFall = function() { var start = 0, beginingValue = 0, changeValue = 400, during = 100; var _run= function() { start++; var top = Tween.Elastic.easeOut(start, beginingValue, changeValue, during); ball.style.webkitTransform = "translateY("+top+"px)"; if(start < during) requestAnimationFrame(_run); } _run(); }; elasticFall(); </script> </body>

</html><script></script></html>

https://github.com/zhangxinxu/Tween/blob/master/tween.js

阅读全文

0 0