Go to Qiita Advent Calendar 2024 Top
LoginSignup
201
185

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ryokkkke

2020年中期のWebアニメーション実装の全容と方法70選

Last updated at Posted at 2020-07-22

概要

Webページでアニメーションを実装しようとしたときに、どんな方法があるのかまとめる。
今回は「実装したい特定のアニメーションにとって良い方法とは」ではなく、Webのアニメーション全般に対する知見を深める目的。
このアニメーションどうしようかなと思ったときに見返せるように。

  • 方法
  • 参考リンク
  • 特徴のコメント
  • 実際の例

などを書く構成になっています。

パッとググって出てくるライブラリは網羅したはず。
ライブラリの細かい使い方についてはそれぞれ紹介している記事がいっぱいあるので、ここでは特徴をメモ程度に。
スター数や最終更新日は執筆時点のもので、こまめに更新する予定はありません。
目安程度で実際の値は実際にGitHubをご確認ください。

パフォーマンスについてはスコープ外です。

アニメーションの調査方法について

既存サービス/サイトのアニメーションに何が使われているか調べる方法としてChrome devtoolsにAnimationという機能があります。

スクリーンショット 2020-07-18 17.19.30.png
（Animationsが出ていない場合は左の3点メニューから選ぶ）

これを開いた状態でページでアニメーションが発生すると、アニメーションを保存してくれます。

スクリーンショット_2020-07-18_19_46_46.png

アニメーションが発生している要素はどれか判別したり、再生スピードを遅くして再生したりすることができます。

DOM Breakpoints

さらに、例えばTwitterのいいねの場合、アニメーションするハート要素がアニメーションが始まると同時に追加され、終わると同時に消えます。
そうすると上の画像のように要素が存在しないためセレクタの色が灰色になり押しても要素が見つけられません。

そこでDOM Breakpointsが使えます。
DOM Breakpiontsはコードのブレークポイントと同じで、DOMの変化をステップ実行できる機能です。
Twitterのいいねの例で言えば、アニメーション時に追加される要素の親要素にブレークポイントを設定すると、アニメーション発生時にステップ実行することができます。

スクリーンショット 2020-07-18 19.53.05.png 今回は子孫要素への変更なので、subtree modificationsを選びます。

Animationsを開いた状態でDOM Breakpointsありで実行すれば、すぐに消えてしまう要素もじっくり観察することが出来ます。

Webのアニメーション実装の3分類

ここから本題。

  1. 動画ファイルを使う
  2. CSSを使う（画像使うことも）
  3. JSを使う（画像・CSSを使うことも）

上がより静的、下がより動的なイメージ。
基本はこれしかないものの、この中でも非常に多彩な方法が編み出されてる。

方法

動画ファイルを使う編

素材が用意できれば一番簡単。
実際のDOM要素をアニメーションさせたい時には使えない。

  • ちょろっとした部品っぽい要素
  • 他の要素に依存しない要素

に向いてる。

GIFファイルを使う

ローディングインジケータ（ロード中のぐるぐる）とかはありがちですね。
例えばGitHubのローディングインジケータはGIF画像です。

（CSSを切って画像だけを表示した状態）:arrow_down:
github-li.gif

ほぼ対応してるので対応しているブラウザのことを考えなくて良いのは非常に大きなメリット。

WebPファイルを使う

WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし - アイデアマンズブログ

そろそろSafariも対応するらしいので、仕様の強さから言ってもう全部（実写系も色数少ない系もアニメーションも）WebPにしてくれ〜という感じ。
今はまだ後方互換を考えないといけないけど。

画像の後方互換を考える時には、pictureタグが使える。
<picture>: 画像要素 - HTML: HyperText Markup Language | MDN

<!-- MDNのページよりコピペ -->
<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

pictureタグはimg要素のsrc属性の値を条件に従って変更する要素。
sourceのtypeにフォーマットを指定することで、それが対応しているブラウザの場合はそれが読まれる。
このpictureタグは[IE以外主要ブラウザで対応している](Can I use... Support tables for HTML5, CSS3, etc)ので、基本的にwebpを用意しない技術的な理由はないはず！

APNGファイルを使う

Animated PNG graphics | MDN
Animated PNG - Can I use... Support tables for HTML5, CSS3, etc

Animated PNGの略。
GIFの次世代として開発された。IE以外は対応している。
透過が扱えたり扱える色数が多かったり。

APNGでイラストやアイコンを動かそう！～AdobeAnimateの使い方～ – 東京のホームページ制作 / WEB制作会社 BRISK

WebPとAPNGの歴史について：アニメーション画像の歴史 APNG-WebP戦争 | 味わい尽くせ！
面白いですね、WebPも全ブラウザで対応になった今、APNGはこれからは先細りかなー

WebMファイルを使う

HTML の音声と動画のメディア形式 - HTML: HyperText Markup Language | MDN
WebM - Can I use... Support tables for HTML5, CSS3, etc

動画コーデックとしてVP8・VP9、音声コーデックとしてVorbis・Opusが使用できるコンテナ。
動画では珍しく背景透過に対応しているが、Safariが対応していない。
あまり話題に上がらない気がする。

MP4ファイルを使う

お馴染みの動画コンテナ。背景透過はできない。
videoタグのplaysinline属性とmuted属性を使うことでいわゆる動画プレイヤーではなくGIFのようにインラインで再生できるが、例えばiPhoneのコントロールセンター（上とか下とかからスワイプで出てくるメニュー）はWebページ内でMP4が再生されているとシーカーが表示してしまうことに注意。

<video>: 動画埋め込み要素 - HTML: HyperText Markup Language | MDN

CSSを使う編

animationやtransitionプロパティのみを使う

CSSではプリミティブで非常にベーシックな方法。
パッと思いつく軽量なアニメーション（単純に要素を移動させるなど、いくつかのプロパティの値を一定規則で変化させれば表現できるもの）はこれだけでも実現可能。

SVGをCSSでアニメーションさせる

SVGにも、animationやtransitionが使える。

SVGをSMILでアニメーションさせる

マークアップのみで完結するので手軽。
ただし一度Chromeで非推奨になりかけたりしているようなので、あえて使うメリットはそこまで感じられない。
【SMIL】SVGアニメーションでsvgのキャラ画像を動かそう！ | webico blog

CSSスプライト + steps

  • CSSスプライト

    • 細かい画像を一つの画像ファイルに結合して、表示位置と表示領域を変えることでそれぞれの画像を表示する手法。HTTPリクエストが1回で済むのでオーバーヘッドが少なく速度などパフォーマンス改善のために行われる。

  • steps

    • CSSにおけるstepsとはタイミングファンクションの一種。

この二つを組み合わせると、画像とCSSだけでパラパラ漫画の仕組みでアニメーションを実装できる。

例えばTwitterのいいねのアニメーションはこの方法を使用している。
Twitterのハートマーク機能こと「いいね」のエフェクトがどうなっているのか調べてみた

現在のいいねの実装はこちらの記事ともまた少し変わっていて、

スクリーンショット 2020-07-18 16.18.46.png https://abs.twimg.com/responsive-web/web/heart_animation.5c9f8e84.png

パーティクルのアニメーションはCSSスプライト + stepsを使い、赤いハート部分はSVGをCSSでアニメーションさせる混合技になっていました。

CSSライブラリ

ここからはCSSライブラリ。
任意の要素にクラスを付与するだけでアニメーションを実装できる。
もちろん、動的にアニメーションの再生を制御したい場合は、任意のタイミングでのjsによるクラスの追加/削除の処理を書く必要はある。

Animate.css

Animate.css
animate.css/ at master · animate-css/animate.css
スター数 67.4k
最終更新日 8日前

パワポのアニメーションみたいなのを簡単に実装できる。
知名度的に言っても、まずは自分が実装したいアニメーションがこれにあるかどうか確認すると良さそう。
公式サイトで動きを確認できる。

HoverCSS

Hover.css - A collection of CSS3 powered hover effects
スター数 23k
最終更新日 5日前

マウスをホバーさせた時のアニメーションを簡単に実装できる。
主にクリッカブルなボタンなどに使う想定。
基本的なホバー系のアニメーションが実装したかったらまずはこれを確認。
公式サイトで動きを確認できる。

imagehover.css

Imagehover.css - A Pure CSS Image Hover Effect Library | imagehover.css
ciar4n/imagehover.css: Pure CSS Image Hover Effect Library
スター数 1.5k
最終更新日 1年前

こちらもマウスホバー時のアニメーションだが、画像に関するアニメーション特化。
フリーで使用できるエフェクトに加えて、有料でさらに購入することもできる。
公式サイトで動きを確認できる。

Magic

Magic Animations CSS3
miniMAC/magic: CSS3 Animations with special effects
スター数 6.6k
最終更新日 8日前

ちょっと見たことないようなin/out系のアニメーションが豊富。
変わった立体的なアニメーションなどもあるので、公式サイトで確認しよう。

CSShake

CSShake
elrumordelaluz/csshake: CSS classes to move your DOM!
スター数 4.2k
最終更新日 5日前

震える系アニメーション。
公式サイトを見ていると思わず笑ってしまう、めっちゃ震えている。

cssanimation.io

CSS Animation Library for Developers and Ninjas - cssanimation.io
yesiamrocks/cssanimation.io: CSS Animation Library for Developers and Ninjas
スター数 152
最終更新日 7ヶ月前

かなり変わったアニメーションがかなりたくさん含まれている。
使いこなすのは難しいが、ああそれね、みたいなありきたりなアニメーションに飽きた方は是非見て欲しい。

Tuesday

https://shakrmedia.github.io/tuesday/
shakrmedia / tuesday：Shakrによる風変わりなCSSアニメーションライブラリ
スター数 434
最終更新日 1ヶ月前

quirky な（奇妙な、風変わりな）CSSライブラリ。in/out系が多い。
quirky と言いつつ割とよく見るアニメーションが含まれていて、特徴としてはアニメーションの持続時間が短いこと。
既存のアニメーションのCSSライブラリが持続時間が長いことに違和感を覚え作成されたそう。

Wicked CSS

Wicked CSS3 Animations
kristofferandreasen/wickedCSS: A library for CSS3 animations. The animations are more vibrant than most simple animations.
スター数 263
最終更新日 5年前

こちらも同様に基本的なアニメーションが含まれている。
公式サイトの動くキノコがつぶらな瞳をしている。

Hamburgers

Hamburgers by Jonathan Suh
jonsuh/hamburgers: Tasty CSS-animated Hamburgers
スター数 5.9k
最終更新日 2年前

ハンバーガーメニューのアイコンをタップした時のアニメーション。
ハンバーガーメニューでアニメーションしたければとりあえず覗いて見ると良さそう。

JSを使う編

以降はライブラリのリスト。

Web Animations API

Web Animations API を利用する - Web API | MDN
Animation API - Can I use... Support tables for HTML5, CSS3, etc

今までCSSのanimationで実装していたものをjsで実装できるようにする仕様。
だいたいのブラウザで対応済み。
CSSでのアニメーションと違って、タイミングや終了イベントなど細かい制御がjsで可能になる。
標準が好きな方はまずこちら。

polyfillもあるので一応紹介。

Web Animations Demos
web-animations/web-animations-js at 866e01726cf61ffeabad2baa7f6c10e3cadee138
スター数 3.4k
最終更新日 3年前
jQuery依存 なし
canvas 非使用

汎用系

Anime.js

anime.js • JavaScript animation engine
juliangarnier/anime: JavaScript animation engine
スター数 36.1k
最終更新日 4ヶ月前
jQuery依存 なし
canvas 非使用

CSS、要素、SVGなどをいい感じに変化させてアニメーションを実装できる。
軽量で、シンプルなAPIを持つ。
とりあえず凝ったアニメーション作りたくなったら使いたい。

GreenSock GSAP（Tweenmax）

GSAP - GreenSock
greensock/GSAP: GreenSock's GSAP JavaScript animation library (including Draggable).
スター数 11.1k
最終更新日 3日前
jQuery依存 なし
canvas 非使用
ライセンス not MIT

数年前のアニメーションライブラリのデファクトスタンダード的存在。
CSS Versus JavaScript Animations  |  Web Fundamentals

Alternatively, if you're already using a JavaScript framework that includes animation functionality, such as via jQuery's .animate() method or GreenSock's TweenMax, then you may find it more convenient overall to stick with that for your animations.

Googleのドキュメントでも言及されていることからデファクト感が伺える。

ただし、ライセンスがMITではないことに注意。
ライセンス-GreenSock
基本は無料だが、サイト上で何らかの有料課金が存在する場合は有料ライセンスが必要。

Kute.js

KUTE.js | JavaScript Animation Engine
スター数 2k
最終更新日 18日前
jQuery依存 なし
canvas 非使用

汎用的で高機能なアニメーションライブラリとしてのポジション。
スター数の少なさが少し気にかかるか。
2,3年前に話題に上がって以来あまり言及が見当たらない。

Lottie

Lottie
airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
スター数 21.4k
最終更新日 2日前
jQuery依存 なし
canvas 非使用

AirBnB製で、After EffectsのアニメーションをサクッとWeb上に実装できる。
マルチプラットフォームなので、Web以外でも使える。

CreateJS

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
CreateJS
スター数 合計で17kくらい
最終更新日 6日前
jQuery依存 なし
canvas 使用

4つの大きなライブラリからなり、canvas描画を中心とした処理をサポートする。
かなりしっかりとしたライブラリで、canvasで何かしら凝ったことをやりたいのであれば必見。
日本語の情報がかなり多い。

Tween.js

tweenjs/tween.js: Javascript tweening engine
スター数 7.5k
最終更新日 2ヶ月前
jQuery依存 なし
canvas 非使用

簡単なアニメーション用の軽量なライブラリ。
Understanding Tween.js - Michael Casebolt
基本的にやっていることはタイミングファンクション（easingとか）に沿ってjsのオブジェクトの値を変化させること。
直接アニメーションに使わなくても、ゲームの時間に伴う値調節とかに使えたりするんかなー

Animate Plus

bendc/animateplus: A+ animation module for the modern web
スター数 5.5k
最終更新日 2年前
jQuery依存 なし
canvas 非使用

安定した60 FPSを実現し、重量が3 KB（縮小および圧縮）未満であることを目的としているため、特にモバイルに適しています。
DOMアニメーションに加えてSVGもいけるようだ。

アニメーションの型が決まっている系

Bounce.js

Bounce.js
tictail / bounce.js：CSS3を使った美しいアニメーションをすぐに作成できます。
スター数 6.1k
最終更新日 6年前
jQuery依存 なし
canvas 非使用

バウンドするようなアニメーションを簡単に作成できるツール、及びライブラリ。
公式サイトではGUIで任意のアニメーションを作成し、Export CSSをクリックすることでそのアニメーションの単体のCSSコードが生成できる。

AniJS

AniJS, A Library to Raise your Web Design without Coding
anijs/anijs: A Library to Raise your Web Design without Coding.
スター数 3.6k
最終更新日 5年前
jQuery依存 なし
canvas 非使用

要素のdata-anijs属性で以下のような指定をすることでjsのコードなしである程度の動的なアニメーション制御ができる。

<div data-anijs="if: click, do: flipInY animated, to: .container-box></div>

扱えるアニメーションはAnimate.cssと同じもの。
Animate.cssをサクッと動的に制御したい場合は使うと良いかも。

Swiper

Swiper - The Most Modern Mobile Touch Slider
nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions
スター数 24.3k
最終更新日 6日前
jQuery依存 なし
canvas 非使用

スワイプ動作（PCの場合はドラッグ）におけるカルーセルの切り替わりアニメーションを実装できる。
実際にスマホで公式サイトを見てみると、スワイプに対してネイティブばりのヌルヌル感でアニメーションする様が体験できる。

wagerfield/parallax.js

http://matthew.wagerfield.com/parallax/
wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device
スター数 14.8k
最終更新日 13ヶ月前
jQuery依存 なし
canvas 非使用

端末のジャイロの値に合わせて動くアニメーションを実装できる。
っぽいのだが、自分のiPhoneXでは動かなかった...
更新が数年前に止まっているので、最新のデバイスで動くかどうかは要注意。

pixelcog/parallax.js

Parallax.js | Simple Parallax Scrolling Effect with jQuery
pixelcog/parallax.js: Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
スター数 3.3k
最終更新日 2年前
jQuery依存 あり
canvas 非使用

非常にわかりにくいんですがparallax.jsという名前のライブラリ2つ目。
どちらかというと日本語で言うパララックスに近いのはこっちだと思う。
スクロールしたときにスクロールの速度とは別の速度で動く要素があるタイプのデザインを実装できる。

Slick

slick - the last carousel you'll ever need
kenwheeler/slick: the last carousel you'll ever need
スター数 25.8k
最終更新日 8ヶ月前
jQuery依存 あり
canvas 非使用

カルーセルをいい感じに実装できるライブラリ。
公式サイトの例はいい感じ。jQuery...

Popmotion

Popmotion | JavaScript animation libraries for delightful interfaces
Popmotion/popmotion: Simple animation libraries for delightful user interfaces
スター数 17.7k
最終更新日 3ヶ月前
jQuery依存 なし
canvas 非使用

いくつかのライブラリの総称でもあるし、その中に単体のPopmotionというライブラリも含まれている。

Popmotion Pure

popmotion/packages/popmotion at master · Popmotion/popmotion
Popmotion Pure | A functional, flexible JavaScript animation library

ここに列挙されているようなアニメーションは自分で作ろうとすると超ツラいと思う。
慣性っぽい動きを実装したい場合は覗くと良さそう。

他にもあるけど、総じて記述が少ないw

Typed.js

JavaScript Animated Typing with Typed.js | by Matt Boldt
mattboldt/typed.js: A JavaScript Typing Animation Library
スター数 9.8k
最終更新日 10ヶ月前
jQuery依存 なし
canvas 非使用

タイピングしているようなアニメーションを実装できる。

Animsition

Animsition
blivesta/animsition: A simple and easy jQuery plugin for CSS animated page transitions.
スター数 3.8k
最終更新日 3年前
jQuery依存 あり
canvas 非使用

ページ遷移の前後にアニメーションを入れることができる。

turn.js

Turn.js: The page flip effect in HTML5
blasten/turn.js: The page flip effect for HTML5
スター数 6.2k
最終更新日 7年前
jQuery依存 あり
canvas 非使用
ライセンス not MIT

本のページをめくっているかのようなアニメーションを実装できる。
ライセンスがMITではないことに注意。商用利用は不可。
https://github.com/blasten/turn.js/blob/master/license.txt
v4は別のライセンスのようだが何になるのか見つけられなかった。

スクロール系

AOS

AOS - Animate on scroll library
michalsnik/aos at v2
スター数 13.3k
最終更新日 2年前
jQuery依存 なし
canvas 非使用

スクロールに応じて発火するアニメーションを簡単に実装できる。
公式サイトをスクロールするとすぐ分かる。
v1とv2で破壊的変更が入っているようなので注意。

wow.js

wow.js — Reveal Animations When Scrolling
graingert/WOW: Reveal CSS animation as you scroll down a page

これもスクロール時に発火するアニメーションですが、GitHub上には「一時的な非推奨、AOSを推奨」と書かれている。
一時的な非推奨...
よく見るとこのレポジトリforkされたもので、元のレポジトリはwow.jsを有料ソフトウェアとして販売している。
どうも過去のQ&Aサイトとかの会話を見るに、MITライセンスだったレポジトリを途中で有償化したらしい。
それに反発した人がMITライセンスでforkして公開したという流れのようだ。
AOS推奨となっているし、現時点でこれを使う理由は無いだろう。

ScrollMagic

ScrollMagic ♥ Demo
janpaepke/ScrollMagic: The javascript library for magical scroll interactions.
スター数 12.4k
最終更新日 8ヶ月前
jQuery依存 なし
canvas 非使用
ライセンス MIT or GPL

スクロールに同期した任意のアニメーションを実装できる。
ライセンスはMIT or GPLでMITがあるので問題なし。

実際のアニメーションの実装にGSAPを推奨しているが、GSAPはライセンスがMITではないことに注意。
Velocity.jsにも対応している他、他ライブラリを使わない方法（jsによるクラスの付け替え）でもOK。

ScrollReveal

ScrollReveal
jlmakes/scrollreveal: Animate elements as they scroll into view.
スター数 18.9k
最終更新日 6日前
jQuery依存 なし
canvas 非使用
ライセンス not MIT

viewportに入った/出た際のアニメーションを簡単に実装できる。
ただし、ライセンスがMITではないことに注意。
OSSプロジェクトではGPLライセンスだが、商用の場合はコマーシャルライセンスが必要。

ScrollTrigger

ScrollTrigger - Let your page react to scroll changes
terwanerik/ScrollTrigger: Let your page react to scroll changes.
スター数 3.3k
最終更新日 7ヶ月
jQuery依存 なし
canvas 非使用

スクロールに合わせて発火する処理を簡単に制御できる。
これ自体はアニメーションではないが、基本的にスクロールに合わせて発火する処理はアニメーションがほとんどだと思うので紹介。
これとその他のアニメーションライブラリを合わせると良さそう。

DynCSS

DynCSS - Simple dynamic CSS rules to give life to your sites.
vzaccaria/DynCSS: Dynamic CSS Rules
スター数 483
最終更新日 6年前
jQuery依存 あり
canvas 非使用

スクロールやウィンドウのリサイズイベントに合わせたアニメーションを実装できる。
CSSに独自のプロパティを書くとjsがそれを解釈してなんやかやしてくれる、というなかなかにトリッキーな仕組みのよう。

jQuery依存な汎用系

Velocity.js

Velocity.js
julianshapiro/velocity: Accelerated JavaScript animation.
スター数 16.7k
最終更新日 3ヶ月前
jQuery依存 あり
canvas 非使用

jQuery依存のアニメーションライブラリとして優秀な様子。
https://qiita.com/kyota/items/754e0e6cb7a144eda850

Transit.js

Transit - CSS transitions and transformations for jQuery
rstacruz/jquery.transit: Super-smooth CSS3 transformations and transitions for jQuery
スター数 7.4k
最終更新日 5年前
jQuery依存 あり
canvas 非使用

jQuery依存のアニメーションライブラリだが、Velocity.jsの方が軽快に動くという評判が多い。

SVG系

Snap.svg

Snap.svg - Home
adobe-webplatform/Snap.svg: The JavaScript library for modern SVG graphics.
スター数 12.8k
最終更新日 3年前
jQuery依存 なし
canvas 非使用

Adobe製のSVGアニメーションライブラリ。
DOMのjQuery、SVGのSnap、的な立ち位置を目指していた様子。
SVGを細かく動かしたいなら使ってみると良さそう。

DrawSVG

jQuery DrawSVG
lcdsantos/jquery-drawsvg: Lightweight, simple to use jQuery plugin to animate SVG paths
スター数 752
最終更新日 4年前
jQuery依存 あり
canvas 非使用

jQueryプラグインとしてのSVGアニメーションの実装ライブラリ。

Vivus

vivus.js - svg animation
maxwellito/vivus: JavaScript library to make drawing animation on SVG
スター数 13.1k
最終更新日 11ヶ月前
jQuery依存 なし
canvas 非使用

SVGをアニメーションさせるライブラリ。
jQueryじゃないし比較的最近更新されてるしスター数もそれなりに多い。
SVG動かしたかったらmo.jsかこれかなあ。

Mo.js

mo.js
mojs/mojs: The motion graphics toolbelt for the web
スター数 15.9k
最終更新日 3ヶ月前
jQuery依存 なし
canvas 非使用

非常に滑らかなアニメーションをSVGで実現する。
Animocons: Animated Icons with mo.js | Codrops
リンク切れ起こしてる部分もあるので古いですが、このmo.jsを使用したサンプルはめっちゃ気持ち良いです。
日本語の情報も多そう。

Two.js

Two.js
jonobr1/two.js: A renderer agnostic two-dimensional drawing api for the web.
スター数 6.7k
最終更新日 1日前
jQuery依存 なし
canvas 非使用

フラットモーショングラフィックスの作成を想定したライブラリ。
SVGもcanvasもWebGLも同じAPI描画できるようだ。
どうやらAppleがApple Watchのページで使っていたらしい。

bonsai.js

BonsaiJS - A Graphics Library
uxebu/bonsai: BonsaiJS is a graphics library and renderer
スター数 2k
最終更新日 6年前
jQuery依存 なし
canvas 非使用

SVGの他、音声やフォントなども使えるよう。
公式サイトのサンプルが動いてないのは気になる。
古めなので動作するかどうかは要確認。

Raphaël.js

Raphaël—JavaScript Library
DmitryBaranovskiy/raphael: JavaScript Vector Library
スター数 10.7k
最終更新日 1ヶ月前
jQuery依存 なし
canvas 非使用

SVGと、VMLに対応したライブラリ。
クロスブラウザを意識していて、IEでも動くようだ。
VMLはSVGの前身。
Vector Markup Language - Wikipedia

flubber

veltman/flubber: Tools for smoother shape animations.
スター数 5.3k
最終更新日 9ヶ月前
jQuery依存 なし
canvas 非使用

SVGで特定の形から特定の形へとスムーズに変化させるアニメーションを実装できる。

SVG Morpheus

SVG Morpheus - Morph SVG icons
alexk111/SVG-Morpheus: JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions. (THIS PROJECT IS NOT MAINTAINED ANYMORE)
スター数 2.6k
最終更新日 3年前
jQuery依存 なし
canvas 非使用

SVGの二つのアイコンをにゅっとしたアニメーションで変更するアニメーションを実装できる。

THIS PROJECT IS NOT MAINTAINED ANYMORE
とのこと。

Walkway

Connor Atherton | Full stack developer
ConnorAtherton/walkway: An easy way to animate SVG elements.
スター数 4.3k
最終更新日 2年前
jQuery依存 なし
canvas 非使用

https://www.polygon.com/a/ps4-review/
このサイトのアニメーションを再現するために作られた。
SVG画像をアニメーションさせる。
公式サイトにはGUIツールも存在。

Lazy Line Painter

Lazy Line Painter
camoconnell/lazy-line-painter: Lazy Line Painter - A Modern JS library for SVG path animation
スター数 1.8k
最終更新日 2年前
jQuery依存 なし
canvas 非使用

SVGのパスアニメーションを実装できる。

letterbolt

buseca.github.io/letterbolt/
buseca/letterbolt
スター数 29
最終更新日 6年前
jQuery依存 なし
canvas 非使用

アニメーションするフォントをSVGで描画できる。

zPath.js

ZetCoby/zPath.js: A jquery plugin that will animate/draw SVG
スター数 29
最終更新日 5年前
jQuery依存 あり
canvas 非使用

Yallow

Yarrow — svg animated arrow pointer and tooltip
krispo/yarrow: svg animated arrow pointer and tooltip
スター数 35
最終更新日 4年前
jQuery依存 なし
canvas 非使用

矢印のアニメーションをSVGで実装できる。
公式サイトのサンプルが動いていないので動作は要確認。

loading...

Loading...
jxnblk/loading: This could take a while
スター数 3.6k
最終更新日 5年前
jQuery依存 なし
canvas 非使用

ネタレポジトリのようだけど、スター数が多い。
公式サイトが動いていなくて残念...見てみたかった。

WebGL

WebGL API直接

WebGL: Web の 2D および 3D グラフィックス - Web API | MDN
WebGL チュートリアル - Web API | MDN

ライブラリを使わずにそのまま書く。
時間が無限にあったら書きたい。

Three.js

three.js – JavaScript 3D library
mrdoob/three.js: JavaScript 3D library.
スター数 62.2k
最終更新日 5時間前
jQuery依存 なし
canvas 使用

WebGLを使い、3Dを描画するためのライブラリ。
公式サイトの使用例だけで1日つぶせそう。

めちゃくちゃ個人的な話だが、アプリでめっちゃプレイしていたクロッシーロードが公式サイトの中の例に並んでいて、Webでクロッシーロードあったんか！という感動でこれを書きながら数分プレイしてしまった。
Three.jsありがとう。

Webで3Dをやろうと思ったらとりあえずこれを使えば良さそう。

GrimoireJS

Grimoire.js - WebGL framework for Web development -
GrimoireGL/GrimoireJS: A WebGL framework for Web development.
スター数 333
最終更新日 3年前
jQuery依存 なし
canvas 使用

DOMとDOM APIっぽい書き方（独自のタグでマークアップするなど）でWebGLを実装できる。
どうでもいいけど、アイコンがbrowserifyを思い出すよ。
公式のサンプルが動いてない:cry:

React

React Transition Group

React Transition Group
reactjs/react-transition-group: An easy way to perform animations when a React component enters or leaves the DOM
スター数 7.4k
最終更新日 6日前
jQuery依存 なし
canvas 使用

React公式のアニメーションライブラリ。

react-motion

chenglou/react-motion: A spring that solves your animation problems.
スター数 18.6k
最終更新日 8ヶ月前
jQuery依存 なし
canvas 使用

RenderPropsな書き方で、Reactコンポーネント内の値を変化させる。
イメージ的にはTween.jsのReact版という感じ。

react-spring

react-spring
react-spring/react-spring: ✌️ A spring physics based React animation library
スター数 17.6k
最終更新日 3ヶ月前
jQuery依存 なし
canvas 使用

spring-physics based animation
を提供するReact用アニメーションライブラリ。
従来のタイミングファンクション系の動きとは考え方が違うらしい。
react-motionやanimatedの良いとこどりをしているそう。

Animated

animatedjs/animated: Declarative Animations Library for React and React Native
スター数 1.7k
最終更新日 2年前
jQuery依存 なし
canvas 使用

framer/motion

Framer Motion
framer/motion: Open source, production-ready animation and gesture library for React
スター数 6.1k
最終更新日 8時間前
jQuery依存 なし
canvas 非使用

React環境下において、アニメーションを宣言的に実装できる。
Popmotion系列。
宣言的にアニメーションを定義できるので、例えばstateがtrueからfalseに変わったときに要素の位置が変わる、みたいなコンポーネントでこれを使うとReactと親和性高くアニメーションを実装できる。
これ個人的に、公式サイトのファーストビューの例のアニメーションが非常に秀逸だと思う、パッと見でそのstateの変更とアニメーションっていう繋がりがわかりやすい。
日本語の情報は少なそうだけど、Reactで書くときにアニメーション欲しくなったらまず使ってみたい。

Pose

Pose | A truly simple animation library for React, React Native, and Vue
popmotion/packages/popmotion-pose at master · Popmotion/popmotion

Popmotion系列のReact用アニメーションライブラリ。
実装のサンプルコードを見るとstyled-componentsっぽさを感じる。

velocity-react

google-fabric/velocity-react: React components for Velocity.js

Fabric製のVelocity.jsをReactで使うためのライブラリ。

その他ツール

アニメーションジェネレータ

その他

コピペで出来る系

その他の参考

ありがとうございます🙌

201
185
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
201
185

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?