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
React-Springでリッチなアニメーション
Search
Taketoshi Aono(青野健利 a.k.a brn)
September 30, 2019
Programming
1
590
React-Springでリッチなアニメーション
react-springでリッチなアニメーションを実現した記録です。
リッチとは...
Taketoshi Aono(青野健利 a.k.a brn)
September 30, 2019
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
2.9k
Parsing Javascript
brn
12
8.9k
JSON & Object Tips
brn
1
380
CA 1Day Youth Bootcamp for Frontend LT
brn
0
780
Modern TypeScript
brn
2
740
javascript - behind the scene
brn
3
680
tc39 proposals
brn
0
780
プロダクト開発とTypeScript
brn
8
2.8k
javascript internationalization API
brn
0
780
Other Decks in Programming
See All in Programming
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4k
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
540
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
7
430
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
240
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
51
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Code Review Best Practice
trishagee
64
17k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Become a Pro
speakerdeck
PRO
24
5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
A Philosophy of Restraint
colly
203
16k
Rails Girls Zürich Keynote
gr2m
93
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Transcript
React-SpringͰϦονΞχϝʔγϣϯ
Name !CSO 5BLFUPTIJ"POP੨݈ར Occupation 'SPOUFOE%FWFMPQFS1SPEVDU0XOFS Company $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS OSS $POUSJCVUPSPG7
About IUUQJOGPCODI
3FBDU4QSJOH 3FBDU͚ͷ"OJNBUJPOϥΠϒϥϦ IUUQTHJUIVCDPNSFBDUTQSJOHSFBDUTQSJOH
3FBDU "OJNBUJPO 3FBDUͱΞχϝʔγϣϯதʑ૬ੑ͕ѱ͍ $445SBOTJUJPOͬͨΓɺ$445SBOTJUJPOؤுͬͯͬͨΓ ͚ͩͲෳࡶͳΞχϝʔγϣϯ͔ͳΓݫ͍͠
3FBDU4QSJOH
3FBDU4QSJOH ෳࡶͳΞχϝʔγϣϯΛએݴతʹ࣮ߦͰ͖Δ ঃʑʹΛ૿ͨ͠Γɾॱ൪ʹ࣮ߦͨ͠Γ ߋʹΞχϝʔγϣϯͷಈ͖୯७ͳ&BTJOH͡Όͳ͍ͷͰ໘ന͍
4QSJOHCBTFE ௨ৗͷ࣌ؒϕʔεͷΞχϝʔγϣϯͱҧͬͯ NBTT UFOTJPO GSJDUJPO QSFDJTJPO WFMPDJUZ ͷύϥϝʔλͰߏ͞ΕΔεϓϦϯάͷΑ͏ͳཧಛੑͷΞχϝʔγϣϯ Λ࣮ݱͰ͖Δɻ
import { render } from 'react-dom' import React, { useState
} from 'react' import { useSpring, animated as a } from 'react-spring' import './styles.css' function Card() { const [flipped, set] = useState(false) const { transform, opacity } = useSpring({ opacity: flipped ? 1 : 0, transform: `perspective(600px) rotateX(${flipped ? 180 : 0}deg)`, config: { mass: 5, tension: 500, friction: 80 } }) return ( <div onClick={() => set(state => !state)}> <a.div class="c back" style={{ opacity: opacity.interpolate(o => 1 - o), transform }} /> <a.div class="c front" style={{ opacity, transform: transform.interpolate(t => `${t} rotateX(180deg)`) }} /> </div> ) }
https://codesandbox.io/embed/01yl7knw70
import React from 'react' import ReactDOM from 'react-dom' import {
useSpring, animated } from 'react-spring' import './styles.css' // // Icons made by Freepik from www.flaticon.com const calc = (x, y) => [x - window.innerWidth / 2, y - window.innerHeight / 2] const trans1 = (x, y) => `translate3d(${x / 10}px,${y / 10}px,0)` const trans2 = (x, y) => `translate3d(${x / 8 + 35}px,${y / 8 - 230}px,0)` const trans3 = (x, y) => `translate3d(${x / 6 - 250}px,${y / 6 - 200}px,0)` const trans4 = (x, y) => `translate3d(${x / 3.5}px,${y / 3.5}px,0)` function Card() { const [props, set] = useSpring(() => ({ xy: [0, 0], config: { mass: 10, tension: 550, friction: 140 } })) return ( <div class="container" onMouseMove={({ clientX: x, clientY: y }) => set({ xy: calc(x, y) })}> <animated.div class="card1" style={{ transform: props.xy.interpolate(trans1) }} /> <animated.div class="card2" style={{ transform: props.xy.interpolate(trans2) }} /> <animated.div class="card3" style={{ transform: props.xy.interpolate(trans3) }} /> <animated.div class="card4" style={{ transform: props.xy.interpolate(trans4) }} /> </div> ) }
https://codesandbox.io/embed/r5x34869vq
"1*
3FBDUIPPLT ͯ͢ͷ"1*͕3FBDU)PPLTʹରԠ͍ͯ͠ΔͷͰͦͬͪΛ͍·͠ΐ͏
const props = useSpring({opacity: toggle ? 1 : 0}) return
<animated.div style={props}>i will fade</animated.div> useSpring
const [show, set] = useState(false) const transitions = useTransition(show, null,
{ from: { position: 'absolute', opacity: 0 }, enter: { opacity: 1 }, leave: { opacity: 0 }, }) return transitions.map(({ item, key, props }) => item && <animated.div key={key} style={props}>✌</animated.div> ) useTransition
const trail = useTrail(3, {opacity: 1}) return trail.map(props => <animated.div
style={props} />) useTrail https://codesandbox.io/embed/8zx4ppk01l
ύϑΥʔϚϯε 3FBDU4QSJOH)PPLTOBUJWFϑϥά͖ͷίϯϙʔωϯτΛར༻͢Δͱɺ ίϯϙʔωϯτ෦Ͱ%0.ϊʔυʹରͯ͠ελΠϧͷॻ͖͑Λߦ͏ 5SFFશମͷԾ%0.ͷߋ৽ΛαϘ͍ͬͯΔͷͰߴ
(16$16 $44ͷMFGUNBSHJOͳͲͷϓϩύςΟ௨ৗ$16ʹΑͬͯܭࢉ͞ΕΔɻ ͔͠͠USBOTMBUFEͷ%USBOTGPSNܥͷϓϩύςΟ(16ʹΑͬͯॲཧ͞ ΕΔ (16ॲཧ௨ৗઐ༻ϋʔυΣΞͰͷॲཧͷͨΊɺͦͷଞͷॲཧ͕ڬ·Δ $16ΑΓߴʹඳը͕Մೳɻ
ύϑΥʔϚϯε ͨͩ͠ɺSFBDUTQSJOHΛߋ৽͠ͳ͕ΒΞχϝʔγϣϯ͢ΔͨΊɺ (16Λ͏·͑͘ͳ͍͜ͱ͕ଟ͍ɻ XJMMDIBOHFϓϩύςΟͷΑ͏ͳͷΛ͏͔ EܥΛར༻ͯ͠(16ʹඳը ͤ͞ΔΑ͏ʹͨ͠΄͏͕Α͍ɻ
$BOWBT 3FBDUͰDBOWBTΛૢ࡞͢Δ3FBDU,POWBͱ͍͏ϥΠϒϥϦ͕͋Δ͕ɺ ,POWBΛαϙʔτ͓ͯ͠Γ$BOWBT্ͰෳࡶͳΞχϝʔγϣϯΛߏஙͰ͖ Δ
,POWBͰؾΛ͚ͭΔ͜ͱ ,POWBͰ3FBDU)PPLTΛར༻͢Δͱඍົʹಈ࡞͕͘ͳΔͷͰɺ ʠSFBDUTQSJOHSFOEFSQSPQTLPOWBʡΛར༻ͯ͠+49Ͱهड़ͨ͠΄͏͕ྑ͍