javascript 45种缓动效果非常酷

174 阅读 0 评论 115 点赞

我是靠谱客的博主安详马里奥，最近开发中收集的这篇文章主要介绍javascript 45种缓动效果非常酷，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

参数	类型	说明
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	可选，在结束时执行。

prototype流派的缓动公式，只需一个参数（增至45种）

<!doctype html>

<html dir="ltr" lang="zh-CN"> 
<head> 
<meta charset="utf-8"/> 
<meta http-equiv="X-UA-Compatible" content="IE=8"> 
<style type="text/css"> 
.taxiway{ 
width:800px; 
height:100px; 
background:#E8E8FF; 
} 
.move{ 
width:100px; 
height:100px; 
background:#a9ea00; 
} 
#panel { 
float:left; 
width:810px 
} 
#panel div{ 
float:left; 
width:88px; 
border:1px solid #333; 
height:20px; 
font-size:11px; 
} 
div.transition { 
margin-top: 30px; 
width: 200px; 
height: 200px; 
position: relative; 
margin-bottom:10px; 
} 
div.transition div { 
position: absolute; 
height: 1px; 
width: 1px; 
background: #000; 
} 
div.transition span { 
display: block; 
position: absolute; 
border-bottom: 1px solid #dadada; 
font-size: 10px; 
color: #888; 
width: 200px; 
left: 0px; 
} 
div.transition div#indicator { 
position:absolute; 
background-color:#a9ea00; 
height: 200px; 
top: 0px; 
left: 0px; 
} 
div.transition div#marker { 
background-color: #f00; 
height: 6px; 
width: 6px; 
border-radius: 3px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
left: 0px; 
margin-bottom: -3px; 
margin-left: -3px; 
} 
div.transition div#label { 
background: transparent; 
color: #ABD474; 
font-size: 20px; 
height: 20px; 
width: 200px; 
text-align: center; 
top: 80px; 
left: 0px; 
z-index: -1; 
} 
</style> 
 
<title>缓动BY司徒正美</title> 
</head> 
<body> 
<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> 
<div id="transition" class="transition"> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]