jQuery轻量级补间动画工具库-jQueryTween

jQueryTween是一款轻量级的jQuery补间动画工具库插件。使用jQueryTween可以制作出各种平滑的动画过渡效果。该插件基于tween.js，旨在简化各种补间动画操作，提供高性能的硬件加速动画。

查看演示  下载插件

为什么要使用jQueryTween？

• jQueryTween是一个轻量级、使用简单的操作tween.js的补间动画库。它使用jQuery来简化各种操作。
• 它支持各种动画过渡效果，如transform、opacity、color高达每秒60帧的backgroundPosition。
• jQueryTween还能制作平滑的scrollTo动画。
• jQueryTween最小版本只有8K，加上6K的tween.js，你可以不使用庞大和复杂的动画库引擎就能完成各种很酷的动画效果。
• 注意tween.js并没有包含在jQueryTween中，它被放置在AIO包中。
  

jQueryTween的特点

• 可以使用所有的tween.js的easing效果，可以制作延时和重复动画。
• 可以为onUpdate或onComplete事件提供回调函数。
• 当使用少量的补间动画属性的时候，可以调整性能（performance）。
• 大多数属性你不需要设置初始化值，创建会使用当前的属性值，除了transform(translate,rotate,scale)和position(top,right,bottom,left)。
• 可以对补间动画进行控制：播放/暂停/停止。
• 可以使用scrollTo对窗口或某个目标进行补间动画。
• 可以对文本进行color和background-color补间动画。
• 可以对位置position进行补间动画：top, bottom, left, right（对定位方式为absolute或relative的元素）
• 可以对background-position进行补间动画（仅在X和Y使用百分比值的情况下）。
• 可以对transform-translate3d进行补间动画。
• 可以对transform-rotateX、rotateY、rotateZ进行补间动画。
• 可以对transform-scale进行补间动画。
• 可以对透明度opacity进行补间动画。
  

使用方法

使用该补间动画插件首先要引入必要的依赖文件。你可以使用AIO包（all in one）。

1. <script type="text/javascript" src="../assets/js/jQueryTween-aio-min.js">  

复制代码
或者使用单独的文件。

1. <script type="text/javascript" src="../assets/js/RequestAnimationFrame.js">
   
2. <script type="text/javascript" src="../assets/js/tween.min.js">   
   
3. <script type="text/javascript" src="../assets/js/jQueryTween.min.js">  

复制代码
调用插件

基本的调用方法：

1. $('#selector').jQueryTween(options,callback,special);         

复制代码
注意：最好使用一个jQuery ID选择器来执行补间动画。

高级例子

1. // Complex example jQueryTween syntax
   
2. $('#selector').jQueryTween({
   
3.     from: {
   
4.         opacity: 1,
   
5.         translate: {x:0, y:0, z:0},
   
6.         rotate: {x:0, y:0, z:0},
   
7.         scale: 1
   
8.     },
   
9.     to: {
   
10.         opacity: 0.5,
    
11.         translate: {x: 150, y: 50, z: -100},
    
12.         rotate: {x: 5, y:15, z:-25},
    
13.         scale: 1.5
    
14.     },
    
15.     repeat: 2, // can be number or 'Infinity'
    
16.     duration: 1500,
    
17.     easing: TWEEN.Easing.Exponential.InOut, // my favorite
    
18.     delay: 500,
    
19. }, function() {
    
20.     //do some cool stuff when tween finished animating
    
21. }, function() {
    
22.     //do some cool stuff while tween is running
    
23. });               

复制代码
ScrollTo补间动画

1. // Scroll to top of window
   
2. $('#button').on('click', function() {
   
3.     $('body').jQueryTween({ to: { scroll: 0 } });
   
4. });
   
5. // Scroll to element when clicking anchor links
   
6. $('a#button').on('click', function(e) {
   
7.     var target = $( $.attr(this, 'href') );
   
8.     $('#element').jQueryTween({ to: { scroll: $(target).offset().top } });
   
9. });      

复制代码
补间动画控制

1. // stops all the object's tweens
   
2. $('.selector').stop();
   
3. // pauses all the object's tweens
   
4. $('.selector').pause();
   
5. // resumes all the object's tweens
   
6. $('.selector').play();      

复制代码
via:http://www.htmleaf.com/jQuery/Layout-Interface/201504221720.html

【jQuery轻量级补间动画工具库-jQueryTween】相关文章

1. jQuery轻量级补间动画工具库-jQueryTween

2. TweetDeck HTML5版本登陆Mac软件商店

3. 设计师10大必备HTML动画工具

4. 给你推荐10款优秀的 HTML5 动画工具

5. Adobe发布HTML5网页动画工具{Adobe Edge}

6. 一个轻量级CSS3动画库：JX.Animate

7. JX.Animate：腾讯开源的轻量级CSS3动画库

8. Prompt轻量级提示框弹出层Jquery插件

9. Prompt轻量级提示框弹出层Jquery插件

10. 简单的，轻量级的 jQuery 仪表板插件

本文来源：https://www.51html5.com/a1521.html