javascript动画对象支持加速、减速、缓入、缓出
2012-09-29 10:26
344 查看
调用接口:
/** * @param elem {HTMLElement} 执行动画的HTML元素 * @param params {JSON} 动画执行过过程中需要修改的HTML属性 * @param duration {Number} 可选,动画执行时间,单位毫秒 * @param easing {String} 可选,动画执行的方式,缓入easeIn、缓出easeOut * @param callback {Function} 可选,动画执行完成时的回调函数 * @return */ effect.animate(elem, params, duration, easing, callback);
使用它用不了20行代码就可以做一个产品图片减速淡出、加速淡入的切换效果点击这里查看演示效果
//辅助对象,读/写DOM元素属性 var attribute = { get: function(elem, attr){ var val; if(elem.currentStyle){ if(attr === "opacity") { val = elem.filters.alpha[attr]; }else { val = elem.currentStyle[attr]; } } else{ val = getComputedStyle(elem)[attr]; if(attr === "opacity") { val = 100 * val; } } return val; }, set: function(elem, attr, val){ if(attr=='opacity'){ elem.style.filter = 'alpha(opacity='+ (val) +')'; elem.style.opacity = (val)/100; } else{ elem.style[attr] = val + 'px'; } } }; /* * 描述: tween动画算法。 * @param Number t: 动画已经执行的时间(实际上时执行多少次/帧数) * @param Number b: 起始位置 * @param Number c: 终止位置 * @param Number d: 从起始位置到终止位置的经过时间(实际上时执行多少次/帧数) */ var tween = { //缓入 easeIn: function (t, b, c, d){ return c * (t/=d) * t + b; }, //缓出 easeOut: function (t,b,c,d){ return -c * (t/=d) * (t-2) + b; } }; //动画对象 var effect = { animate: function(elem, params, duration, easing, callback){ var dt = new Date().getTime(), b = 0, c = 0, d = duration || 500, fps = 1000/60; var changes = []; for(var attr in params){ b = parseFloat(attribute.get(elem, attr)); c = params[attr] - b; changes.push({ attr: attr, b: b, c: c }); } easing = easing || "easeOut"; callback = callback || new Function; setTimeout(function(){ var t = new Date().getTime() - dt; var b, c, attr; for(var i=0; i<changes.length; i++){ b = changes[i].b; c = changes[i].c; attr = changes[i].attr; attribute.set(elem, attr, tween[easing](t, b, c, d)); if(d <= t){ attribute.set(elem, attr, params[attr]); callback(); return; } } setTimeout(arguments.callee, fps); }, fps); } }; //by rentj1@163.com
相关文章推荐
- javascript动画对象支持加速、减速、缓入、缓出的实现代码
- cocos2d-x动画加速与减速
- IE10及其以下版本不支持Javascript Map对象(“Map”未定义)
- 让asp.net mvc的Action支持jQuery直接提交的javascript对象
- Android学习之 动画加速减速 匀速控制
- JavaScript中扩展字符串与Date对象之间的转换,支持大多数日期格式的字符串(包括中文)
- cocos2d-x动画加速与减速(转载)
- 定义一个交通工具(Vehicle)的类,在测试类Vehicle中的main()中实例化一个交通工具对象,通过方法给它初始化speed,size的值,并打印出来。另外,调用加速,减速的方法对速度进行改变
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
- javascript onclick时候 对象不支持此属性或方法
- javascript面向对象支持
- cocos2d-x动画加速与减速(转)
- cocos2d-x动画加速与减速
- javascript 对象属性property与元素属性attribute的浏览器支持
- JavaScript中扩展字符串与Date对象之间的转换,支持大多数日期格式的字符串(包括中文)
- javascript中出现 对象不支持“split”属性或方法
- 定义一个交通工具(Vehicle)的类,在测试类Vehicle中的main()中实例化一个交通工具对象,通过方法给它初始化speed,size的值,并打印出来。另外,调用加速,减速的方法对速度进行改变
- cocos2d-x动画加速与减速(转载)
- javascript错误:对象不支持此属性或方法