Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今どきのWebアニメーション実装
Search
Yohei Isokawa
March 08, 2019
Programming
0
780
今どきのWebアニメーション実装
2019/3/8 新潟グラム2019 vol.1
Yohei Isokawa
March 08, 2019
Tweet
Share
More Decks by Yohei Isokawa
See All by Yohei Isokawa
writer.appを支える技術
yuhiisk
0
870
これからはじめるシングルページアプリケーション
yuhiisk
0
670
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
380
SPA実装最前線 ~今どきのJSフレームワーク選び~
yuhiisk
2
4.8k
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
Agent Rules as Domain Parser
yodakeisuke
1
350
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
780
Use Perl as Better Shell Script
karupanerura
0
660
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.2k
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
970
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
810
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
720
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
抽象データ型について学んだ
ryounasso
0
210
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
410
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Gamification - CAS2011
davidbonilla
81
5.3k
Practical Orchestrator
shlominoach
188
11k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
今どきの Webアニメーション実装 五⼗川 洋平 (POPCORN) 2019.03.08 新潟グラム
五⼗川 洋平(イソップ) 上越の⺠ Twitter:@yuhiisk イソップブログ(https://blog.yuhiisk.com) ⾃⼰紹介
上越TechMeetupよろしくね!
上越TechMeetupよろしくね! https://jtm.connpass.com/event/123149/
上越TechMeetupよろしくね! @teppeis が来るよ!
Webのアニメーション
本⽇のプログラム 実装⽅法の紹介 CSS JavaScript SVG ツールを使ったアニメーション制作 アニメーション制作のポイント
CSS
.scale-transition { transition: transform .3s ease; } CSS Transitions
.animation-scale { &:hover { animation: scaled-animation .3s ease; } }
CSS Animations
.animation-scale { &:hover { animation: scaled-animation .3s ease; } }
CSS Animations keyframe
@keyframes scaled-animation { 0% { transform: scale(1); } 50% {
transform: scale(1.3); } 100% { transform: scale(1); } } CSS Animations
CSSアニメーション お⼿軽 動きが軽い
CSSアニメーション https://daneden.github.io/animate.css/
Spriteアニメーション
None
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション
Spriteアニメーション 技術⼒が無いけど凝った演出をしたい場合 デザイナー主導で作成したいとき
Spriteアニメーション .heart.is-active { overflow: hidden; width: 100px; height: 100px; background:
url(../sprites.png) 0 0 no-repeat; animation: sprite-animation 1.2s steps(28, start); } @keyframes sprite-animation { 0% { background-position: 0 0; } 100% { background-position: -2800px 0; } }
Spriteアニメーション .heart.is-active { overflow: hidden; width: 100px; height: 100px; background:
url(../sprites.png) 0 0 no-repeat; animation: sprite-animation 1.2s steps(28, start); } @keyframes sprite-animation { 0% { background-position: 0 0; } 100% { background-position: -2800px 0; } }
SVG
SVG <svg width="300px" height="100px"> <rect x="0" y="0" width="300" height="100" />
<circle cx="0" cy="50" r="15" fill="blue" /> </svg
SVG パスアニメーション 拡⼤縮⼩に強いためレスポンシブ対応に最適
SVGアニメーション CSS SMIL JavaScript
SVGアニメーション CSS SMIL JavaScript
SMIL <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributeName="cx"
from="0" to="100" dur="5s" repeatCount="indefinite" /> </circle>
SVGアニメーション Snap.svg Vivus
SVGアニメーション https://www.wecraftapps.com/ https://cuberto.com/
JavaScript
JavaScriptアニメーション
JavaScriptアニメーション DOMアニメーション styleプロパティの値やスクロールポジション を変更
JavaScriptアニメーション Canvasアニメーション CSSに⽐べて表現⼒が⾼い
JavaScriptライブラリ jQuery(animate) TweenMax Anime.js Velocity
Web Animations API https://caniuse.com/#feat=web-animation
Web Animations API Polyfillライブラリでクロスブラウザ対応可能 https://github.com/web-animations/web- animations-js
Canvasアニメーション
Canvasアニメーション <canvas width="400" height="400"> </canvas>
Canvasアニメーション
Canvasアニメーション
Canvasアニメーション
Canvasアニメーション JavaScriptでアニメーションを描画 パフォーマンスが良い
Canvasアニメーション CreateJS pixi.js
Canvasアニメーション https://ics.media/recruit http://ni.siois.in
WebGL
WebGL ⾼度な3D表現 カメラやライトなど
WebGL three.js pixi.js
WebGL https://www.liberty-japan.co.jp/ specialcontent/ https://ics.media/recruit
GIFアニメーション
GIFアニメーション
GIFアニメーション
GIFアニメーション 再注⽬されている Photoshop で書き出し
ツールを使った アニメーション制作
None
SVG書き出し JSONデータを書き出し (Bodymovinプラグイン) Lottie(Web⽤に再⽣)
GIFアニメーション 動画で書き出し Photoshopのタイムラインパネル
Canvas書き出し デフォルトで書き出し可能 CreateJS
https://maxjapan.adobe.com/archive/2018/web-session-1/
アニメーション制作の ポイント
その1:リアルな表現
リアルな表現とは何か? 不⾃然さを無くす
箱が落ちるモーション
箱が落ちるモーション
イージング css → ease, ease-in や cubic-bezier() JavaScript → イージング関数
イージング https://github.com/KingScooty/sass-easing
イージング http://cubic-bezier.com
イージングの参考 https://speakerdeck.com/kazumanishihata/dong-kifalsedezaintohurontoendofalselian-xi
箱が落ちるモーション
反動を加える 現実の動きに近づける よりリアルな情報が得られる
モーション参考 https://en.wikipedia.org/wiki/12_basic_principles_of_animation
モーション参考 http://photoshopvip.net/75004
その2:気持ちの良さ
その3:レイヤー構造
None
None
アニメーション制作時 の注意点
盛り込みすぎない 伝えたいことが伝わらない
その表現は適切か? デザインに合わないアニメーションは逆効果
感性を養う https://uimovement.com dribbble (Animated GIFsカテゴリ) vimeo (「motion」などで検索) Greensock showcase
表現をマネする 理解が早い 引き出しが増える 応⽤が効く
あえてWebでは探さない テレビ・映画・アニメ・普段の⽣活で⾒かけ るちょっとした動き (ボールが跳ねる、⽔の波紋 などなど)
参考サイト ics.media CodeGrid Adobe
神は細部に宿る 細かい部分にこだわりましょう 実は簡単なことの組み合わせ
まずは⾃分が楽しみましょう!
Thank you!