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 array_intersect()函数使用代码
Jan 14 PHP
php MYSQL 数据备份类
Jun 19 PHP
PHP 网络开发详解之远程文件包含漏洞
Apr 25 PHP
php中使用Akismet防止垃圾评论的代码
Jun 10 PHP
PHP读取文件内容后清空文件示例代码
Mar 18 PHP
CodeIgniter输出中文乱码的两种解决办法
Jun 12 PHP
php画图实例
Nov 05 PHP
PHP实现文件下载详解
Nov 27 PHP
php防止网站被攻击的应急代码
Oct 21 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
Feb 26 PHP
PHP实现打包下载文件的方法示例
Oct 07 PHP
PHP进阶学习之反射基本概念与用法分析
Jun 18 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中file_exists函数使用详解
2015/05/08 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
vue实现拖拽效果
2019/12/23 Javascript
详解 Python 与文件对象共事的实例
2017/09/11 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python 解析简单的XML数据
2020/07/24 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
盛大笔试题
2016/11/05 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
大学在校生求职信范文
2013/11/21 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
求职自我推荐信
2014/06/25 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
python之基数排序的实现
2021/07/26 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers