javascript 45 easing effects, very cool_javascript skills-JS Tutorial-php.cn

javascript 45 easing effects, very cool_javascript skills

WBOY

Release： 2016-05-16 18:05:18

Original

1118 people have browsed it

参数	类型	说明
el	element	必需，为页面元素
begin	number	必需，开始的位置
change	number	必需，要移动的距离
duration	number	可选，缓动效果持续时间，默认是500ms。建议取300~1000ms。
field	string	必需，要发生变化的样式属性。请在top，left，bottom,right，width与height中选择。
ftp	number	可选，每秒进行多少帧动画，默认50帧，保证流畅播放。一些参考资料，日本动画1秒36帧，中国卡通24帧，赛车游戏60帧。
ease	function	必需，缓动公式，参数为0~1之间的数。可参考我下面给出的45条公式。
onStart	function	可选，在开始时执行。
onEnd	function	可选，在结束时执行。

The easing formula of the prototype genre only needs one parameter (increased to 45 types)

<div class="taxiway">
<div class="move" onclick="transition(this,{field:'left',begin:parseFloat(getCoords(this).left),change:700,ease:tween.bouncePast})">
</div>
</div>
<div class="taxiway">
<div class="move" onclick="transition(this,{field:'width',begin:parseFloat(getStyle(this,'width')),change:300,ease:tween.spring})">
</div>
</div>
<span class="clear">
</span><h2>
</h2>Please click on the grid in the table below<div id="transition" class="transition">
</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]