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
650
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
3k
Parsing Javascript
brn
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
820
プロダクト開発とTypeScript
brn
8
2.8k
javascript internationalization API
brn
0
840
Other Decks in Programming
See All in Programming
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
Domain-Driven Transformation
hschwentner
2
1.9k
Software Architecture
hschwentner
6
2.1k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
740
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
Honoとフロントエンドの 型安全性について
yodaka
7
1.2k
Immutable ActiveRecord
megane42
0
140
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
ARA Ansible for the teams
kksat
0
150
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
A Tale of Four Properties
chriscoyier
158
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Optimizing for Happiness
mojombo
376
70k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building an army of robots
kneath
303
45k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Six Lessons from altMBA
skipperchong
27
3.6k
A Philosophy of Restraint
colly
203
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
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Ͱهड़ͨ͠΄͏͕ྑ͍