css 动画和 jquery 动画都得先给动画设定持续时间。 工作原理应该都是根据当前时间/总时间 的比值来确定当前位置。
有没有反过来的,根据当前位置/总位置的比值来确定速度的?
比如说:给定一个初始速度,每秒增加100px。随着元素移动,这个增量逐渐减小。
有没有现成的javascript 库是像这样实现ease,linear... 这些速度函数的?
有没有反过来的,根据当前位置/总位置的比值来确定速度的?
比如说:给定一个初始速度,每秒增加100px。随着元素移动,这个增量逐渐减小。
有没有现成的javascript 库是像这样实现ease,linear... 这些速度函数的?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
width:10px;
height:10px;
position:absolute;
top:100px;
background-color:#F00;
}
</style>
<script type="text/javascript">
function init(){
var div=document.getElementsByTagName("div")[0];
var during=0;
div.style.left="0px";
change(div,during);
}
function change(div,during){
during+=1;
div.style.left=parseInt(div.style.left)+during+"px";
window.setTimeout(function(){change(div,during)},100);
}
window.onload=init;
</script>
</head><body>
<div></div>
</body>
</html>
类似这样试试
矢量变化不外乎这样了