[ 卡卡 DAY 18 ] - React Native animated 来简单使用 translate 效果

记得第一次使用到 css 的 animation 跟 transform 系列效果
做了很多厉害的动画东西飞来飞去转来转去
这次我们来使用 React Native animated 来做简单的动画吧！

开始实作

经过前两篇的介绍，大致简单的使用都了解了吧～所以我们就直接开始噜！

於 components/ 建立 AnimatedTranslate.js 引入 animated

import { Animated } from 'react-native';

加入动画事件
这次我们做两个按钮
一个叫做 Move Me
另一个叫做 Back Me

先将画面做好 return

<View>
    //球 Ａ 将 leftValue 放入 translateX
      <Animated.View
        style={{
          margin: 15,
          width: 50,
          height: 50,
          borderRadius: 100 / 2,
          backgroundColor: 'red',
          transform: [{translateX: leftValue}],
        }}
      />
    //球 Ｂ将 rightValue 放入 translateX
      <Animated.View
        style={{
          position: 'absolute',
          margin: 15,
          width: 50,
          height: 50,
          borderRadius: 100 / 2,
          backgroundColor: 'red',
          transform: [{translateX: rightValue}],
        }}
      />
      // 叫球A出去 func moveBall
      <TouchableOpacity onPress={moveBall}>
        <Text style={styles.btnText}>Move Me</Text>
      </TouchableOpacity>
      // 叫球B进来 func backBall
      <TouchableOpacity onPress={backBall}>
        <Text style={styles.btnText}>Back Me</Text>
      </TouchableOpacity>
    </View>

建立一个初始值

  const leftValue = useRef(new Animated.Value(0)).current;
  const rightValue = useRef(new Animated.Value(-500)).current;

事件呼叫

// B 球 Value - 500 到 0
  const backBall = () => {
    Animated.timing(rightValue, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };
// A 球 Value 0 到 500
  const moveBall = () => {
    Animated.timing(leftValue, {
      toValue: 500,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

整个 AnimatedTranslate.js

import React, {useRef} from 'react';
import {Animated, View, StyleSheet, TouchableOpacity, Text} from 'react-native';
const AnimatedTranslate = props => {
  const leftValue = useRef(new Animated.Value(0)).current;
  const rightValue = useRef(new Animated.Value(-500)).current;

  const backBall = () => {
    Animated.timing(rightValue, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };
  const moveBall = () => {
    Animated.timing(leftValue, {
      toValue: 500,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Animated.View
        style={{
          margin: 15,
          width: 50,
          height: 50,
          borderRadius: 100 / 2,
          backgroundColor: 'red',
          transform: [{translateX: leftValue}],
        }}
      />
      <Animated.View
        style={{
          position: 'absolute',
          margin: 15,
          width: 50,
          height: 50,
          borderRadius: 100 / 2,
          backgroundColor: 'red',
          transform: [{translateX: rightValue}],
        }}
      />
      <TouchableOpacity onPress={moveBall}>
        <Text style={styles.btnText}>Move Me</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={backBall}>
        <Text style={styles.btnText}>Back Me</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  btnText: {
    textAlign: 'center',
    backgroundColor: '#aaa',
    marginVertical: 10,
  },
});

export default AnimatedTranslate;