简要教程

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.startTween.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的动画效果。的更多相关文章

  1. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  2. 在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,

    前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发 ...

  3. JS 获取元素的属性值,非内联样式

    //获取样式表的属性值,IE8及以下不兼容 ,方法 window.getComputedStyle(dom对象,"伪类").style属性;   //IE8及以下获取样式表的属性值 ...

  4. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  5. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  8. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  9. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

随机推荐

  1. [No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  2. 两千行PHP学习笔记

    亲们,如约而至的PHP笔记来啦~绝对干货! 以下为我以前学PHP时做的笔记,时不时的也会添加一些基础知识点进去,有时还翻出来查查. MySQL笔记:一千行MySQL学习笔记http://www.cnb ...

  3. (转)C# Winform应用程序占用内存较大解决方法整理

    背景: 微软的 .NET FRAMEWORK 现在可谓如火如荼了.但是,.NET 一直所为人诟病的就是“胃口太大”,狂吃内存,虽然微软声称 GC 的功能和智能化都很高,但是内存的回收问题,一直存在困扰 ...

  4. SqlServer 一些操作

    //查询一个表中的某字段为条件修改另一个表的内容 update [VehicleInsuranceAgentConfiguration] set Keyword2=PC.ServerConfig fr ...

  5. 管理Activity

     开源中国摘取的代码,这个可以管理activity 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...

  6. 探索WebKit内核(一)------ 菜鸟起步

    为什么搞WebKit 如今研究WebKit的人越来越多,俺不能免俗,也增加当中.WebKit的火爆也是得益于浏览器和WebOS的混战,随着Palm WebOS, Chrome OS, Firefox ...

  7. Selenium模块化

    概述 高内聚低耦合是软件设计的一个基本原则. 内聚:从功能角度来度量模块内的联系,一个好的内聚模块应当恰好做一件事.它描述的是模块内的功能联系. 耦合:各模块之间相互连接的一种度量,耦合强弱取决于模块 ...

  8. C# 后台调用script使用类

    在网站的开发的时候,总是会用到一些前台的提示的script的代码,从项目中整理了一份常用的方法. public class Jscript { public Jscript() { // // TOD ...

  9. C# SharpMap的简单使用

    本文是利用ShapMap实现GIS的简单应用的小例子,以供学习分享使用.关于SharpMap的说明,网上大多是以ShapeFile为例进行简单的说明,就连官网上的例子也不多.本文是自己参考了源代码进行 ...

  10. java.util.HashSet, java.util.LinkedHashMap, java.util.IdentityHashMap 源码阅读 (JDK 1.8.0_111)

    一.java.util.HashSet 1.1 HashSet集成结构 1.2 java.util.HashSet属性 private transient HashMap<E,Object> ...