react-springでリッチなアニメーションを実現した記録です。 リッチとは...
React-SpringͰϦονΞχϝʔγϣϯ
View Slide
Name!CSO 5BLFUPTIJ"POP੨݈རOccupation'SPOUFOE%FWFMPQFS1SPEVDU0XOFSCompany$ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFSOSS$POUSJCVUPSPG7AboutIUUQJOGPCODI
3FBDU4QSJOH3FBDU͚ͷ"OJNBUJPOϥΠϒϥϦIUUQTHJUIVCDPNSFBDUTQSJOHSFBDUTQSJOH
3FBDU"OJNBUJPO3FBDUͱΞχϝʔγϣϯதʑ૬ੑ͕ѱ͍$445SBOTJUJPOͬͨΓɺ$445SBOTJUJPOؤுͬͯͬͨΓ͚ͩͲෳࡶͳΞχϝʔγϣϯ͔ͳΓݫ͍͠
3FBDU4QSJOH
3FBDU4QSJOHෳࡶͳΞχϝʔγϣϯΛએݴతʹ࣮ߦͰ͖ΔঃʑʹΛ૿ͨ͠Γɾॱ൪ʹ࣮ߦͨ͠ΓߋʹΞχϝʔγϣϯͷಈ͖୯७ͳ&BTJOH͡Όͳ͍ͷͰ໘ന͍
4QSJOHCBTFE௨ৗͷ࣌ؒϕʔεͷΞχϝʔγϣϯͱҧͬͯNBTTUFOTJPOGSJDUJPOQSFDJTJPOWFMPDJUZͷύϥϝʔλͰߏ͞ΕΔεϓϦϯάͷΑ͏ͳཧಛੑͷΞχϝʔγϣϯΛ࣮ݱͰ͖Δɻ
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 ( set(state => !state)}> 1 - o),transform }} />=> `${t} rotateX(180deg)`) }} />)}
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.comconst 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 ( set({ xy: calc(x,y) })}>)}
https://codesandbox.io/embed/r5x34869vq
"1*
3FBDUIPPLTͯ͢ͷ"1*͕3FBDU)PPLTʹରԠ͍ͯ͠ΔͷͰͦͬͪΛ͍·͠ΐ͏
const props = useSpring({opacity: toggle ? 1 : 0})return i will fadeuseSpring
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 && ✌)useTransition
const trail = useTrail(3, {opacity: 1})return trail.map(props => )useTrailhttps://codesandbox.io/embed/8zx4ppk01l
ύϑΥʔϚϯε3FBDU4QSJOH)PPLTOBUJWFϑϥά͖ͷίϯϙʔωϯτΛར༻͢Δͱɺίϯϙʔωϯτ෦Ͱ%0.ϊʔυʹରͯ͠ελΠϧͷॻ͖͑Λߦ͏5SFFશମͷԾ%0.ͷߋ৽ΛαϘ͍ͬͯΔͷͰߴ
(16$16$44ͷMFGUNBSHJOͳͲͷϓϩύςΟ௨ৗ$16ʹΑͬͯܭࢉ͞ΕΔɻ͔͠͠USBOTMBUFEͷ%USBOTGPSNܥͷϓϩύςΟ(16ʹΑͬͯॲཧ͞ΕΔ(16ॲཧ௨ৗઐ༻ϋʔυΣΞͰͷॲཧͷͨΊɺͦͷଞͷॲཧ͕ڬ·Δ$16ΑΓߴʹඳը͕Մೳɻ
ύϑΥʔϚϯεͨͩ͠ɺSFBDUTQSJOHΛߋ৽͠ͳ͕ΒΞχϝʔγϣϯ͢ΔͨΊɺ(16Λ͏·͑͘ͳ͍͜ͱ͕ଟ͍ɻXJMMDIBOHFϓϩύςΟͷΑ͏ͳͷΛ͏͔EܥΛར༻ͯ͠(16ʹඳըͤ͞ΔΑ͏ʹͨ͠΄͏͕Α͍ɻ
$BOWBT3FBDUͰDBOWBTΛૢ࡞͢Δ3FBDU,POWBͱ͍͏ϥΠϒϥϦ͕͋Δ͕ɺ,POWBΛαϙʔτ͓ͯ͠Γ$BOWBT্ͰෳࡶͳΞχϝʔγϣϯΛߏஙͰ͖Δ
,POWBͰؾΛ͚ͭΔ͜ͱ,POWBͰ3FBDU)PPLTΛར༻͢Δͱඍົʹಈ࡞͕͘ͳΔͷͰɺʠSFBDUTQSJOHSFOEFSQSPQTLPOWBʡΛར༻ͯ͠+49Ͱهड़ͨ͠΄͏͕ྑ͍