最近写了一个动画效果。
例子中我只写了一个效果,增加高度,有兴趣的朋友可以自己在添加其他的效果。
function Animation(obj){
this.ele = obj.ele;
this.maxheight = obj.maxheight||26;
this.minheight = obj.minheight||0;
this.delay = obj.delay || 0;
this.inter = null;
this.time = obj.time||200;
this.callback = obj.callback;
this.type = obj.type || "addh";
this.initialize.apply(this, arguments);
};
Animation.prototype={
constructor:Animation,
initialize:function(obj){
this.events = [];//动画状态数组
this.inittime = this.time;
},
start:function(){
this.events.push(this.type);
/*
判断主循环 是否在执行 在执行的话就 只保存需要执行的状态
这样就可以保证一个dom只有一个 主循环 从而保证不会出现死循环
*/
if(this.inter == null){
this.startAnimate();
}
},
startAnimate:function(){
this.time = this.inittime;
var t = this;
var type = t.events.pop();//获取最后一个动画
t.events = [];
//主循环
t.inter = setInterval(function(){
switch(type){
case "addh":
t.addh();
break;
case "delh":
t.delh();
break;
}
},50);
},
callBack:function(){
var len = this.events.length;
clearInterval(this.inter);
var t = this;
if(len == 0){
this.inter = null;
if(typeof this.callback == "function"){
setTimeout(function(){
t.callback();
},this.delay);
}
}
else{
setTimeout(function(){
t.startAnimate();
},this.delay);
}
},
addh:function(){
var h = this.ele.height();
var nh = Math.min(h+((this.time*this.time)/1000000)*10,this.maxheight);
if(nh >= this.maxheight){
this.callBack();
}
this.ele.height(nh);
this.time += 1000;
},
delh:function(){
var h = this.ele.height();
var nh = Math.max(h-((this.time*this.time)/1000000)*10, this.minheight);
if(nh <= this.minheight){
this.callBack();
}
this.ele.height(nh);
this.time += 1000;
}
};
上面是基本代码
具体例子
<div style="border:1px solid red;width:100px;" id="div1" >
<div style="border:1px solid green;width:50px;margin:auto;" id="div2" ></div>
</div>
<input type="button" value="同时动" id="btn1" />
<input type="button" value="分开动" id="btn2" />
<script type="text/javascript" >
$(function(){
var div1 = new Animation({
ele:$("#div1"),
maxheight:200,
minheight:0,
delay:0
});
var div2 = new Animation({
ele:$("#div2"),
maxheight:100,
minheight:0,
delay:5000
});
$("#btn1").click(function(){
div1.type="addh";
div1.start();
div2.type="addh";
div2.start();
});
$("#btn2").click(function(){
div1.type="addh";
div1.start();
div1.callback=function(){
div2.type="addh";
div2.start();
};
});
});
</script>
为了方便我在代码中 使用了jquery 。大家需要 引入jquery框架
分享到:
相关推荐
这本小册子通过制作 一个图像动画特效为主线向大家讲解JavaScript动画制作的基本技巧,分四步讲解本动画的实现:一是用Javascript制作动画-生成图象数组 、二是设置图象的位置、三是现在开始演示动画、四是用...
micron.js是一个可生成炫酷CSS3动画的js动画库的插件。通过micron.js插件,你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。简单实用,欢迎下载!本...
KUTE.js 是一个原生的 Javascript 动画引擎,具有优秀的性能和模块化的代码。 它提供了一大堆工具,以帮助你创建自定义动画。KUTE.js 为 Web 开发人员、设计师和动画师提供最基本的功能,提供易于使用的方法来设置高...
《HTML5+JavaScript动画基础》源代码
某课网----------------JS动画效果的所有课程源代码,包括图片素材,都可直接运行。(含注释)
HTML5+JavaScript动画基础 源码
一款简单的js动画插件
HTML-JAVASCRIPT动画基础;包含“动画基础”“渲染技术”“矩阵数学基础”“3D动画”“高级动画”“碰撞检测”“物理运动学”等网页上动态动画以及高级动画的知识
Javascript 动画引擎,炫酷的很。.zip,javascript动画引擎
javascript动画效果打开层 关闭层,由http://www.che2.com/提供
js动画 一针一针显示
HTML5_JavaScript动画基础(高清带目录),值得下载!!!
本书中,作者首先清晰地介绍了所有相关的数学知识,然后引入了加速、速度向量、缓动、弹动、碰撞检测、动能守恒、3D、正向运动学和反向运动学等物理概念。
各种JS动画
js动画效果
JavaScript动画初探
HTML5+JavaScript动画基础(中文完整版)
JS实现的超级好看的树木动画,可以根据需要自己进行优化
Between是一个基于ES6代理的JavaScript动画库,类似于Cocoa Animation的API
move.js:基于CSS3的JavaScript动画框架