React-Springでリッチなアニメーション

react-springでリッチなアニメーションを実現した記録です。
リッチとは...

Transcript

1. React-SpringͰϦονΞχϝʔγϣϯ
   

   View Slide

2. Name
   !CSO 5BLFUPTIJ"POP੨໺݈ར
   
   Occupation
   'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
   Company
   $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS
   OSS
   $POUSJCVUPSPG7
   About
   IUUQJOGPCODI
   

   View Slide

3. 3FBDU4QSJOH
   3FBDU޲͚ͷ"OJNBUJPOϥΠϒϥϦ
   IUUQTHJUIVCDPNSFBDUTQSJOHSFBDUTQSJOH
   

   View Slide

4. 3FBDU"OJNBUJPO
   3FBDUͱΞχϝʔγϣϯ͸தʑ૬ੑ͕ѱ͍
   $445SBOTJUJPO࢖ͬͨΓɺ$445SBOTJUJPOؤுͬͯ࢖ͬͨΓ
   ͚ͩͲෳࡶͳΞχϝʔγϣϯ͸͔ͳΓݫ͍͠
   

   View Slide

5. 3FBDU4QSJOH
   

   View Slide

6. 3FBDU4QSJOH
   ෳࡶͳΞχϝʔγϣϯΛએݴతʹ࣮ߦͰ͖Δ
   ঃʑʹ஋Λ૿΍ͨ͠Γɾॱ൪ʹ࣮ߦͨ͠Γ
   ߋʹΞχϝʔγϣϯͷಈ͖΋୯७ͳ&BTJOH͡Όͳ͍ͷͰ໘ന͍
   

   View Slide

7. 4QSJOHCBTFE
   ௨ৗͷ࣌ؒϕʔεͷΞχϝʔγϣϯͱҧͬͯ
   NBTT
   UFOTJPO
   GSJDUJPO
   QSFDJTJPO
   WFMPDJUZ
   ౳ͷύϥϝʔλͰߏ੒͞ΕΔεϓϦϯάͷΑ͏ͳ෺ཧಛੑͷΞχϝʔγϣϯ
   Λ࣮ݱͰ͖Δɻ
   

   View Slide

8. 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)`) }} />
   
   )
   }
   

   View Slide

9. https://codesandbox.io/embed/01yl7knw70
   

   View Slide

10. 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 (
    set({ xy: calc(x,
    y) })}>
    
    
    
    
    
    )
    }
    

    View Slide

11. https://codesandbox.io/embed/r5x34869vq
    

    View Slide

12. "1*
    

    View Slide

13. 3FBDUIPPLT
    ͢΂ͯͷ"1*͕3FBDU)PPLTʹରԠ͍ͯ͠ΔͷͰͦͬͪΛ࢖͍·͠ΐ͏
    

    View Slide

14. const props = useSpring({opacity: toggle ? 1 : 0})
    return i will fade
    useSpring
    

    View Slide

15. 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
    

    View Slide

16. const trail = useTrail(3, {opacity: 1})
    return trail.map(props => )
    useTrail
    https://codesandbox.io/embed/8zx4ppk01l
    

    View Slide

17. ύϑΥʔϚϯε
    3FBDU4QSJOH͸)PPLT΍OBUJWFϑϥά෇͖ͷίϯϙʔωϯτΛར༻͢Δͱɺ
    ίϯϙʔωϯτ಺෦Ͱ௚઀%0.ϊʔυʹରͯ͠ελΠϧͷॻ͖׵͑Λߦ͏
    5SFFશମͷԾ૝%0.ͷߋ৽ΛαϘ͍ͬͯΔͷͰߴ଎
    

    View Slide

18. (16$16
    $44ͷMFGUNBSHJOͳͲͷϓϩύςΟ͸௨ৗ$16ʹΑͬͯܭࢉ͞ΕΔɻ
    ͔͠͠USBOTMBUFE౳ͷ%USBOTGPSNܥͷϓϩύςΟ͸(16ʹΑͬͯॲཧ͞
    ΕΔ
    (16ॲཧ͸௨ৗઐ༻ϋʔυ΢ΣΞͰͷॲཧͷͨΊɺͦͷଞͷॲཧ͕ڬ·Δ
    $16ΑΓ΋ߴ଎ʹඳը͕Մೳɻ
    

    View Slide

19. ύϑΥʔϚϯε
    ͨͩ͠ɺSFBDUTQSJOH͸஋Λ௚઀ߋ৽͠ͳ͕ΒΞχϝʔγϣϯ͢ΔͨΊɺ
    (16Λ͏·͘࢖͑ͳ͍͜ͱ͕ଟ͍ɻ
    XJMMDIBOHFϓϩύςΟͷΑ͏ͳ΋ͷΛ࢖͏͔EܥΛར༻ͯ͠(16ʹඳը
    ͤ͞ΔΑ͏ʹͨ͠΄͏͕Α͍ɻ
    

    View Slide

20. $BOWBT
    3FBDUͰDBOWBTΛૢ࡞͢Δ3FBDU,POWBͱ͍͏ϥΠϒϥϦ͕͋Δ͕ɺ
    ,POWBΛαϙʔτ͓ͯ͠Γ$BOWBT্Ͱ΋ෳࡶͳΞχϝʔγϣϯΛߏஙͰ͖
    Δ
    

    View Slide

21. ,POWBͰؾΛ͚ͭΔ͜ͱ
    ,POWBͰ3FBDU)PPLTΛར༻͢Δͱඍົʹಈ࡞͕஗͘ͳΔͷͰɺ
    ʠSFBDUTQSJOHSFOEFSQSPQTLPOWBʡΛར༻ͯ͠+49Ͱهड़ͨ͠΄͏͕ྑ͍
    

    View Slide