JavaScript动画效果是如何实现的

让你的网页元素运动起来
服务器君一共花费了220.368 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

基本显示、隐藏:

function hide(el)
{
  el.style.display = "none";
}
function show()
{
  el.style.display = "block";
}

位置变化:同 setTimeout 或者 setInterval 动态改变元素的位置。

实现方法一:

/*
	opt = {X:500,Y:400,duration:2000}
*/
function aini(el,opt)
{
	var duration = opt.duration||1000;
    var totalSteps =Math.floor(duration/16);
    var w=fullWidth(el),h=fullHeight(el);
    var X = pageX(el),Y=pageY(el);//通过辅助函数获取在屏幕中的坐标
    var stepX = Math.floor((opt.X -X)/totalSteps);
    var stepY = Math.floor((opt.Y -Y)/totalSteps);
    el.style.position="absolute";//运动的元素绝对定位
    el.style.left=X+"px";
    el.style.top=Y+"px";
	// 动画的核心,就是动态的改变元素的位置
    function _aini()
    {
		var px = posX(el),py=posY(el);
        if(px < opt.X && py < opt.Y)
        {
     		setX(el,px+stepX),setY(el,py+stepY);
          	setTimeout(arguments.callee,16);
        }
    }
	_aini();
};?

1的缺点是不够连贯,我猜想的原因是每次修改位置时,都要调用setX,setY函数,而setX setY 函数内部有调用parseInt 函数,比较费时间。因此有了实现2,实现2也是其它的动画算法组建的实现方式。

function aini(el,opt)
{
	el.style.position="absolute";
    var duration = opt.duration||1000;
    var t = 0,d=Math.floor(duration/16);
    var X = pageX(el),Y=pageY(el);
    var dx = opt.X-X,dy = opt.Y-Y;
    
    function _aini()
    {
 		if(t<d)
        {
        	el.style.left=tween.Linear(t,X,dx,d)+"px";//先只在X方向运动
        	//el.style.top=tween.Linear(t,0,dy,d)+X+"px";
        	//el.style.top=PY+"px";
        	t++;
        	setTimeout(arguments.callee,16);
      	}
        else
        {
        	el.style.left=opt.X+"px";
        	//el.style.top=opt.Y+"px";
      	}
	};
    _aini();
}

程序演示

把运动路径放在一个独立函数中进行运算 tween.Linear。

var tween = {
    /*
      t=0~d , b=初始值 ,c = 位移长度 , d = 末位置-初位置 
    */
    Linear: function(t,b,c,d){ return c*t/d + b; },
};

这样独立出来的的好处是可以添加其它动画效果,上面的运动是匀速线性运动,下面来一个缓动的。

var tween = {
    /*
      t=0~d , b=初始值 ,c = 位移长度 = 末位置-初位置, d =间隔时间
      变化的强度(一次变化的长度)由 c/d 确定 ,d 小 那么变化的快 ,d 大变化的慢。而 16*d = duration 
    */
    Linear: function(t,b,c,d){ return c*t/d + b; },
    Quad: {
      	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;
	},
	easeInOut: function(t,b,c,d){
		if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
		}
	},
};

按照上面添加动画效果的方式,可以添加很多动画效果了,完整的请看graceCode motion 动画库Motion库动画只能实现位置的变化,有更强的jQuery 实现动画是基于属性的,像下面这样,太强了jquery 的方式——支持属性动画。

$('div').animate({
    width:"60%",
    height:"20%",
    fontSize:"3em",
    border:'2px solid black'
});

Raphael 的方式——支持少量的属性动画:

var paper = Raphael(10,50,320,200);
var rect = paper.rect(10,10,50,50).attr({fill:"red"});
rect.animate({fill:"blue",x:100,y:100},2000);

本文地址:http://www.nowamagic.net/librarys/veda/detail/490,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/490

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《Head First设计模式(中文版)》 弗里曼 (作者), 等 (作者)

《Head First设计模式》(中文版)共有14章,每章都介绍了几个设计模式,完整地涵盖了四人组版本全部23个设计模式。前言先介绍这本书的用法;第1章到第11章陆续介绍的设计模式为Strategy、Observer、Decorator、Abstract Factory、Factory Method、Singleton,Command、Adapter、Facade、TemplateMethod、Iterator、Composite、State、Proxy。最后三章比较特别。第12章介绍如何将两个以上的设计模式结合起来成为新的设计模式(例如著名的MVC模式),作者称其为复合设计模式(这是作者自创的名称,并非四人组的标准名词)。

更多计算机宝库...