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>

<!--<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>

<!-- <div id="book1" ></div>-->

<!-- <div class="line"></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动画分析1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
iOS 手机淘宝加入购物车动画分析
1.最终效果仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] initWithFrame:CGRectMake(_propView.frame.size ...
iOS手机淘宝加入购物车动画分析
本文转载至 http://www.jianshu.com/p/e77e3ce8ee24 1.最终效果仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] i ...
（21）jq动画
jq动画的优点优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...
css动画和jq动画的简单区分
有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...
拆轮子之Fish动画分析
概述最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码https://github.com/dinuscxj/LoadingDrawable, 这个动画效果使用 ...
jq动画设置图片抽奖(修改效果版)
效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...
ANDROID开机动画分析
开机动画文件:bootanimation.zip在system\media文件夹下动画是由系列图片连续刷屏实现的..bootanimation.zip文件是zip压缩文件,压缩方式要求是存储压缩,包含 ...
Android——Fragment过度动画分析一（转）
Sliding Fragment 作者:小文字出处:http://www.cnblogs.com/avenwu/ 介绍:该案例为传统的Fragment增加了个性化的补间动画,其效果是原有frag ...

随机推荐

appium 启动了2个端口，但是只有一台机器在跑的问题解决 (还没试，记录在此)
appium启动了2个,端口分别设置为了4723 4725, 在测试类中也分别指定了设备和端口,用device来指定.然而每次都是运行一个设备. 后来添加了udid这个来指定才发现可以.deviceN ...
hadoop长时间运行后，stop-all.sh报错
报错现象: hadoop在stop-all.sh的时候依据的是datanode上的mapred和dfs进程号. 而默认的进程号保存在/tmp下,linux默认会每隔一段时间(一般是一个月或者7天左右 ...
服务容错保护断路器Hystrix之六：服务熔断和服务降级
伴随着微服务架构被宣传得如火如荼,一些概念也被推到了我们面前(管你接受不接受),其实大多数概念以前就有,但很少被提的这么频繁(现在好像不提及都不好意思交流了).想起有人总结的一句话,微服务架构的特点就 ...
slice和splice
slice //截取数组或者字符串,返回数组或字符串 //jquery方法截取元素,构成新的对象 splice //增加,修改,删除数组
Selector空轮询处理(转载)
https://www.cnblogs.com/my_life/articles/5556939.html Selector空轮询处理在NIO中通过Selector的轮询当前是否有IO事件,根据JD ...
Oracle 官方文档地址
官方文档地址: https://docs.oracle.com/cd/E11882_01/index.htm
保存chrome主题背景的图片
chrome主题背景的图怎样可以保存下来? 在chrome地址栏中输入: chrome://theme/IDR_THEME_NTP_BACKGROUND?npebkpkiddfadallfhefpip ...
WordPress版微信小程序1.5版本发布
这个周末对WordPress版微信小程序进行了小版本的升级,第一个版本做得比较粗糙,性能上也有些差.本次升级主要调整和优化功能包括: 1.在主页面,加入浮动按钮,用来打开侧滑导航菜单. 2.增加侧滑导 ...
基于centos7的真实机环境下安装 vmware workstastion
通常我们在在虚拟机里面搭建大数据集群,如果我们换在真实机里面搭建大数据集群的话, 我们的每一台电脑就是centos系统了,这个时候如果我们需要按vmware 软件的话我们就需要下载不同的版本了废话不 ...
mysql 取整数或小数或精确位数
select cast(3.1415926 as decimal(9,2))精确到几位 select round(1024.5); 四舍五入 select floor(1024.5);取整数部分 se ...

jq动画分析

jq动画分析的更多相关文章

随机推荐

热门专题