【算法】前端开发效果实例：缓动效果
摘要：前端组建化开发实例|算法语言与前端开发|数据结构与算法对前端开发重要吗 为什么？ 参数： t:时间，区间[0,1]； b:开始位置； c:终点位置减去开始位置 最要研究的是easeInOut算法，javascript的代码没怎么整理（凑……
前端组建化开发实例|算法语言与前端开发|数据结构与算法对前端开发重要吗 为什么？
参数：
t:时间，区间[0,1]；
b:开始位置；
c:终点位置减去开始位置
最要研究的是easeInOut算法，javascript的代码没怎么整理（凑合看吧。。。）
[code]<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”Author” content=”” />
<meta name=”Keywords” content=”” />
<meta name=”Description” content=”” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no,minimal-ui” />
<title>Easing</title>
<style>
show{position:relative;height:40px;width:500px;margin:50px 50px 0;border:1px solid #CCC;}
#show>span{position:absolute;width:40px;height:100%;background-color:blue;}
form{margin-left:50px;}</style>
</head>
<body>
<div id=”show”><span></span></div>
<canvas></canvas>
<form>
<label><input type=”radio” name=”type” value=”linear” checked=”checked” />linear</label>
<label><input type=”radio” name=”type” value=”easeIn” />easeIn</label>
<label><input type=”radio” name=”type” value=”easeOut” />easeOut</label>
<label><input type=”radio” name=”type” value=”easeInOut” />easeInOut</label>
<input type=”button” value=” run ” />
</form>
<script>
var Easing={
linear:function(t,b,c){
return b+ct;
},
easeIn:function(t,b,c){
return b+ctt;
},
easeOut:function(t,b,c){
return b+c(2t-tt);
},
easeInOut:function(t,b,c){
return b+c/2(1-Math.cos(Math.PIt));
}
};
var W=600,H=400,
cvs=document.querySelector("canvas"),g=cvs.getContext("2d"),
inps=document.querySelectorAll("input");
cvs.width=W;
cvs.height=H;
function init(g){
g.strokeStyle="#CCC";
g.font="16px Arial";
g.rect(49.5,49.5,W-100,H-100);
g.fillText("0",50,H-50+14);
g.fillText("t",W/2,H-50+14);
g.fillText("1",W-50,H-50+14);
g.fillText("b",30,H-50);
g.fillText("c",30,50);
g.stroke();
}
function draw(g,t,c){
g.lineTo(50+t*(W-100),H-50-c/460*(H-100));
}
init(g);
inps[4].addEventListener("click",function(){
var span=document.querySelector("#show>span"),
t=0,
b=0,
c=span.parentNode.clientWidth-b-span.offsetWidth,
type;
for(var i=0,l=inps.length-1;i<l;i++)
{
if(inps[i].checked)
{
type=inps[i].value;
break;
}
}
g.clearRect(50,50,W-101,H-101);
g.beginPath();
g.moveTo(50,H-50);
(function(){
t+=0.02;
g.strokeStyle="blue";
draw(g,t,Easing[type](t,b,c));
g.stroke();
if(t<1)
{
span.style.left=Easing[type](t,b,c)+"px";
setTimeout(arguments.callee,16.7);
}
else
{
span.style.left=Easing[type](1,b,c)+"px";
}
})();
},false);</script>
</body>
</html>
[/code]
代码片段 1
近期评论