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安装为Apache DSO
Oct 09 PHP
php下过滤html代码的函数 提高程序安全性
Mar 02 PHP
用PHP实现递归循环每一个目录
Aug 08 PHP
让PHP以ROOT权限执行系统命令的方法
Feb 10 PHP
php设计模式  Command(命令模式)
Jun 17 PHP
php不用正则验证真假身份证
Nov 06 PHP
php操作memcache缓存方法分享
Jun 03 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
Dec 31 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
Dec 31 PHP
PHP简单实现无限级分类的方法
May 13 PHP
Laravel构建即时应用的一种实现方法详解
Aug 31 PHP
PHP查找一列有序数组是否包含某值的方法
Feb 07 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
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
Python中asyncore的用法实例
2014/09/29 Python
极简的Python入门指引
2015/04/01 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
python机器学习之贝叶斯分类
2018/03/26 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
css sprite简单实例
2016/05/23 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
高三自我鉴定怎么写
2013/10/19 职场文书
项目合作计划书
2014/01/09 职场文书
2014年外联部工作总结
2014/11/17 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL