[置顶] js jq队列动画分析
2016-05-20 16:19
676 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#box{
opacity:1;
position: relative;
top:100px;
left: 300px;
width:300px;
height:300px;
border:1px #ccc solid;
}
#book{
opacity:1;
position:absolute;
top:100px;
left: 100px;
width:100px;
height:100px;
background: red;
}
</style>
<!--<script src="../jquery-2.2.3.js"></script>-->
<body>
<button id="one">jQuery动画的模拟实现:放大</button>
<button id="two">jQuery动画的模拟实现:缩小</button>
<div id="box">
<div id="book" ></div>
</div>
<script >
var book = document.getElementById('book');
var one = document.getElementById('one');
var two = document.getElementById('two');
/*var $book = $('#book');
var i = 10
while(i){
$book.append("<li>11</li>")
i--;
}*/
////////////
//创建动画缓动对象 //
////////////
function Tween(value, prop, animation) {
this.elem = animation.elem;
this.prop = prop;
this.easing = "swing"; //动画缓动算法
this.options = animation.options;
//获取初始值
this.start = this.now = this.get();
//动画最终值
this.end = value;
//单位
this.unit = "px"
}
function getStyles(elem) {
return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
};
function swing(p) {
return 0.5 - Math.cos(p * Math.PI) / 2;
}
Tween.prototype = {
//获取元素的当前属性
get: function() {
var computed = getStyles(this.elem);
var ret = computed.getPropertyValue(this.prop) || computed[this.prop];
return parseFloat(ret);
},
//运行动画
run:function(percent){
var eased
//根据缓动算法改变percent
this.pos = eased = swing(percent);
//获取具体的改变坐标值
this.now = (this.end - this.start) * eased + this.start;
//最终改变坐标
this.elem.style[this.prop] = this.now + "px";
return this;
}
}
////////
//动画类 //
////////
function Animation(elem, properties, options){
//动画对象
var animation = {
elem : elem,
props : properties,
originalOptions : options,
options : options,
startTime : Animation.fxNow || createFxNow(),//动画开始时间
tweens : [] //存放每个属性的缓动对象，用于动画
}
//生成属性对应的动画算法对象
for (var k in properties) {
// tweens保存每一个属性对应的缓动控制对象
animation.tweens.push( new Tween(properties[k], k, animation) )
}
//动画状态
var stopped;
//动画的定时器调用包装器
var tick = function() {
if (stopped) {
return false;
}
//动画时间算法
var currentTime = Animation.fxNow || createFxNow
//运动时间递减
remaining = Math.max(0, animation.startTime + animation.options.duration - currentTime),
temp = remaining / animation.options.duration || 0,
percent = 1 - temp;
var index = 0,
length = animation.tweens.length;
//执行动画改变
for (; index <
4000
; length; index++) {
//percent改变值
animation.tweens[index].run(percent);
}
//是否继续，还是停止
if (percent <= 1 && length) {
return remaining;
} else {
//停止
return false;
}
}
tick.elem = elem;
tick.anim = animation;
Animation.fx.timer(tick);
}
//创建开始时间
function createFxNow() {
setTimeout(function() {
Animation.fxNow = undefined;
});
return (Animation.fxNow = Date.now());
}
//用于定时器调用
Animation.timers =[]
Animation.fx = {
//开始动画队列
timer: function(timer) {
Animation.timers.push(timer);
if (timer()) {
//开始执行动画
Animation.fx.start();
} else {
Animation.timers.pop();
}
},
//开始循环
start: function() {
if (!Animation.timerId) {
Animation.timerId = setInterval(Animation.fx.tick, 13);
}
},
//停止循环
stop:function(){
clearInterval(Animation.timerId);
Animation.timerId = null;
},
//循环的的检测
tick: function() {
var timer,
i = 0,
timers = Animation.timers;
Animation.fxNow = Date.now();
for (; i < timers.length; i++) {
timer = timers[i];
if (!timer() && timers[i] === timer) {
//如果完成了就删除这个动画
timers.splice(i--, 1);
}
}
if (!timers.length) {
Animation.fx.stop();
}
Animation.fxNow = undefined;
}
}
one.onclick=function(){
Animation(book, {
width: '300',
height:'300',
marginLeft:'-100',
marginTop:'-100'
}, {
duration: 1000
})
}
two.onclick=function() {
Animation(book, {
width: '100',
height:'100',
marginLeft:'0',
marginTop:'0'
}, {
duration: 1000
})
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#box{
opacity:1;
position: relative;
top:100px;
left: 300px;
width:300px;
height:300px;
border:1px #ccc solid;
}
#book{
opacity:1;
position:absolute;
top:100px;
left: 100px;
width:100px;
height:100px;
background: red;
}
</style>
<!--<script src="../jquery-2.2.3.js"></script>-->
<body>
<button id="one">jQuery动画的模拟实现:放大</button>
<button id="two">jQuery动画的模拟实现:缩小</button>
<div id="box">
<div id="book" ></div>
</div>
<script >
var book = document.getElementById('book');
var one = document.getElementById('one');
var two = document.getElementById('two');
/*var $book = $('#book');
var i = 10
while(i){
$book.append("<li>11</li>")
i--;
}*/
////////////
//创建动画缓动对象 //
////////////
function Tween(value, prop, animation) {
this.elem = animation.elem;
this.prop = prop;
this.easing = "swing"; //动画缓动算法
this.options = animation.options;
//获取初始值
this.start = this.now = this.get();
//动画最终值
this.end = value;
//单位
this.unit = "px"
}
function getStyles(elem) {
return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
};
function swing(p) {
return 0.5 - Math.cos(p * Math.PI) / 2;
}
Tween.prototype = {
//获取元素的当前属性
get: function() {
var computed = getStyles(this.elem);
var ret = computed.getPropertyValue(this.prop) || computed[this.prop];
return parseFloat(ret);
},
//运行动画
run:function(percent){
var eased
//根据缓动算法改变percent
this.pos = eased = swing(percent);
//获取具体的改变坐标值
this.now = (this.end - this.start) * eased + this.start;
//最终改变坐标
this.elem.style[this.prop] = this.now + "px";
return this;
}
}
////////
//动画类 //
////////
function Animation(elem, properties, options){
//动画对象
var animation = {
elem : elem,
props : properties,
originalOptions : options,
options : options,
startTime : Animation.fxNow || createFxNow(),//动画开始时间
tweens : [] //存放每个属性的缓动对象，用于动画
}
//生成属性对应的动画算法对象
for (var k in properties) {
// tweens保存每一个属性对应的缓动控制对象
animation.tweens.push( new Tween(properties[k], k, animation) )
}
//动画状态
var stopped;
//动画的定时器调用包装器
var tick = function() {
if (stopped) {
return false;
}
//动画时间算法
var currentTime = Animation.fxNow || createFxNow
//运动时间递减
remaining = Math.max(0, animation.startTime + animation.options.duration - currentTime),
temp = remaining / animation.options.duration || 0,
percent = 1 - temp;
var index = 0,
length = animation.tweens.length;
//执行动画改变
for (; index <
4000
; length; index++) {
//percent改变值
animation.tweens[index].run(percent);
}
//是否继续，还是停止
if (percent <= 1 && length) {
return remaining;
} else {
//停止
return false;
}
}
tick.elem = elem;
tick.anim = animation;
Animation.fx.timer(tick);
}
//创建开始时间
function createFxNow() {
setTimeout(function() {
Animation.fxNow = undefined;
});
return (Animation.fxNow = Date.now());
}
//用于定时器调用
Animation.timers =[]
Animation.fx = {
//开始动画队列
timer: function(timer) {
Animation.timers.push(timer);
if (timer()) {
//开始执行动画
Animation.fx.start();
} else {
Animation.timers.pop();
}
},
//开始循环
start: function() {
if (!Animation.timerId) {
Animation.timerId = setInterval(Animation.fx.tick, 13);
}
},
//停止循环
stop:function(){
clearInterval(Animation.timerId);
Animation.timerId = null;
},
//循环的的检测
tick: function() {
var timer,
i = 0,
timers = Animation.timers;
Animation.fxNow = Date.now();
for (; i < timers.length; i++) {
timer = timers[i];
if (!timer() && timers[i] === timer) {
//如果完成了就删除这个动画
timers.splice(i--, 1);
}
}
if (!timers.length) {
Animation.fx.stop();
}
Animation.fxNow = undefined;
}
}
one.onclick=function(){
Animation(book, {
width: '300',
height:'300',
marginLeft:'-100',
marginTop:'-100'
}, {
duration: 1000
})
}
two.onclick=function() {
Animation(book, {
width: '100',
height:'100',
marginLeft:'0',
marginTop:'0'
}, {
duration: 1000
})
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- OC与JS交互-二
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- javascript dom 获取样式属性值
- OC与JS交互
- Volley框架搭建--小白级别的，外加Json解析
- JSTL标签
- js访问url变，IE显示不变
- js cookie存储方法