一、apply,和call的用法。

先来一个与本次博文无关的东西，就是apply和call的用法。其实apply和call的用法都一样，只是他们的传参不一样。apply是数组，而call是单独的传，类似枚举。

1.列子一把arguments转化为标准数组，可以使用push等方法。

function test(){

    //arguments.push(5); //arguments.push is not a function

    console.log(arguments)

    var arg = Array.prototype.slice.apply(arguments,[]);

   // var arg = Array.prototype.slice.call(arguments,'');

    console.log(arg); //[1,2,3,4]

    arg.push(5); // [1,2,3,4,5]

}

test(1,2,3,4);

2.如何把arguments中的参数直接push到一个数组里面？(也借助apply)

function test(){

    var arg = [];

    Array.prototype.push.apply(arg,arguments);

    console.log(arg); // [1,2,3,4] 是不是发现要把一个数组

    //插入到另外一个数组的后面不用for循环了，也不用contact了呢？

    //其实apply 和call还是有多用法，比如继承。其实主要是把

    //前面对象的方法赋给后面对象而已。比如 object.apply(object1,arg)

    //把object的方法赋给 object1。而 arg是参数。

}

test(1,2,3,4);

插曲到此为止。下面主要讲解下tween.js

二、关于Tween.js

1.Tween.js是一个包含各种经典动画算法的JS资源。其实更jQuery.easing.js很多类似之处。主要的方法名也一致。不压缩代码也就800来行。

主要包含了：

  1. Linear：线性匀速运动效果；
  2. Quadratic：二次方的缓动（t^2）；
  3. Cubic：三次方的缓动（t^3）；
  4. Quartic：四次方的缓动（t^4）；
  5. Quintic：五次方的缓动（t^5）；
  6. Sinusoidal：正弦曲线的缓动（sin(t)）；
  7. Exponential：指数曲线的缓动（2^t）；
  8. Circular：圆形曲线的缓动（sqrt(1-t^2)）；
  9. Elastic：指数衰减的正弦曲线缓动；
  10. Back：超过范围的三次方缓动（(s+1)*t^3 – s*t^2）；
  11. Bounce：指数衰减的反弹缓动。

每个效果都分三个缓动方式，分别是：

  • easeIn：从0开始加速的缓动，也就是先慢后快；
  • easeOut：减速到0的缓动，也就是先快后慢；
  • easeInOut：前半段从0开始加速，后半段减速到0的缓动。

很多小伙伴easeIn和easeOut哪个先快，哪个先慢一直记不清楚，我这里再给大家传授一遍我独门的邪恶记法，想想我们第一次OOXX，是不是进去(easeIn)的时候都是先慢，等进去了就快了；然后出来(easeOut)的时候，开始很快，都要出来了恋恋不舍速度就慢了。跟我们这里的动画效果是完全匹配的。

所有的这些缓动算法都离不开下面4个参数，t, b, c, d，含义如下

/*

 * t: current time（当前时间）；

 * b: beginning value（初始值）；

 * c: change in value（变化量）；

 * d: duration（持续时间）。

 */

2.console.log(TWEEN);

console.log(TWEEN)

可以看出在TWEEN上挂载了很多方法，以及对象。只要我们一个一个的挖掘，就知道具体有啥用了。

三、先来一个小列子。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #target{

            width: 100px;

            height: 100px;

            background: red;

        }

    </style>

</head>

<body>

    <div id="target"></div>

</body>

<script src="tween.js"></script>

<script src="index.js"></script>

</html>
var position;

var target;

var tween, tweenBack;

init();

animate();

function init() {

    position = {x: 100, y: 100, rotation: 0};

    target = document.getElementById('target');

    tween = new TWEEN.Tween(position)

      .to({x: 700, y: 200, rotation: 359}, 2000)

      .delay(1000)

      .easing(TWEEN.Easing.Elastic.InOut)

      .onUpdate(update);

    tweenBack = new TWEEN.Tween(position)

      .to({x: 100, y: 100, rotation: 0}, 3000)

      .easing(TWEEN.Easing.Elastic.InOut)

      .onUpdate(update);

    tween.chain(tweenBack);

    tweenBack.chain(tween);

    tween.start();

}

function animate( time ) {

    requestAnimationFrame( animate );

    TWEEN.update( time );

}

function update() {

    target.style.webkitTransform = 'translate('+position.x+ 'px'+','+ position.y + 'px' +')' + 'rotate(' + Math.floor(position.rotation) + 'deg)';

    //target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';

   // target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';

}

每个api对应源码去追寻。就知道用法了。比较源码也就800多行而已。

四、运动函数

(function() {

    var lastTime = 0;

    var vendors = ['ms', 'moz', 'webkit', 'o'];

    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];

        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']

                                   || window[vendors[x]+'CancelRequestAnimationFrame'];

    }

    if (!window.requestAnimationFrame)

        window.requestAnimationFrame = function(callback, element) {

            var currTime = new Date().getTime();

            var timeToCall = Math.max(0, 16 - (currTime - lastTime));

            var id = window.setTimeout(function() { callback(currTime + timeToCall); },

              timeToCall);

            lastTime = currTime + timeToCall;

            return id;

        };

    if (!window.cancelAnimationFrame)

        window.cancelAnimationFrame = function(id) {

            clearTimeout(id);

        };

}());

五、结束语。

人的一生中有许多的小路，弯路，大路，坑坑洼洼的泥浆路，反正我家乡就是坑坑洼洼的泥浆路。从接触第一个网站到现在已经快6年时间。时间过得真快，生命历程轨迹变化也快。要从坑坑洼洼的泥浆路走出一条光明大道，就必须前进，不能丝毫有退缩之意。在一个领域能走多远，就看你能坚持多久了。有人说当你在一个领域坚持了10000个小时，你就是这个领域的大师了。10000/24 ？好像是400多天。除去睡觉时间，上班时间，打游戏时间。估计得4-6年才能有10000个小时。另祝大家，天天开心，事事顺心。

Tween.js 动画效果的更多相关文章

  1. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...

  2. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  3. 原生js动画效果（源码解析）

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  4. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  5. js动画效果

    js能够按照预定的时间间隔重复调用一个函数,而这意味着我们可以随着时间的推移而不断改变某个元素的样式.动画是样式随时间变化的完美例子之一. js函数setTimeout能够让某个函数在经过一段预定的时 ...

  6. 二、JavaScript语言--JS动画--JS动画效果

    运动框架实现思路: 1.速度(改变值:left , right , width , height , opacity) 2.缓冲运动 3.多物体运动 4.任意值改变 5.链式运动 6.同时运动 js用 ...

  7. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  8. 原生JS+tween.js模仿微博发布效果

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...

  9. tween.js

     简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween ...

随机推荐

  1. sqlserver 抓取所有执行语句 SQL语句分析 死锁 抓取

    原文:sqlserver 抓取所有执行语句 SQL语句分析 死锁 抓取 在多人开发中最头疼的是人少事多没有时间进行codereview,本来功能都没时间写,哪有时间来开会细细来分析代码.软件能跑就行, ...

  2. python线程的使用模式

    为了解决阻塞(如I/O)问题,我们需要对程序进行并发设计. 本文将通过将线程和队列 结合在一起,轻松地在 Python 中完成线程编程,创建一些简单但有效的线程使用模式. 一.使用线程 先看一个线程不 ...

  3. 【HAOI2016】放棋子

    题面 题解 任意两个障碍不在同一列 要求你放$N$个棋子也满足每行只有一枚棋子,每列只有一枚棋子的限制. 这™不就是个错排吗??? $$ h_i=(n-1)(h_{i-1}+h_{i-2}),h_1= ...

  4. 可视化分析 web 访问日志

    内容目录 Python 基础 使用模块介绍 可视化组件 echarts 介绍 Web 访问日志 代码解读 讲师:KK 多语言混搭开发工程师,多年 PHP.Python 项目开发经验,曾就职 360.绿 ...

  5. 对最近java基础学习的一次小结

    开头想了3分钟,不知道起什么名字好,首先内容有点泛,但也都是基础知识. 对之前所学的java基础知识做了个小结,因为我是跟着网上找的黑马的基础视频看跟着学的,10天的课程硬生生给我看了这么久,也是佛了 ...

  6. nGrinder性能测试平台的安装部署

    1.从GitHub下载war包: https://github.com/naver/ngrinder/releases 2.把ngrinder-controller-3.4.2.war重命名为ngri ...

  7. Python之pexpect详解

    一.引子 Pexpect程序主要用于人机对话的模拟,就是那种系统提问,人来回答yes/no,或者账号登陆输入用户名和密码等等的情况.因为这种情况特别多而且繁琐,所以很多语言都有各种自己的实现.最初的第 ...

  8. Unity Shader 学习之旅

    Unity Shader 学习之旅 unityshader图形图像 纸上学来终觉浅,绝知此事要躬行 美丽的梦和美丽的诗一样 都是可遇而不可求的——席慕蓉 一.渲染流水线 示例图 Tips:什么是 GP ...

  9. 如何在unix系统中用别的用户运行一个程序？

    1.问题的缘由 实际开发系统的时候,经常需要用别的用户运行一个程序.比如,有些系统为保证系统安全,不允许使用root来运行.这里,我们总结了unix系统下如何解决这个问题的一些方法.同时,我们还讨论如 ...

  10. Harbor 学习分享系列4 - Harbor常用功能实验

    前言 本文为Harbor技术分享系列的第4部分也是初级部分的完结篇,下个阶段作者将会进阶分享,更多详细的内容将会将会在文中介绍. 云盘链接 链接:https://pan.baidu.com/s/1PT ...