javascript - 原生js写的动画函数在数值计算上遇到的问题
大神看下代码：我是学习慕课网上js动画效果时自己尝试制作的。
然后发现几个问题：
非匀速动画
无法控制动画持续时间
动画会在未达到终止条件时产生其他动作(尤其是在动态改变透明度的时候....js在计算小数点的时候那狗一样的长度，小数位居然能够达到8，9位之多，我也是醉了)
若是能修改麻烦替我修改下·····蟹蟹
若是有大神能写个简洁的原生js可多属性联动的动画函数提供参考那就更好了（必须要能够控制动画运行时间，且必须严格按照给定的终止条件终止的那种....）
<!doctype html>
<html lang="en">
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<script>
/*--获取id--*/
function $id(id){
return document.getElementById(id);
}
/*----获取元素样式属性值--*/
function $gs(ele,attr){
if (ele.currentStyle)
{
return ele.currentStyle[attr];
}else if (ele.style[attr]!==''){
return ele.style[attr];
}else{
if (window.getComputedStyle(ele,null)[attr]!=='auto')
{
return window.getComputedStyle(ele,null)[attr];
}else{
return 0;
}
}
}
// 多属性动画
function animate(ele,time,json,fn){
window.clearInterval(ele.timer);
var fps=60/1000;
ele.timer=window.setInterval(function(){
for (var a in json)
{
var curVal=(a.search('opacity')!==-1) ? parseFloat($gs(ele,a)) :parseInt($gs(ele,a)); // $gs 是自定义的获取元素某样式值德函数
var unit=(a.search('opacity')!==-1) ? '' : 'px';
var speed=(json[a]-curVal)/(fps*time);
if (speed>=0){
if (curVal>=json[a]){
window.clearInterval(ele.timer);
ele.style[a]=json[a]+unit;
if (fn){
fn();
}
}else{
ele.style[a]=curVal+speed+unit;
}
}else{
if (curVal<=json[a]+0.05){
window.clearInterval(ele.timer);
ele.style[a]=json[a]+unit;
if (fn){
fn();
}
}else{
ele.style[a]=curVal+speed+unit;
}
}
}
},1/fps);
}
</script>
</head>
<body>
<style>
#animate{width:200px;height:200px;background-color:blue;}
</style>
<p id='animate'></p>
<button id='pos'>开始多属性联动动画</button>
<script>
$id('pos').onclick=function(){ // $id(id) 是自定义的快捷获取元素的函数
animate($id('animate'),1000,{width:500,opacity:0},function(){
animate($id('animate'),1000,{width:200,opacity:1});
});
}
</script>
</body>
</html>
