tween.js

 简要教程

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

时间： 2024-10-14 00:21:09

tween.js的相关文章

修复 Tween.JS 的 onStop 设置无效

Tween.js 个人认为还是一个比较不错的 缓动动画库,给作为学渣的我实现一些酷酷的动画带来了极大的遍历. 但是,今天突然发现特么设置onStop的回调函数居然没反应...... 作为一个渣渣只能一遍接一遍的检测自己的代码,但依然没有什么卵用,吧Github上的例子clone下来也没什么用(2015-8-31 22:00:20 tweenjs位于github上的最新push版本) 然后因为实在需要用到这个回调,于是只能硬着头皮看源码. 检查多遍,终于解决,过程就不表了. while ( i <

tween.js的动画效果

实现动画可以用好多种的方法,今天来看看用tween.js插件是如何实现动画效果的.  tween.js的使用 1.下载 2.引入 3.使用tween.js语法 需要哪些条件来做运动 1.初始位置 2.目标点 缓动函数 1.linear 匀速 2.Quad 二次方缓动效果 3.Cubic 三次方缓动效果 4.Quart 四次方缓动效果 5.Quint 五次方缓动效果 6.Sine  正弦缓动效果 7.Expo  指数缓动效果 8.Circ  圆形缓动函数 9.Elastic 指数衰减正弦曲线缓动函

关于tween.js测试介绍

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>tweenDemo-01</title> <style type="text/css"> * { margin: 0; padding: 0;} div { height: 100px; width: 100px; position: absolute; left:0

tween.js 用户指南 - 与 Three.js 配合使用的补间动画库

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Learning Three.js - Tween.js for Smooth Animation tween.js 用户指南tween.js u

window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求.这个方法接受一个函数为参,该函数会在重绘前调用. 注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame(). 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般

Tween.js 动画效果

一.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 = Arr

利用tween.js算法生成缓动效果

在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等.无论运用在哪里,它们的原理都是一样的.同样,在用js实现运动效果时,我们也可以利用贝塞尔曲线来实现不同的特效,而tween.js就是一个封装好的计算辅助算法.你可以通过连续输入多个值,然后利用贝塞尔曲线公式输出不同的值,最终形成了一条光滑的曲线.因为一条曲线上的值的不一样的,所以我们可以利用曲线的

javascript -- (tween.js简单动画制作)

声明:tween.js -- github.com -- search --下载 /***导入tween.js**/ <script type="text/javascript" src="js/tween.js" ></script> /***style样式**/ <style> #wrap { position: relative;/***相对定位**/ } #box { position: absolute;/***绝对定位

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

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>模仿微博发布效果</title> 6 <link rel="stylesheet&quo