Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

yamanoku
アクセシビリティはねぇ大事なんですよ
https://yamanoku.net
crowdworks
21世紀の新しいワークスタイルを提供する日本最大級のクラウドソーシング「クラウドワークス」のエンジニアチームです!
https://crowdworks.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした