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
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
660
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
260
Ktorで簡単AIアプリケーション
tsukakei
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
510
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
440
CSC305 Lecture 11
javiergs
PRO
0
280
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.6k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
How STYLIGHT went responsive
nonsquared
100
5.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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!