動画／アニメーション／キャプチャー [HTML5/JavaScript]

概要

参考：

CSS アニメーションと JavaScript のアニメーションの比較  | Google Developers

Web アニメーションの種類と実装方法 | BACKYARD

Animate your HTML5 | Martin Gorner

Frame by Frame Animation Tutorial with CSS and JavaScript | SitePoint

Web Animations API

参考：

Web Animations API の基本的な使い方・まとめ (defghi1977.html.xdomain.jp)

MediaRecorder

参考：

MediaRecorder() | MDN

SVG animation to video – GitHub Gist

Canvas animation to video – GitHub Gist

drawImage

参考：

Canvas で桜を降らせてみました | 株式会社オーツー スタッフブログ

CanvasRenderingContext2D.drawImage() | MDN

Animating images in HTML5 and canvas – Stack Overflow

requestAnimationFrame

参考：

JavaScript の requestAnimationFrame でアニメーションを自由自在に操る – Qiita

requestAnimationFrame の処理落ちをフレームスキップで対応する | Black Everyday Company

requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net

アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 東京上野の Web 制作会社 LIG

Window.requestAnimationFrame() – 60fps の間隔で繰り返し処理を実行する | DOMリファレンス (SYNCER)

いまさら requestAnimationFrame を理解する | console.lealog();

requestAnimationFrame() で、アニメーションの速度をデバイスの処理速度に依存しないようにする | スターフィールド株式会社

JavaScript でゲームループを作る | t100 のプログラミング脱出作戦

よーしおまえらー、アニメーションに setInterval 使うなよー | くろまほうさいきょうでんせつ

Window.requestAnimationFrame() | MDN

.requestAnimationFrame() | JavaScript 日本語リファレンス (js STUDIO)

JavaScript 実行の最適化 | Google Developers

requestAnimationFrame for smart animating | Paul Irish

Canvas にアニメーションを描画する

参考：

Canvas アニメーションの要点 – Qiita

canvas でアニメーションをコントロール (yay.cla.kobe-u.ac.jp/~jm)

canvas でフェードインのアニメーションを作ってみよう | HTML CSS javascript のまとめ (creakazukin.wp.xdomain.jp)

Basic animations | MDN

Animating images in HTML5 and canvas – Stack Overflow

スプライトアニメーション

参考：

Create a Sprite Animation with HTML5 Canvas and JavaScript | William Malone

SVG アニメーションを動画ファイルに変換する

参考：

SVG animation to video | bl.ocks.org

Animating SVG Artwork with <canvas> and VanillaJS | Thinkful

How to convert animated SVG to GIF | Chris Dermody

Recording and saving an SVG animation as an animated GIF – Stack Overflow

Convert animated SVG to movie – Super User

TweenMax

参考：

TweenMax | GreenSock [Official]

Docs – TweenMax | GreenSock [Official]

Google も推奨！アニメーションライブラリ TweenMax の使い方 入門編 | un-Tech

TweenMax を使ったアニメーション例 – Qiita

CCapture.js

参考：

spite/ccapture.js: A library to capture canvas-based animations at a fixed framerate – GitHub

ccapture.js – npm

gif.js

参考：

jnordberg/gif.js: JavaScript GIF encoding library – GitHub

canvg

参考：

canvg/canvg: Javascript SVG parser and renderer on Canvas – GitHub

svg.js と canvg を使って、SVG タグ内のオブジェクトをクライアント側だけで画像化させてみる – Qiita

canvg を用いた canvas 要素との連携 | svg 要素の基本的な使い方まとめ (defghi1977)

動的 SVG から png を作りたいときは canvg を使う。Image.src 経由だと IE の Security Error が出ちゃう | きんくまデザイン

SVG 画像を canvg で Canvas に変換してみる | はしくれエンジニアもどきのメモ

SVG to Canvas | inkfood

Converting SVG to Canvas to output as image – Stack Overflow

Unable to covert svg to png using canvg – Stack Overflow

Canvas generated by canvg is blurry on retina screen – Stack Overflow

まとめ

参考：

すぐに使えるアニメーション系ライブラリ15選 | AWESOME