Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

3FBDU4QSJOH

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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) })}>
) }

Slide 11

Slide 11 text

https://codesandbox.io/embed/r5x34869vq

Slide 12

Slide 12 text

"1*

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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