アーカイブ

Velocity.js 一時停止・再生機能に​ついて

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

Velocity.js

Velocity.js、アニメーションさせる際にはCSS で動かすよりも圧倒的パフォーマンスを出すことで非常に便利なのですが、とある機能の日本語情報が見受けられなかったのでここに記載します!

一時停止 → 再生機能

stop()メソッドはあるのですが、いわゆる「一時停止 → 再生」するもののドキュメント情報が公式サイトがありませんでした(しかも stop()だと完全停止しちゃう)。

Github の Issue で「一時停止・再生機能つけてくれ頼む」という話はあったのですが、肝心の作者がやる気を喪失していたので、本人からの実装には期待が0になり、以下のようなテクニカルであまり汎用的ではない方法で一時停止・再生する機能をつけるようにやっていました。

See the Pen Velocity.js - Pause/Resume animation by William Lindner (@wlindner) on CodePen.

https://codepen.io/wlindner/pen/ykIzw

google 日本語検索でもそれに関する記事は見受けられませんでした。

しかし、1人の Contributior の活躍により 2016 年 11 月に一時停止・再生機能が実装されました

実装例

$(function () {
  $('.hover').velocity(
    {
      scale: [1, 0.6],
    },
    {
      duration: 1500,
      complete: function () {
        $(this).velocity(
          {
            scale: [0.6, 1],
          },
          {
            duration: 1500,
            loop: true,
          },
        );
      },
    },
  );
  $('.hover').hover(
    function () {
      $(this).velocity('pause');
    },
    function () {
      $(this).velocity('resume');
    },
  );
});

デモ

https://jsfiddle.net/g09jkr80/1/

demo

得られた教訓

公式ドキュメント、アップデート情報はちゃんと調べてちゃんと読もう!!!!!

以上学びでした。

余談ですが React 用の velocity.js プラグインがあります

https://github.com/twitter-fabric/velocity-react

おっきなとこが管理してるので安心 ☺

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップへ戻る