jq时间戳动画

<!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: 0px;
width:300px;
height:300px;
border:1px #ccc solid;

}
#book{
opacity:1;
position:absolute;
top:100px;
left: 100px;
width:100px;
height:100px;
background: red;
}

#book1{
opacity:1;
position:absolute;
top:220px;
left: 0px;
width:100px;
height:100px;
background: red;
}
.line{

position:absolute;
top:0px;
left: 200px;
width:1px;
height:500px;
background:#000;

}
</style>

<body>
<button id="one">jQuery动画的模拟实现:放大</button>
<button id="two">jQuery动画的模拟实现:缩小</button>
<div id="box">
<div id="book" ></div>
</div>


<script >
/*在ie中 consloe.log 如果不在控制台的时候会报错，调试的时候按f12 控制台即可*/

var book = document.getElementById('book');
var book1 = document.getElementById('book1');
var one = document.getElementById('one');
var two = document.getElementById('two');

/*var $book = $('#book');
var i = 10
while(i){
$book.append("<li>11</li>")
i--;
}*/

////////////
//创建动画缓动对象 //
////////////
//生成属性对应的动画算法对象
// tweens保存每一个属性对应的缓动控制对象
//properties[k] 值
// k 是建
//animation 动画对象
// 参数为：animation.tweens.push( new Tween(properties[k], k, animation) )
//Tween 构造函数
// this.elem 就是用户传进来的dom节点
//this.prop = prop; 对象的属性
//this.easing = "swing"; //动画缓动算法
//this.end动画最终值
//单位 this.unit = "px"
//Tween 函数是初始化构造函数

function Tween(value, prop, animation) {
//初始化
this.elem = animation.elem;
this.prop = prop;
this.easing = "swing"; //动画缓动算法
this.options = animation.options;
//获取初始值，就是获取动画样式的值， this.get();
this.start = this.now = this.get();
//动画最终值，就是用户输入的值
this.end = value;
//单位
this.unit = "px"
}
//获取动画样式
function getStyles(elem, attr) {
//return elem.ownerDocument.defaultView.getComputedStyle(elem, null);

if(elem.currentStyle) {
// ie //这样兼容性强
//console.log('attr='+attr+'||elem.currentStyle[attr]='+elem.currentStyle[attr])
if(elem.currentStyle[attr]=='auto'){
elem.style[attr] = '0px';
}
return elem.currentStyle[attr];
} else {
//ff w3c.

return getComputedStyle(elem,false)[attr];
}
};

//动画算法
function swing(p) {
//p 是动画时间比 0 ~ 1
//Math.cos(x) x 的余弦值。返回的是 1.0 到 -1.0 之间的数；
//(p * Math.PI) 是 0到3.14
//(p * Math.PI)/2 是0到1.57
//所以 Math.cos(p * Math.PI) / 2 值： 0.5 ~ -05
//tmpe 值越大跑的越快
var tmpe = 0.5 - Math.cos(p * Math.PI) / 2;
// tmpe = Math.sin(p*Math.PI/2)
// console.log('p * Math.PI='+Math.sin(p * Math.PI))
//console.log('Math.sin(p * Math.PI)='+ Math.sin(p*Math.PI/2));
// console.log('Math.cos(p * Math.PI) / 2='+ Math.cos(p * Math.PI) / 2)
// console.log('tmpe='+tmpe)
return tmpe
}

Tween.prototype = {
//获取元素的当前属性
get: function() {
var computed = getStyles(this.elem, this.prop);
//var ret = computed.getPropertyValue(this.prop) || computed[this.prop];
//var ret = computed[this.prop];
//获取样式的值
//return parseFloat(ret);
return parseFloat(computed);
},
//运行动画
run:function(percent){
//percent 动画时间比 0-1
var eased;
//根据缓动算法改变percent
this.pos = eased = swing(percent);
//获取具体的改变坐标值 this.now缓冲值

//this.now （等于结束动画位置 - 开始动画的位置）* 时间戳比例，时间戳比例是从0 ~ 1 this.start 是起始的位置
this.now = (this.end - this.start) * eased + this.start;
//console.log('this.now='+this.now)

//console.log('this.prop='+this.prop+'||this.start='+this.start)
//最终改变坐标
//console.log('this.prop='+this.prop+'||this.now='+this.now)

this.elem.style[this.prop] = this.now + "px";
return this;
}
}

////////
//动画类 //
////////
//动画对象 elem
//properties 动画属性
//options 动画时间
function Animation(elem, properties, options){
//检查动画是否在执行
if (Animation.timerId !=undefined && Animation.timerId) {
return false;
}
//动画对象
//animation.elem 动画对象
//animation.props 动画属性
//options.options 动画时间
//Animation.fxNow || createFxNow() 开始动画的时间
//tweens : [] //存放每个属性的缓动对象，用于动画
var animation = {
elem : elem,
props : properties,
originalOptions : options,
options : options,
startTime : null,//动画开始时间
tweens : [] //存放每个属性的缓动对象，用于动画
}

//生成属性对应的动画算法对象
// tweens保存每一个属性对应的缓动控制对象
//properties[k] 值
// k 是建
//animation 动画对象
for (var k in properties) {

// tweens保存每一个属性对应的缓动控制对象
animation.tweens.push( new Tween(properties[k], k, animation) )
}

//动画状态
//var stopped;
//把 animation.startTime=Animation.fxNow || createFxNow(); 放在这里为了避免 for (var k in properties) for循环的时候如果属性多的时候会出现时间误差，虽然不是很大，但是如果属性很多的话就显得很明显
animation.startTime=Animation.fxNow || createFxNow();
//动画的定时器调用包装器动画循环函数 tick 每13毫秒执行一次
var tick = function() {
// console.log(1)
//如果 stopped 为真则停止函数
//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 < length; index++) {
//percent改变值
//animation.tweens[index] 动画的对象percent 动画时间比 0-1
// run 就是一个动画执行多少个动画属性
animation.tweens[index].run(percent);
}

//是否继续，还是停止动画 percent <= 1 表示动画已经到达位置了
if (percent <= 1 && length) {

return remaining;

} else {
//停止动画

return false;
}

}
tick.elem = elem;
tick.anim = animation;
//只是调用一次而已
//console.log(3333)
Animation.fx.timer(tick);
}

//创建获取时间戳函数
function createFxNow() {
setTimeout(function() {
//给 Animation.fxNow = undefined; 一个空的对象
Animation.fxNow = undefined;
});
//Date.now() 时间戳
return (Animation.fxNow = Date.now());
}

Animation.fx = {
//开始动画队列这个函数也是执行一次而已
timer: function(timer) {

//这里是把函数放到一个数组里面？有何用处
Animation.timer=timer;

if (timer()) { //timer() 只是调用一个而已,就是说有这个动画时候就执行函数返回一个false 或者是 remaining;
//开始执行动画走这里
Animation.fx.start();
}
},
//开始循环这个函数也是执行一次而已
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;
//每次更新时间戳
Animation.fxNow = Date.now();
//console.log(1)
//如果所有的动画都执行完了就停止这个定时器
if (!Animation.timer()) {
//console.log('Animation.timer()')
//console.log(!Animation.timer())
Animation.fx.stop();
}
//问题出在这里，因为当执行完只有 Animation.fxNow 时间戳变量值还在，所以就产生了bug
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>

jq时间戳动画的更多相关文章

今天讲的是JQ 的动画效果
老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
Jq自定义动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jq处理动画累加
问题:日程提醒(跟日历一样的切换效果),只用一个div来展示当天日程数据,每次清空div里的数据再加载数据,导致切换日期时,数据展示div有闪动,于是采用动画来进行过渡,这样就巧妙地避免了闪动: $( ...
jq时间戳转化为可视化时间
//2016年5月21日 23:12:07 function getDateTimeToDate(dt){ var dateTime = new Date(dt); var date = dateTi ...
jq常用动画fade slide
https://www.cnblogs.com/sandraryan/ hide(); <div class="box">big box</div> $(' ...
jq动画设置图片抽奖(修改效果版)
效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...
jq动画和停止动画
使用jq 实现动画循环效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
CSS3动画（个人理解）
随着学习的深入,越来越觉得Css3动画的重要,虽然JQ自定义动画和动画回调函数必须掌握,但是css3动画做起来更加绚丽,更加方便!1.常规使用1.1 使用transition属性,一般我们是配合hov ...
html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

随机推荐

jquery add() 和js add()
HTML DOM add() 方法 HTML DOM Select 对象定义和用法 add() 方法用于向 <select> 添加一个 <option> 元素. 语法 sel ...
PHP程序员的进阶之路
第1阶段:初级PHP程序员重点:把LNMP搞熟练(核心是安装配置基本操作)目标:能够完成基本的LNMP环境安装,简单配置维护:能够做基本的简单系统的PHP开发:能够在PHP中型系统中支持某个PHP功 ...
GVRP
一.GARP和GVRP GARP全称是通用属性注册协议(Generic Attribute Registration Protocol),它为处于同一个交换网内的交换成员之间提供了分发.传播.注册某种 ...
CentOS安装redis.tar.gz
1. # cd /usr/local/src 2. # tar -zxvf redis-3.0.6.tar.gz 3. # cd redis-3.0.6 4.# make 5.# make PREF ...
keras训练和保存
https://cloud.tencent.com/developer/article/1010815 8.更科学地模型训练与模型保存 filepath = 'model-ep{epoch:03d}- ...
Delphi获取本机的MAC地址
Delphi获取本机的MAC地址: uses NB30; function GetAdaPterInfo(lana: Char): string; var Adapter: TAdapterS ...
Linux下用node-inspector实现NodeJS远程调试开发
1.首先安装 node-inspector npm install -g node-inspector -g表示全局安装,如果像我一样安装失败,再试几次,npm偶尔就会这样抽风... 这一步是关键的, ...
windows gitbook pdf
1.安装 nodejs 下载地址:https://nodejs.org/download/release/v6.9.2/node-v6.9.2-x64.msi 执行安装配置环境变量:C:\Progr ...
配置Jsp错误页面
配置Jsp错误页面一般我们有2种做法: (1)在页面中用指令进行配置,即page指令的errorPage和isErrorPage:可以使用page指令的errorPage来指定错误页!在当前JSP页面 ...
配置MySQL GTID(Global Transaction IDs)复制
一.GTID的简介 1.GTID的概述 .全局事物标识:global transaction identifieds. .GTID事物是全局唯一性的,且一个事务对应一个GTID. .一个GTID在一个 ...

jq时间戳动画

jq时间戳动画的更多相关文章

随机推荐

热门专题