import React, {useRef} from 'react';
import {Animated, StyleSheet, View, Button, Text} from 'react-native';
const AnimTwo = () => {
  const redSquare = useRef(new Animated.Value(1)).current;
  const greenSquare = useRef(new Animated.ValueXY(0, 0)).current;
  const blueSquare = useRef(new Animated.ValueXY(0, 0)).current;
  const runAnimation = () => {
    Animated.sequence([
      Animated.timing(redSquare, {
        toValue: 0,
      }),
      Animated.parallel([
        Animated.spring(greenSquare, {
          toValue: {x: 200, y: 0},
        }),
        Animated.spring(blueSquare, {
          toValue: {x: 200, y: 400},
        }),
      ]),
    ]).start();
  };
  return (
    <View>
      <Animated.View
        style={{
          opacity: redSquare,
        }}>
        <View style={styles.redSquare} />
      </Animated.View>
      <Animated.View style={greenSquare.getLayout()}>
        <View style={styles.greenSquare} />
      </Animated.View>
      <Animated.View style={blueSquare.getLayout()}>
        <View style={styles.blueSquare} />
      </Animated.View>
      <Button title="Animation Start" onPress={runAnimation} />
    </View>
  );
};
const styles = StyleSheet.create({
  redSquare: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
  greenSquare: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
  blueSquare: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});
export default AnimTwo;hooks 방식으로 하는 소스도 올려봅니다.
evanjin
              
                작성일
                21.03.30 16:41
              
                
              
                조회수
                216
              
            
          댓글 0
        
      