javascript 小型动画组件与实现代码


Posted in PHP onJune 02, 2010

做一个普通的动画效果,js是怎么完成的呢.看一下例子

setInterval(function(){ 
element.style.left =parseFloat(element.style.left) +(n) +'px'; 
},10);


[Ctrl+A 全选 注:引入外部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将不在移动。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

但是上面的动画是比较生硬的,然后我们有另外一种时间线动画。
看例子:
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 : 如果超过时间,就停止动画!

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

很好,到这里我们已经知道一个简单动画效果是怎么样写的了.
再来看一个小型的完整的动画组件是如何写的 :
(function($,name){ 
var parseEl = document.createElement('div') 
, 
props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+ 
'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize '+ 
'fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight '+ 
'maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft '+ 
'paddingRight paddingTop right textIndent top width wordSpacing zIndex').split(' ') 
, 
normalize =function (style){ 
var css, 
rules = {}, 
i = props.length, 
v; 
parseEl.innerHTML = '<div style="'+style+'"></div>'; 
css = parseEl.childNodes[0].style; 
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v); 
return rules; 
}, 
color = function(source,target,pos){ 
var i = 2, j, c, tmp, v = [], r = []; 
while(j=3,c=arguments[i-1],i--) 
if(s(c,0)=='r') { c = c.match(/\d+/g); while(j--) v.push(~~c[j]); } else { 
if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c,3)+s(c,3); 
while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); } 
while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp<0?0:tmp>255?255:tmp); } 
return 'rgb('+r.join(',')+')'; 
}, 
parse = function(prop){ 
var p = parseFloat(prop), q = prop.replace(/^[\-\d\.]+/,''); 
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; 
}, 
s = function(str, p, c){ 
return str.substr(p,c||1);//color 用 
}, 
interpolate =function(source,target,pos){ 
return (source+(target-source)*pos).toFixed(3); 
}, 
flower = function(el, style,opts,after){ 
var el = document.getElementById(el), //通过id获取元素对象 
opts = opts || {}, 
target = normalize(style), 
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null), //ie和w3c兼容,获取样式 
prop, 
current = {}, 
start = +new Date, //开始时间 
dur = opts.duration||200, //执行事件,默认为200 
finish = start+dur, //结束时间 
interval, 
easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; }; 
for(prop in target) current[prop] = parse(comp[prop]); 
interval = setInterval(function(){ 
var time = +new Date, 
pos = time>finish ? 1 : (time-start)/dur; 
for(prop in target){ 
el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u; 
} 
if(time>finish) { 
clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1); 
} 
},10); 
}; 
$[name] = flower; 
})(window,"flower");

var parse = function(prop){ 
var p = parseFloat(prop), q = prop.replace(/^[\-\d\.]+/,''); 
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; 
} 
var p = parseFloat(prop) 意思是 : 500px => 500; 
q = prop.replace(/^[\-\d\.]+/,''); 500px => px; 
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; 意思是 如果取的是颜色值(因为带有#号),返回{ v: q, f: color, u: ''} u 代表代为,f是一个color函数(后面会讲到); 
var s = function(str, p, c){ return str.substr(p,c||1); }

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 可以利用各种缓动算法,来改变元素的运动状态;

function bounce(pos) { 
if (pos < (1/2.75)) { 
return (7.5625*pos*pos); 
} else if (pos < (2/2.75)) { 
return (7.5625*(pos-=(1.5/2.75))*pos + .75); 
} else if (pos < (2.5/2.75)) { 
return (7.5625*(pos-=(2.25/2.75))*pos + .9375); 
} else { 
return (7.5625*(pos-=(2.625/2.75))*pos + .984375); 
} 
} 
(function($,name){ 
window.flower = flower; 
})(window,'flower');

这样其实就是让内部函数自由,并且只通过这个调用去暴露一个接口。不然外面的函数,访问不到匿名函授中的flower;
看一下调用的例子 : )
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div> 
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div> 
<script> 
(function($,name){ 
var parseEl = document.createElement('div') 
, 
props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+ 
'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize '+ 
'fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight '+ 
'maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft '+ 
'paddingRight paddingTop right textIndent top width wordSpacing zIndex').split(' ') 
, 
normalize =function (style){ 
var css, 
rules = {}, 
i = props.length, 
v; 
parseEl.innerHTML = '<div style="'+style+'"></div>'; 
css = parseEl.childNodes[0].style; 
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v); 
return rules; 
}, 
color = function(source,target,pos){ 
var i = 2, j, c, tmp, v = [], r = []; 
while(j=3,c=arguments[i-1],i--) 
if(s(c,0)=='r') { c = c.match(/\d+/g); while(j--) v.push(~~c[j]); } else { 
if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c,3)+s(c,3); 
while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); } 
while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp<0?0:tmp>255?255:tmp); } 
return 'rgb('+r.join(',')+')'; 
}, 
parse = function(prop){ 
var p = parseFloat(prop), q = prop.replace(/^[\-\d\.]+/,''); 
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; 
}, 
s = function(str, p, c){ 
return str.substr(p,c||1); 
}, 
interpolate =function(source,target,pos){ 
return (source+(target-source)*pos).toFixed(3); 
}, 
flower = function(el, style,opts,after){ 
var el = document.getElementById(el), 
opts = opts || {}, 
target = normalize(style), 
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null), 
prop, 
current = {}, 
start = +new Date, 
dur = opts.duration||200, 
finish = start+dur, 
interval, 
easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; }; 
for(prop in target) current[prop] = parse(comp[prop]); 
interval = setInterval(function(){ 
var time = +new Date, 
pos = time>finish ? 1 : (time-start)/dur; 
for(prop in target){ 
el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u; 
} 
if(time>finish) { 
clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1); 
} 
},10); 
}; 
$[name] = flower; 
})(window,"flower"); 
(function(){ 
var bounce = function(pos) { 
if (pos < (1/2.75)) { 
return (7.5625*pos*pos); 
} else if (pos < (2/2.75)) { 
return (7.5625*(pos-=(1.5/2.75))*pos + .75); 
} else if (pos < (2.5/2.75)) { 
return (7.5625*(pos-=(2.25/2.75))*pos + .9375); 
} else { 
return (7.5625*(pos-=(2.625/2.75))*pos + .984375); 
} 
} 
flower('test2', 'left:300px;padding:10px;border:50px solid #ff0000', { 
duration: 1500, 
after: function(){ 
flower('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', { 
duration: 1234, easing: bounce 
}); 
} 
}); 
})(); 
</script>

参考 : http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html
PHP 相关文章推荐
php抓即时股票信息
Oct 09 PHP
PHP初学者常见问题集合 修正版(21问答)
Mar 23 PHP
php中判断数组是一维,二维,还是多维的解决方法
May 04 PHP
优化PHP代码技巧的小结
Jun 02 PHP
分享8个最佳的代码片段在线测试网站
Jun 29 PHP
ThinkPHP关于session的操作方法汇总
Jul 18 PHP
php截取中文字符串函数实例
Feb 23 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
May 19 PHP
PHP集成环境XAMPP的安装与配置
Nov 13 PHP
PHP getName()函数讲解
Feb 03 PHP
php利用ZipArchive类操作文件的实例
Jan 21 PHP
PHP基本语法
Mar 31 PHP
php 验证码实例代码
Jun 01 #PHP
php trim 去除空字符的定义与语法介绍
May 31 #PHP
phpmyadmin 3.4 空密码登录的实现方法
May 29 #PHP
Discuz!下Memcache缓存实现方法
May 28 #PHP
备份mysql数据库的php代码(一个表一个文件)
May 28 #PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
May 27 #PHP
php set_time_limit(0) 设置程序执行时间的函数
May 26 #PHP
You might like
Zerg基本策略
2020/03/14 星际争霸
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
jQuery 使用手册(三)
2009/09/23 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python最基本的输入输出详解
2015/04/25 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
劳动之星获奖感言
2014/02/01 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
工伤赔偿协议书
2014/04/15 职场文书
反邪教警示教育方案
2014/05/13 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2015年科室工作总结
2015/04/10 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python