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
660
今どきの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
720
これからはじめるシングルページアプリケーション
yuhiisk
0
520
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
310
SPA実装最前線 ~今どきのJSフレームワーク選び~
yuhiisk
2
4.5k
Critical CSS
yuhiisk
1
12k
Other Decks in Programming
See All in Programming
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
Apache Hive 4 on Treasure Data
ryukobayashi
1
410
AppRouter Panel Talk
yosuke_furukawa
PRO
1
450
Implementing Design Systems in Swift
seyfoyun
1
440
Site Reliability Engineering for GMO
pyama86
8
1.1k
Let's learn code review
riofujimon
2
570
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
430
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
410
"config" ってなんだ? / What is "config"?
okashoi
0
250
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
133
6.3k
It's Worth the Effort
3n
180
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Why Our Code Smells
bkeepers
PRO
331
56k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Thoughts on Productivity
jonyablonski
59
3.9k
The Language of Interfaces
destraynor
151
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
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!