JavaScript 包管理器动画插件 JavaScript 动画 Tweene

Tweene 功能强大的JavaScript动画代理插件

发布于 2017-06-26 10:33:48 字数 13307 浏览 1908 评论 0

Tweene是一款功能强大的jQuery动画代理插件。Tweene可以在不同的动画库之间进行切换，使你能够同时使用不同的动画库而不必修改你的动画代码。使用Tweene可以很好进行各种动画控制。

插件介绍

现在市场上已经有很多优秀的JavaScript动画插件，每个插件都有特定的功能、优点和缺点。每个程序员和每个项目都有其特定的动画要求，所以有时候一个库可能是比较合适的，而在另一些时候它不能完全满足我们项目的需求。我们不想鼓励你改变你最喜欢的插件，我们还没有写过另一个。

Tweene 是不同的东西。它是一个JavaScript动画代理，用作你选择的动画库的包装器，它可以让你做得越来越好，而且随时都可以轻松地从一个库切换到另一个库。目前可以和GSAP、Velocity.js、Transit 和 jQuery 一起工作。

Tweene 特点

使用一套API来管理所有的动画库：在不同的动画库之间切换和学习一套新的动画库接口是非常耗时的事情，例如：我们是该使用"x"还是"translateX"，时间单位是秒还是毫秒？

Tweene可以通过它特定的接口帮你解决这些问题。你可以使用一个动画库来运行桌面版本的动画，并使用另一个库来运行移动设备版本的动画，而不必修改那你的动画代码。

时间轴特性：通过Tweene我们可以为所有支持的动画库添加时间轴特性（只有GSAP是天生支持它的）。这使得我们可以简单而有效的管理动画序列。

没有多重嵌套的回调代码
不用多次响应代码
代码中不会出现setTimeout这样的垃圾代码

强大到所有东西都可以控制：通过Tweene你可以通过play()、pause()、resume()、reverse()和restart()方法来控制所有支持的动画库动画。你还可以通过Tweene来控制CSS Transition，可以控制动画的速度。

如何使用

要使用Tweene，你首先要引入以需要的动画库文件。

// use Tweene with GSAP
<script src="/your/path/TweenMax.min.js"></script>
<script src="/your/path/tweene-gsap.min.js"></script>

// use Tweene with jQuery
<script src="/your/path/jquery.min.js"></script>
<script src="/your/path/tweene-jquery.min.js"></script>

// use Tweene with Transit
<script src="/your/path/jquery.transit.js"></script>
<script src="/your/path/tweene-transit.min.js"></script>

// use Tweene with Velocity.js
<script src="/your/path/velocity.min.js"></script>
<script src="/your/path/tweene-velocity.min.js"></script>

// use Tweene with more then one library
<script src="/your/path/TweenMax.min.js"></script>
<script src="/your/path/jquery.transit.js"></script>
<script src="/your/path/velocity.min.js"></script>
<script src="/your/path/tweene-all.min.js"></script>

<script>
  // set the default time unit you want to use
  Tweene.defaultTimeUnit = 'ms'; // or 's'
  
  // set the default driver you want to use
  Tweene.defaultDriver = 'gsap'; // or one of 'transit', 'velocity', 'jquery'
</script>

时间单位

你可以通过Tweene.defaultTimeUnit在Tweene中定制自己的时间单位（接收s或ms做单位）。

由于GSAP的默认时间单位是秒，如果你使用tweene-gsap.min.js或require('tweene/gsap')来做动画库引擎，请注意Tweene预定义的时间单位，Tweene.defaultTimeUnit的值将是"s"。而其它的动画库使用的时间单位是毫秒，所以预定义时间单位为"ms"。

创建tween对象

tween 是一个可以使你选定目标的属性进行动画的对象。这个模板可以是一个DOM元素或一组DOM元素。是什么对象取决于你选择的动画库。通常情况下是一个jQuery对象。

在Tweene 中创建一个新的实例或时间轴不需要new操作符。你只有使用它提供的一个静态方法来创建。这个方法是唯一可以创建对象的方法：get()方法。

var tween = Tweene.get($target);

这将使用默认的引擎来创建一个Tweene对象，如果你想使用不同的动画库来创建Tweene对象（确保你使用的是完整版本的Tweene 并将所有的动画库引入你的页面中），你可以通过第二个参数来指定你需要的动画库。

var velocityTween = Tweene.get($target1, 'velocity');
var gsapTween = Tweene.get($target2, 'gsap');
var transitTween = Tweene.get($target3, 'transit');

注意通过get()方法创建的Tweene对象默认开始时动画是暂停状态的，你可以在指定所有你需要的参数选项之后，使用play()方法来开始动画。

To动画

每一个动画效果都至少需要一组我们想改变CSS属性。To()方法用于指定属性的最终状态。下面来看看所有不同的语法：我们现在需要将目标元素在水平位置上移动并带有"fade-out"效果。默认时间单位是毫秒，延时为500毫秒，我们还指定一个easing 和回调函数。

var completeCallback = function() {
    console.log('just finished');
};

// jQuery syntax style:
Tweene.to($target, {opacity: 0, left: '+=50px'}, 500, 'easeOutQuad', completeCallback);

// GSAP syntax style, duration in seconds passed before properties, 
//all options passed inside the properties object:
Tweene.to($target, '0.5s', {opacity: 0, left: '+=50px', ease: 'easeOutQuad', onComplete: completeCallback});

// Velocity.js syntax style, options grouped in an object passed as second parameter:
Tweene.to($target, {opacity: 0, left: '+=50px'}, {duration: 500, easing: 'easeOutQuad', complete: completeCallback});

// single object syntax, as allowed by Transit:
Tweene.to($target, {opacity: 0, left: '+=50px', duration: 500, easing: 'easeOutQuad', complete: completeCallback});

// Fluent syntax:
Tweene.get($target)
    .to({opacity: 0, left: '+=50px'})
    .duration(500)
    .easing('easeOutQuad')
    .on('complete', completeCallback)
    .play();                                    // tweens created with get() need to be started manually

// alternative syntax:
Tweene.get($target)
    .to({opacity: 0, left: '+=50px'})
    .options({duration: '500ms' easing: easeOutQuad', complete: completeCallback})
    .play();                                    

// whatever mix of syntax you like, this is just an example:
Tweene.get($target)
    .to({opacity: 0, left: '+=50px', easing: 'easeOutQuad'}, 500)
    .on('complete', completeCallback)
    .play();

如果你不想立刻开始动画，你只需要设置一下paused 属性即可。

var t = Tweene.to($target, {opacity: 0}, {duration: 500, paused: true});
// later, modify the previously set duration and run:
t.duration(300).play();

From动画

通过Tweene你也可以创建开始动画，你可以为目标属性的指定开始值，而当前的值被设置为动画的结束状态。当前只有GSAP 库是天然支持这个方法的，但你可以通过Tweene使其它库也支持它。下面来看一下fade-in效果，当前元素的透明度为1。

// jQuery syntax style:
Tweene.from($target, {opacity: 0}, 500);

// GSAP syntax style:
Tweene.from($target, '0.5s', {opacity: 0});

// Velocity.js syntax style
Tweene.from($target, {opacity: 0}, {duration: 500});

// single object syntax
Tweene.from($target, {opacity: 0, duration: 500});

// Fluent syntax:
Tweene.get($target)
    .from({opacity: 0})
    .duration(500)
    .play();

From...To动画

通过From和To你可以完全控制从开始到结束的动画属性值。这相当于Velocity.js用forcefeeeding 技术来定义开始属性。

// jQuery syntax style:
Tweene.fromTo($target, {opacity: 0}, {opacity: 1}, 500);

// GSAP syntax style:
Tweene.fromTo($target, '0.5s', {opacity: 0}, {opacity: 1});

// Velocity.js syntax style
Tweene.fromTo($target, {opacity: 0}, {opacity: 1}, {duration: 500});

// Fluent syntax:
Tweene.get($target)
    .from({opacity: 0})
    .to({opacity: 1})
    .duration(500)
    .play();

// Mixed syntax example:
Tweene.get($target)
    .from({opacity: 0})
    .to({opacity: 1}, 500)
    .play();

设置属性

你可以通过set()方法来改变对象的属性值：

Tweene.set($target, {left: 100, top: 200});
// using get and set:
Tweene.get($target).set({left: 100, top: 200});
// setting properties with another library:
Tweene.get($target, 'gsap').set({left: 100, top: 200});

Tween & Timeline 选项

Delay ：你可以在开始tween或timeline前设置一个延迟时间。

// setting tween delay 
Tweene.to($target, {opacity: 0}, {duration: 500, delay: 200});
Tweene.get($target).to({opacity: 0}).duration(500).delay('0.2s');
Tweene.get($target).to({opacity: 0}).options({duration: 500, delay: '200ms'});

// setting timeline delay 
Tweene.line({delay: 200});
Tweene.line().delay('0.2s');
Tweene.line().options({delay: '200ms'});

Loops。：该参数用于迭代tween或timeline任意次数。设置为loops = 0 动画将运行一次，loops = 1 动画将运行2次。无限循环设置为loops = -1。

// tween will run four times
Tweene.to($target, {opacity: 0}, {duration: 500, loops: 3});

// tween will run in infinite loop
Tweene.get($target).to({opacity: 0}).duration(500).loops(-1);

// timeline will repeat twice ('repeat' is an alias for loops option)
Tweene.line({repeat: 1});
Tweene.line().loops(1);

Loops Delay ：该参数用于设置迭代的延迟时间。该参数只用在Loops不为0时才有效。

// setting tween loopsDelay
Tweene.to($target, {opacity: 0}, {loops: 2, loopsDelay: 200});
Tweene.get($target).to({opacity: 0}).loops(2).loopsDelay('0.2s');
// you can use also repeat and repeatDelay as alias
Tweene.get($target).to({opacity: 0}).options({repeat: 2, repeatDelay: '200ms'});

// setting timeline loopsDelay 
Tweene.line({loops: 2, loopsDelay: 200});
Tweene.line().loops(2).loopsDelay('0.2s');
Tweene.line().options({loops:2, loopsDelay: '200ms'});

Yoyo effect ：伴随loops选项，你还可以通过设置选项为true使用Yoyo效果。该效果是动画将在每一次循环时改变前进和后退的方向。

Tweene.to($target, {opacity: 0}, {loops: 2, loopsDelay: 200, yoyo: true});
Tweene.get($target)
    .to({opacity: 0})
    .loops(2)
    .loopsDelay('0.2s')
    .yoyo(true);

Tweene.line({loops: 2, loopsDelay: 200, yoyo: true});
Tweene.line().loops(2).loopsDelay('0.2s').yoyo(true);

Speed Control：通过Tweene 你可以动态的改变tweens 和 timelines的动画速度。为了达到更好的动画效果，你可以使用浮点数来预定义动画，如：1 = 正常速度, 2 = 2倍速度 = 一半的duration时间, 0.5 = 一半的速度, 2倍的duration时间等等。或者在Tweene.speeds对象中预定义一些值。


// set speed statically before the tween start:
Tweene.to($target, {opacity: 0}, {duration: 2, speed: 0.7});

var t = Tweene.get($target)
    .to({opacity: 0})
    .duration('5s')
    .play();

// during the tweening, slow down
t.speed('half');

var t = Tweene.line($target)
    .to({opacity: 0})
    .duration('5s')
    .play();

// go fast forward using the timeScale alias
t.timeScale(3.5);

Tween & Timeline 动画控制

Tweene 为您提供了动画暂停、控制反转、恢复和重新开始的功能。

Play ：play方法可以使动画从当前位置开始动画。如果动画当前正在播放则反方向动画。


// start a tween
var t = Tweene.to($target, {opacity: 0}, {duration: 2, paused: true});
t.play();

var t = Tweene.get($target)
    .to({opacity: 0})
    .duration('5s')
    .play();

// start a timeline
var t = Tweene.line($target)
    .to({opacity: 0})
    .duration('5s')
    .play();

Pause ：Pause方法用于使tween 或 timeline在当前位置暂停动画，如果当前动画处于暂停状态，它没有效果。

Reverse Reverse方法使tween 或 timeline动画沿反方向进行。如果动画处于开始位置，该方法没有效果。它的效果和动画到达终点后在调用一次Play方法一样。

Resume ：Resume方法恢复当前的tween 或 timeline暂停状态，它不改变动画的方向。

Restart ：Restart不管当前的动画的位置、方向和状态，它将重置tween 或 timeline的位置和循环次数，并使动画继续进行，。

Tween & Timeline 动画事件

Tweene timelines 和 tweens定义了一系列的事件来让你控制动画关键点的回调事件。关于事件，你需要知道以下信息：

每个tween / timeline对象只能触发一次事件。
使用timeline 回调函数时，你可以定义一些额外的参数和回调事件。
如果你没有定义作用域，this在回调中代表一个tween / timeline对象。你可以通过this.target()来调用动画对象。
每一个事件都有一组别名用于适应不同开发者的习惯。

下面是一个如何设置回调函数和添加额外参数的例子：


// setting a simple begin callback 
var t = Tweene.get($target)
    .to({opacity: 0})
    .duration(500)
    .on('begin', function() { console.log('starting'); })
    .play();

// setting a complete callback with params and scope
var t = Tweene.get($target)
    .to({opacity: 0})
    .duration(500)
    .on('complete', function(a, b) { console.log('completed: ', a, b, this.attr('id')); }, [3, 'bye'], $target)
    .play();

// setting the same complete callback with different syntax
var t = Tweene.to($target, '500ms', {
    opacity: 0, 
    onComplete: function(a, b) { console.log('completed: ', a, b, this.attr('id')); }, 
    onCompleteParams: [3, 'bye'], 
    onCompleteScope: $target
});

// setting progress event on a timeline
var t = Tweene.line($target).to({opacity: 0}, {duration: '500ms', progress: function() { console.log('we are making progress here'); }});

Begin Event：Begin Event用于触发tween 和 timeline的动画。如果设置了了延时，它将在延时之后触发。它不会在循环迭代中触发。别名：begin, onBegin, start, onStart。
Complete Event：Complete Event在tween 和 timeline在动画结束时触发。它不会在每次迭代结束时触发，只在动画结束时触发。别名：end, complete, onEnd, onComplete, finish, onFinish, done。
Reverse Event：Reverse Event在tween 和 timeline在动画结束时触发并使动画反方向进行。它不会在每次迭代结束时触发。别名：reverse, onReverse, onReverseComplete。
Loop Event：Loop Event在tween 和 timeline每次迭代结束时触发。别名：loop, onLoop, onRepeat。
Progress Event：Progress Event在tween 和 timeline动画时不断的触发。如果你设置了循环延时，它也会在延时中触发。它不会在动画暂停时触发。别名： progress, onProgress, update, onUpdate。

项目地址：http://tweene.com

分享到QQ

分享到微博