我要评论
做一个普通的动画效果,js是怎么完成的呢.看一下例子
用window.setinterval 动画函数 ,每隔10毫秒 都会去执行一次动画 ;
和 set配套的是 clearinterval 函数，用来结束动画。
每隔setinterval 都会返回一个类似于线程id的值 ;
var interval =setinterval(function(){
element.style.left =parsefloat(element.style.left) +(n) +'px';
},10);
用 clearinterval (interval) 既可结束动画播放.
interval = setinterval(function(){
if(parsefloat(element.style.left)>500) clearinterval(interval)
element.style.left =parsefloat(element.style.left) +2 +'px';
},10);
超过500px的时候，动画就会停止， element将不在移动。
但是上面的动画是比较生硬的，然后我们有另外一种时间线动画。
看例子:
var element = document.getelementbyid('test1');
var start = +new date,dur=1000,finish = start+dur;
interval = setinterval(function(){
var time = +new date,
pos = time > finish ? 1 : (time-start)/dur;
element.style.left = (100*pos)+"px";
if(time>finish) {
clearinterval(interval);
}
},10);
start 为目标动画的开始时间 ( +new date 其实就是 new date().gettime() )
dur 为 动画执行一共所需要的时间
finish 是目标动画结束的时间
pos = time > finish ? 1 : (time-start)/dur; //可以把pos 想象成频率 ，一个时间比
(100*pos) ，100代表距离,，如果距离为500px 就设置为 500*pos;
time>finish : 如果超过时间，就停止动画!
很好，到这里我们已经知道一个简单动画效果是怎么样写的了.
再来看一个小型的完整的动画组件是如何写的 :
s 函数是用来截取字符串，并将最后结果返回
color 函数 将颜色值，最后统一返回 "rgb(x,x,x)" 的形式
normalize 函数 返回一个json对象,对象里包含了该元素要执行的css属性名和值
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
把一行代码拆开，看看到底如何作用
while(i--){
//这里用了一个 =号， 先进行赋值运算，如果不存在之 if将不通过， 一举两得 : )
if(v = css[props[i]]){
rules[props[i]] = parse(v); //赋给新的对象,
}
}
interpolate函数中 return (source+(target-source)*pos).tofixed(3);
tofixed 是为了解决小数问题，如 0.000000001; 会变成 1e-9; 不是我们想要的结果，通过tofixed 可以解决， tofixed (n)， 其中n代表保留小数点后几位
el.currentstyle ? el.currentstyle : getcomputedstyle(el, null);
这个其实兼容多浏览器,获取元素的一句代码 具体参考 : js 获取最终样式 【getstyle】
flower的 4个参数 el 目标对象,style 是最终样式,opts,是参数选项包括 (dur时间,easing缓懂函数,after结束后运行的callbak) ,第4个after是最后执行的callbak;
opts.easing 可以利用各种缓动算法，来改变元素的运动状态;
如
这样其实就是让内部函数自由，并且只通过这个调用去暴露一个接口。不然外面的函数，访问不到匿名函授中的flower;
看一下调用的例子 : )
参考 : http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html
- 站内搜索
发表评论