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

5194 ワード
アニメーション JavaScript Velocity jQuery JavaScript テキストリンク

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

一時停止 → 再生機能

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

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

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

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

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

しかし、１人の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/

得られた教訓

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

以上学びでした。

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

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

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