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
850
今どきの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
950
これからはじめるシングルページアプリケーション
yuhiisk
0
730
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
390
SPA実装最前線 ~今どきのJSフレームワーク選び~
yuhiisk
2
4.9k
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.6k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
550
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
240
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
1
240
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
200
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
420
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
350
SODA - FACT BOOK(JP)
sodainc
1
8.6k
Google Opalで使える37のライブラリ
mickey_kubo
3
130
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
7k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
150
Featured
See All Featured
KATA
mclloyd
PRO
32
15k
Code Review Best Practice
trishagee
72
19k
How GitHub (no longer) Works
holman
315
140k
Thoughts on Productivity
jonyablonski
70
4.9k
The Invisible Side of Design
smashingmag
302
51k
Music & Morning Musume
bryan
46
6.9k
Automating Front-end Workflow
addyosmani
1371
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
YesSQL, Process and Tooling at Scale
rocio
173
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
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!