使用veloticy-ui生成文字動畫

時間 2019-11-06

標籤使用 veloticy 生成文字動畫简体版

原文原文鏈接

前言

最近要實現一個相似文字波浪線的效果，使用了velocity-ui這個動畫庫,第一個感受就是使用簡單，代碼量少,性能優異,在此簡單介紹一下使用方法，並實現一個看上去不錯的動畫.
具體使用方法能夠點擊這裏css

基本使用

要使用 velocity-ui 須要先引入velocity,其中velocity能夠是依賴jquery,也能夠不依賴jquery，具體看一下下面就好了html

//不依賴jquery，第一個參數爲原生js的dom選擇器
Velocity(document.getElementById("dummy"), {
    opacity: 0.5
}, {
    duration: 1000
});

// 使用 jQuery 或 Zepto 時
$("#dummy").velocity({
    opacity: 0.5
}, {
    duration: 1000
});

能夠看出在使用jquery時,velocity的基本使用就像jquery的animate,引入 velocity-ui 的jquery

目的就是提供一些已經定義好的動畫(指令),有一點像Animate.css這樣的動畫庫,可是能夠提供web

更細緻的控制,spring

基本配置項

$element.velocity({
    width: "500px",        // 動畫屬性 寬度到 "500px" 的動畫
    property2: value2      // 屬性示例
}, {
    /* Velocity 動畫配置項的默認值 */
    duration: 400,         // 動畫執行時間
    easing: "swing",       // 緩動效果
    queue: "",             // 隊列
    begin: undefined,      // 動畫開始時的回調函數
    progress: undefined,   // 動畫執行中的回調函數（該函數會隨着動畫執行被不斷觸發）
    complete: undefined,   // 動畫結束時的回調函數
    display: undefined,    // 動畫結束時設置元素的 css display 屬性
    visibility: undefined, // 動畫結束時設置元素的 css visibility 屬性
    loop: false,           // 循環
    delay: false,          // 延遲
    mobileHA: true         // 移動端硬件加速（默認開啓）
});

width: ["500px", "300px"]//這樣設置後面的300px會做爲初始默認值

width: ["500px", "spring"，"300px"]//這樣能夠爲單個屬性指定緩動函數

width: function (index, total) {}//對集合對象能夠設置不一樣的屬性值

能夠看出velocity也能夠設置quequ,使用和animate是一致的,並且velocity自身提供一些指令來實現動畫,有fadeIn/fadeOut, slideUp/slideDown,
scroll,finish,reverse,除此之外velocity實現了對transform, color這些屬性動畫的支持,並支持SVG和promise,具體使用能夠看上面連接的文檔。segmentfault

velocity-ui 除了提供更多的指令外,還提供了兩個方法 RunSequence 和 RegisterEffect(非jquery能夠去掉$.,把jquery換爲原生DOM)數組

// 將嵌套動畫序列儲存到一個數組裏，很清晰的顯示了它們的執行順序
var mySequence = [
    { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
    { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
    { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];

// 調用這個自定義的序列名稱 還能夠在其餘地方複用
$.Velocity.RunSequence(mySequence);

// name：動畫特效名稱 爲字符串類型
// defaultDuration：默認動畫執行時間 單位爲毫秒(ms)
// calls：動畫隊列數組，property - 動畫屬性，durationPercentage - 當前動畫所佔總時間的百分比 (寫成浮點數)，option - 選項
// reset：設置元素在動畫開始時的初始值
$.Velocity.RegisterEffect(name, {
    defaultDuration: duration,
    calls: [
        [ { property: value }, durationPercentage, { options } ],
        [ { property: value }, durationPercentage, { options } ]
    ],
    reset: { property: value, property: value }
});

除了以上兩個函數外,還提供了3個額外的options屬性promise

stagger 可讓集合對象依次錯開一段時間執行動畫dom

drag 可讓集合對象的最後一個元素有緩衝效果ide

backwards 可讓集合對象從最後一個元素往前依次錯開一段時間執行動畫

下面就利用 RegisterEffect 和 stagger 實現一個簡單的文字動畫

實現一個自定義動畫

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <title>Document</title>
</head>

<body>
  <h1 id="J_Text">segmentfault</h1>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
  <script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.ui.min.js"></script>
  <script>
    jQuery(function ($) {
      $.Velocity.RegisterEffect('custom', {//註冊一個叫'custom'自定義動畫
        defaultDuration: 1500,
        calls:[
          [{
            rotateY: 360,
            translateY: '-=15',
          }, 0.5],
          [{
            translateY: '+=15',
          }, 0.5]
        ], 
       })
      $('#J_Text').css({
        fontSize: 40,
        color: '#333',
      }) .html(function () {
         return $(this).text().split('').map(function (char) {
        return '<span>' + char + '</span>'; //讓每字符被span元素包裹
      }).join('');
      }).find('span')
      .filter(function (index) {
        return index > 6
      }).css('color', '#009A63').end() //讓後面幾個字符變爲綠色
      .css({
        position: 'absolute',
        left: function (index) {
          return index * 20;  //設置字符的間隔
        }
      })
      .velocity('custom', { //調用自定義的動畫指令
        stagger: 300,
        delay: 1000, 
      })
    })
  </script>
</body>

</html>