<!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 |
通过js使用动画曲线
最新推荐文章于 2024-06-25 12:49:20 发布