Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
367
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Organization

アニメーション最強のVelocity.jsの使い方

はじめに

今話題のVelocity.jsについて初歩の初歩だけまとめました。

※追記:↓対抗馬のanime.jsについて記事書きました※
アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装!

Velocity.jsとは

jQueryのプラグイン。
$.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。

アニメーション技術補足

jQuery Animation

便利だが重い。コマ落ちし過ぎ。

CSS Transition, CSS Animation

軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。
結局、JavaScriptを頼らないと使い物にならないことが多い。

Transit.js

有名なアニメーションライブラリのひとつであるjQueryプラグイン。
CSS Animationを制御しているため、軽快。
そして、3d-transformも使えるので表現が豊か。
だが、Velocity.jsにも軽快さは負ける。

Web Animations API

GoogleとMozillaが中心となって策定を進めているが、まだドラフトなのと、対応ブラウザが少ない。

Velocity.js

速い、軽い、便利。
現在、最強(だと思う)

Velocity.jsは、CSSアニメーションを使わずに、JavaScriptのrequestAnimationFrameを使用して、アニメーションさせています。
requestAnimationFrameは、フレーム毎に再描画されるので、jQuery Animationと違いスムーズに描画されます。

使い方

最低限の内容をJavaScriptのコメントに記載。

HTML

<i></i>

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>

CSS

i {display: block; width: 50px; height: 50px; background: #ccc; position: absolute;}

JavaScript

$('i').velocity(
    {
        width: '100px',
        height: '100px',
        backgroundColor: '#000000',
        translateX: '+=200px',
        translateY: '+=200px'
    }, {
        // Option
        duration: 500, // アニメーション時間
        easing: 'ease-in-out', // イージング : linear, swing, ease, ease-in, ease-out, ease-in-out, [200, 15]
        begin: function(){console.log('start');}, // or null
        progress: null, // 進捗率
        complete: function(){console.log('end');}, // or null
        loop: 1, // 繰り返し : or false
        delay: 0, // 開始、ループ時に遅延させる Ex.1000
        display: 'none' // 表示・非表示 : false, 'none', 'block'
    }
);

// 省略記法
// $('i').velocity({...}, 500, 'ease-in-out'); 

// チェーンで繋ぐことも可能
// $('i')
//    .velocity({...}, 500, 'ease-in-out')
//    .velocity({...}, 500, 'ease-in-out'); 

jQuery無し版

jQueryを入れなくても使えます。

Velocity(document.querySelector('i'), {...});

上記のようにVelocity(DOM指定, {アニメーション指定})と書きます。

参考URL

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
367
Help us understand the problem. What are the problem?