通过js使用动画曲线

叁歲伎倆 2021-09-14 01:46 417阅读 0赞

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