jQuery輕量級補間動畫工具庫：jQueryTween

g4mm 9年前發布 | 38K 次閱讀 其他jQuery插件 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包中。
    • </ul>
    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進行補間動畫。
      • </ul>
      使用方法

      使用該補間動畫插件首先要引入必要的依賴文件。你可以使用AIO包（all in one）。</span>

      1. <script type="text/javascript" src="../assets/js/jQueryTween-aio-min.js">  
        2. </ol> </div> 復制代碼 </div>
        或者使用單獨的文件。</span>

        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">  
          4. </ol> </div> 復制代碼 </div>
          調用插件
          </span>
          基本的調用方法：</span>

          1. $('#selector').jQueryTween(options,callback,special);         
            2. </ol> </div> 復制代碼 </div>
            注意：最好使用一個jQuery ID選擇器來執行補間動畫。</span>
            </span>
            高級例子</span>

                // Complex example jQueryTween syntax
    $('#selector').jQueryTween({
        from: {
            opacity: 1,
            translate: {x:0, y:0, z:0},
            rotate: {x:0, y:0, z:0},
            scale: 1
        },
        to: {
            opacity: 0.5,
            translate: {x: 150, y: 50, z: -100},
            rotate: {x: 5, y:15, z:-25},
            scale: 1.5
        },
        repeat: 2, // can be number or 'Infinity'
        duration: 1500,
        easing: TWEEN.Easing.Exponential.InOut, // my favorite
        delay: 500,
    }, function() {
        //do some cool stuff when tween finished animating
    }, function() {
        //do some cool stuff while tween is running
    });


            ScrollTo補間動畫

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


            補間動畫控制</span>

            // stops all the object's tweens
$('.selector').stop();
// pauses all the object's tweens
$('.selector').pause();
// resumes all the object's tweens
$('.selector').play();


            via:http://www.htmleaf.com/jQuery/Layout-Interface/201504221720.html</span>

           本文由用戶 g4mm 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
           轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
           本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

          相關經驗

          相關資訊

          相關文檔