$30 off During Our Annual Pro Sale. View Details »

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

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

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

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

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