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

简要教程

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

tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果。例如，假设你有一个对象position，它的坐标为 x 和 y：

var position = { x: 100, y: 0 }

如果你想改变 x 的值从100到200，你只需要这样做：

// Create a tween for position first

var tween = new TWEEN.Tween(position);

// Then tell the tween we want to animate the x property over 1000 milliseconds

tween.to({ x: 200 }, 1000);

到这里只是创建了tween对象，你需要激活它，让它开始动画：

// And set it to start

tween.start();

最后为了平滑动画效果，你需要在同一个循环动画中调用TWEEN.update方法。代码如下：

animate();

function animate() {

    requestAnimationFrame(animate);

    // [...]

    TWEEN.update();

    // [...]

}

这个动作将会更新所有被激活的tweens，在1秒钟（例如1000ms）position.x 将变为200。

你也可以使用onUpdate回调函数将结果打印到控制台上。

tween.onUpdate(function() {

    console.log(this.x);

});

这个函数在每次tweens被更新时都被调用。它的出现频次依赖于很多因素-例如：依赖于你的电脑或设备的运行速度。

tween.js动画

Tween.js本身不会运行，你需要通过update方法明确的告诉它什么时候开始运行。推荐在动画主循环中使用该方法。你可以通过调用requestAnimationFrame方法来获得良好的图像性能。

来看下面的例子：

animate();

function animate() {

    requestAnimationFrame(animate);

    // [...]

    TWEEN.update();

    // [...]

}

这里使用无参数调用方式，update方法将明确当前时间，以便于获取上一次动画的执行时间。

你也可以为update方法明确一个时间：

TWEEN.update(100);

上面语句的意思是说：update的时间=100毫秒。你可以使用这种方法来明确代码中所有随时间变化的函数。例如，动画已经开始，你想所有动画都同步进行，你的animate代码一改像这样：

var currentTime = player.currentTime;

TWEEN.update(currentTime);

控制tween动画

start和stop

Tween.start和Tween.stop分别用于控制tween动画的开始和结束。

对于已经结束和没有开始的动画，Tween.stop方法不起作用。Tween.start方法同样接收一个时间参数。如果你使用了该参数，tween动画将在延时该时间数后才开始动画。否则它将立刻开始动画。

update

可以通过TWEEN.update方法来执行动画的更新。

chain

如果你想制作多个多行，例如：一个动画在另一个动画结束后开始。可以通过chain方法来使实现。如下的代码，tweenB 在 tweenA 之后开始动画:

tweenA.chain(tweenB);

可以像下面这样制作一个无限循环的动画：

tweenA.chain(tweenB);

tweenB.chain(tweenA);

repeat

如果你想制作循环动画可以使用chain来实现，但是更好的方法是使用repeat方法。它接收一个用于描述你想循环多少次的参数：

tween.repeat(10); // repeats 10 times and stops

tween.repeat(Infinity); // repeats forever

yoyo

这个函数只在你使用repeat方法是起作用。当它被激活时，tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。

delay

delay方法用于控制动画之间的延时。

tween.delay(1000);

tween.start();

全局方法

以下的方法定义在 TWEEN 的全局对象中，其中大多数方法你都用不上，除了update方法：

TWEEN.update(time)

该方法用于所有被激活的tweens，如果time没有被指定，将使用当前时间。

TWEEN.getAll 和 TWEEN.removeAll

这两个方法用于胡获取被激活的tweens数组的一个引用，或从数组中删除所有tweens。

TWEEN.add(tween) 和 TWEEN.remove(tween)

用于向被激活的tweens中添加一个tween，或移除一个tween。

以上方法通常只是在内部使用，一般情况下你了解即可。

可用的easing函数：TWEEN.Easing

tween.js提供了一些可用的easing函数。可用函数有：Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。easing 类型分为: In, Out 和 InOut.

使用自定义的Easing函数

你不但可以使用tween.js提供的easing函数，还可以自定义easing函数。但必须遵守下面的规则：

它必须接收一个参数。
它必须基于输入参数返回一个值。

easing函数仅在每个tween每次被更新时调用，而不管有多少属性被改变。结果随后会被用于初始值：

easedElapsed = easing(k);

for each property:

    newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来做easing效果的例子：

function tenStepEasing(k) {

    return Math.floor(k * 10) / 10;

}

你可以在tween 这样使用它：

tween.easing(tenStepEasing);

回调函数

另外一个有用的特性是你可以在每次tween循环周期的指定时间点调用自定义的函数。

例如：假设你想使一些不能直接修改参数的对象执行动画，要访问该对象的参数只能通过setter方法，你可以通过update方法的回调函数来设置新的setter值。

var trickyObjTween = new TWEEN.Tween({

    propertyA: trickyObj.getPropertyA(),

    propertyB: trickyObj.getPropertyB()

})

    .to({ propertyA: 100, propertyB: 200 })

    .onUpdate(function() {

        this.setA( this.propertyA );

        this.setB( this.propertyB );

    });

或者如果你想确认tween动画开始后某个对象指定状态下的某个值，你可以通过start回调来获取它：

var tween = new TWEEN.Tween(obj)

    .to({ x: 100 })

    .onStart(function() {

        this.x = 0;

    });

onStart

tween开始动画前的回调函数。

onStop

tween结束动画后的回调函数。

onUpdate

在tween每次被更新后执行。

onComplete

在tween动画全部结束后执行。

更多关于tween的资料请参考：https://github.com/sole/tween.js/blob/master/docs/user_guide.md

tween的相关资料：Tween.js for Smooth Animation

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

动画库tween.js
动画库tween.js var Tween = { Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter; ...
eclipse 中main()函数中的String[] args如何使用？通过String[] args验证账号密码的登录类？静态的主方法怎样才能调用非static的方法——通过生成对象？在类中制作一个方法——能够修改对象的属性值？
eclipse 中main()函数中的String[] args如何使用? 右击你的项目,选择run as中选择 run configuration,选择arguments总的program argu ...
js修改元素的属性
<script type="text/javascript"> //给id为nice的元素添加title属性并赋值为"测试title" funct ...
css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画过渡动画第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
聊聊JS动画库:Velocity.js
前言又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...
在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,
前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发 ...
JS 获取元素的属性值，非内联样式
//获取样式表的属性值,IE8及以下不兼容 ,方法 window.getComputedStyle(dom对象,"伪类").style属性; //IE8及以下获取样式表的属性值 ...
CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
CSS3过渡动画&关键帧动画
一.过渡动画过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...

随机推荐

C语言（1）
认知C语言计算机有很多的语言,现在要学习的C语言便是一种.下面便是一个基本的框架: #include <stdio.h> #include <stdlib.h> int ma ...
Maven_pom.xml介绍
Maven的pom.xml介绍 6.1 简介 pom.xml文件是Maven进行工作的主要配置文件.在这个文件中我们可以配置Maven项目的groupId.artifactId和version ...
20145330第八周《Java学习笔记》
20145330第八周<Java学习笔记> 第十五章通用API 通用API 日志:日志对信息安全意义重大,审计.取证.入侵检验等都会用到日志信息日志API Logger:注意无法使用构 ...
OpenStack 二次开发环境和开发工具的选择
OpenStack网上安装教程很多,就不介绍安装了,OpenStack所有组件都安装完后,dashboard web里面进行一些操作,没有报错或提示权限问题,就可以直接下载pycharm或者eclip ...
android中的Dialog
一.Dialog概述二.使用系统自带的Dialog 1.新建Builder AlertDialog.Builder builder = new AlertDialog.Builder(StoryAc ...
call与apply基础用法告诉你
Js用法中还有个极好的但是有些抽象的用法——call与apply,今天我要简单总结一下: var ob1={ //对象ob1 name:"ob1", func1:function( ...
Console ArcEngine 许可绑定
using ESRI.ArcGIS.Carto;using ESRI.ArcGIS.Geodatabase;using ESRI.ArcGIS.DataSourcesFile; using ESRI. ...
关于在VS 上发布网站
在vs 上建立的网站只能用 localhost 进行访问,想要自己本机上的网站发布到IIS上面,这样就可以直接用 IP 地址来访问了,那么照如下的方式做: 1. 首先需要使用vs 发布自己的网站 1. ...
使用Fiddler的X5S插件查找XSS漏洞
OWASP top 10的安全威胁中的CrossSite Scripting(跨站脚本攻击),允许攻击者通过浏览器往网站注入恶意脚本.这种漏洞经常出现在web应用中需要用户输入的地方,如果网站有XSS ...
nyoj-71
描述进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客的总重量不能超过独木舟的最大承载量.我们要尽量减少这次活动中的花销,所以要找出可以安置所有旅 ...