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
840
今どきの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
940
これからはじめるシングルページアプリケーション
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
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
Go言語はstack overflowの夢を見るか?
logica0419
0
230
CSC509 Lecture 06
javiergs
PRO
0
260
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
Le côté obscur des IA génératives
pascallemerrer
0
140
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
120
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Catch Up: Go Style Guide Update
andpad
0
220
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
142
24k
Writing Fast Ruby
sferik
629
62k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Mobile First: as difficult as doing things right
swwweet
224
10k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Facilitating Awesome Meetings
lara
56
6.6k
Building an army of robots
kneath
306
46k
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!