一个简单的js动画效果代码


Posted in Javascript onJuly 20, 2010

实现的功能:移动,暂停,恢复,停止.

未实现的功能:无法实现单位换算,不能实现颜色渐变(还有很多,有待完善...)

代码中的使用方法如下:

var $m = $M("divAnimate"); _("btnAnimate").onclick = function(){ 
this.disabled = true; 
var that = this; 
$m.animate({left:"300px",top:"100px",width:"300px", height:"200px",opacity:0.3},{duration:5000,easing:Tween.Back.easeInOut}).delay(200) 
.animate({left:"50px",top:"300px",width:"150px",height:"100px",opacity:0.8},{duration:2000,easing:Tween.Elastic.easeInOut, 
callback:function(){ 
that.disabled = false; 
} 
}); 
} 
_("btnPause").onclick = function(){ 
$m.pause(); 
this.disabled = true; 
_("btnResume").disabled = false; 
} 
_("btnResume").disabled = true; 
_("btnResume").onclick = function(){ 
$m.resume(); 
this.disabled = true; 
_("btnPause").disabled = false; 
} 
_("btnStop").onclick = function(){ 
$m.stop(); 
_("btnAnimate").disabled = false; 
}

功能实现:

/* 简单动画方法 
* 未实现单位换算 
*/ 
var $M = function(obj){ 
var elem = ("string" === typeof obj )?document.getElementById(obj):obj; 
var _this = {},props = {},timeId,isBusy = false,isPause = false; 
var queue = [],_current; 
//直线运动算法 
function Linear(t,b,c,d){ return c*t/d + b;} 
function setCss(className,value){ 
if(className == "opacity"){ 
if(document.defaultView){ 
elem.style["opacity"] = value; 
} else { 
elem.style["filter"] = 'alpha(opacity=' + 100 * value + ')'; 
} 
} else { 
elem.style[className] = value; 
} 
} 
function getCss(className){ 
if(className == "opacity"){ 
var ret = ""; 
if(document.defaultView){ 
ret = document.defaultView.getComputedStyle(elem,null)['opacity'] || 1; 
} else { 
ret = elem.currentStyle['filter']?(elem.currentStyle['filter'].match(/^alpha\(opacity=([\d\.]+)\)$/))[1]/100 : 1; 
} 
return ret.toString(); 
} else { 
return elem.style[className].toString(); 
} 
} function _move(params,easing,st,ht,callback){ 
var t = ((new Date()).getTime() - st); 
_current.t = t; 
if(isPause){return;} 
easing = easing||Linear; 
ht = ht || 500; 
for(var p in params){ 
if(!props[p]){ 
var iv = parseFloat(getCss(p)) || 0; 
var ev = parseFloat(params[p]); 
props[p] = { 
iv:iv, 
iu:iv?getCss(p).substring(iv.toString().length):null, 
ev:ev, 
eu:params[p].toString().substring(ev.toString().length) 
} 
//TODO(初始值的单位和目标值的单位不相同需要处理) 
} 
if(t >= ht){t = ht;} 
var nv = easing(t,props[p].iv,(props[p].ev - props[p].iv),ht); 
nv = parseFloat(nv); 
setCss(p,nv + props[p].eu); 
} 
if(t < ht){ 
timeId = setTimeout(function(){ 
_move(params,easing,st,ht,callback); 
},13); 
} else { 
props = {}; 
isBusy = false; 
if(callback){ 
callback(); 
} 
run(); 
} 
} 
function run(){ 
if(!isBusy && queue.length != 0){ 
var o = queue.shift(); 
var _delay = 0; 
while(o && o.delay){ 
_delay += o.delay; 
o = queue.shift(); 
} 
if(o){ 
_current = o; 
isBusy = true; 
setTimeout(function(){ 
var st = (new Date()).getTime(); 
_move(o.params,o.options.easing,st,o.options.duration,o.options.callback); 
},_delay); 
} 
} 
} 
var _this = { 
animate:function(params,options){ 
queue.push({params:params,options:options}); 
isPause = false; 
run(); 
return _this; 
}, 
delay:function(ms){ 
queue.push({delay:ms}); 
return _this; 
}, 
pause:function(){ 
isPause = true; 
return _this; 
}, 
resume:function(){ 
if(_current){ 
var o = _current; 
isPause = false; 
var st = (new Date()).getTime() - _current.t; 
_move(o.params,o.options.easing,st,o.options.duration,o.options.callback); 
return _this; 
} 
}, 
stop:function(){ 
isPause = true; 
isBusy = false; 
queue = []; 
props = {}; 
return _this; 
} 
}; 
return _this; 
}

参考地址:
https://3water.com/article/24309.htm
Javascript 相关文章推荐
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
dess中一个简单的多路委托的实现
Jul 20 #Javascript
js 返回时间戳所对应的具体时间
Jul 20 #Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 #Javascript
轻量级 JS ToolTip提示效果
Jul 20 #Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 #Javascript
根据出生日期自动取得星座的js代码
Jul 20 #Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 #Javascript
You might like
php中并发读写文件冲突的解决方案
2013/10/25 PHP
Yii学习总结之安装配置
2015/02/22 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
Python高效编程技巧
2013/01/07 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python导入时小括号大作用
2017/01/10 Python
python实现windows下文件备份脚本
2018/05/27 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python如何删除列为空的行
2020/07/17 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
2014企业年终工作总结
2014/12/23 职场文书
清洁员岗位职责
2015/02/15 职场文书
校运会宣传稿大全
2015/07/23 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
python基于opencv批量生成验证码的示例
2021/04/28 Python
实例详解Python的进程,线程和协程
2022/03/13 Python