Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Nativeでアニメーションを頑張る- React Native Meetup #11

takahi5
March 04, 2021

React Nativeでアニメーションを頑張る- React Native Meetup #11

React Nativeのアニメーション、こんなときはどう実装する?
パターンごとに考えてみます。

1. 固定アニメ
2. 細かいインタラクション
3. スクロールと連動した演出
4. スワイプと連動した演出

takahi5

March 04, 2021
Tweet

More Decks by takahi5

Other Decks in Programming

Transcript

  1. stand.fm 4 React Native Japanのラジオ もあります! 技術情報, エンジニアインタ ビュー ...etc

    毎日ピザパ🍕 React Native Japan 個人で 無益な情報発信も...
  2. const scrollY = useRef(new Animated.Value(0)).current; return ( <View style={styles.container}> <ScrollView

    scrollEventThrottle={16} onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: scrollY } } }], )} > onScrollイベントで取得したスクロール量を、 アニメ用の変数ScrollYに割り当てる 18
  3. 例) ヘッダー高さ - はじめは高さ150 - スクロールに比例して低くなる - 高さ80になったら固定 scrollY ヘッダーheight

    height: scrollY.interpolate({ inputRange: [0, 70], outputRange: [150, 80], extrapolate: "clamp", }), 150 80 70 20
  4. scrollY アバター位置Y scrollY 画像のぼかし 1 scrollY アバター zIndex 10 0

    0 他の値についても scrollYとの関係をコードに落とし込めばOK 21
  5. const pan = useRef(new Animated.ValueXY()).current; const panResponder = PanResponder.create({ onPanResponderMove:

    () => 動かしたとき, onPanResponderRelease: () => 離したとき, }) return ( <Animated.View {...panResponder.panHandlers} > ) PanResponder でスワイプ時の動きを取得 あとはScrollのときと同じ要領で 24
  6. pan dx, dy カード位置 dx, dx pan dx カード回転 θ

    カード位置と回転量を スワイプに連動させる 25
  7. 指を離したとき→画面外へ飛ばす or もとに戻す const panResponder = PanResponder.create({ onPanResponderRelease: (e, gestureState)

    => { if (gestureState.dx > SWIPE_THRESHOLD) { // 右へ飛ばす Animated.timing(pan, { toValue: { x: 500, y: gestureState.dy - 200 }, }).start(); } else if (gestureState.dx < -SWIPE_THRESHOLD) { // 左へ飛ばす Animated.timing(pan, { toValue: { x: -500, y: gestureState.dy - 200 }, }).start()); } else { // 元の位置に戻す Animated.spring(pan, { toValue: { x: 0, y: 0 }, }).start(); } }, }); 26
  8. まとめ
 • 固定アニメ、デザインが要求されるもの 
 → Lottie
 • 細かいインタラクション 
 →

    motiが便利そう!
 • スクロールやスワイプに連動した演出 
 → Animatedで実装可能。interpolateは分解して考える 
 27 サンプルコード: https://github.com/takahi5/react-native-animation-showcase