>source

간단한 애니메이션을 작성하고 완료 후 다시 설정하려고합니다.

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Image, Animated, Easing } from 'react-native';
export default function App() {
  const [leftPos, setLeftPos] = useState(new Animated.Value(0))
  useEffect(() => {
    cycleAnimation()
  }, []);
  const cycleAnimation = () => {
    console.log('STARTING ANIMATION:', leftPos)
    Animated.sequence([
      Animated.timing(
        leftPos,
        {
          toValue: 430,
          duration: 3000,
          easing: Easing.linear,
          useNativeDriver: false
        }
      )
    ]).start(() => {
      setLeftPos(new Animated.Value(0))
      cycleAnimation()
    })
  }
  return (
    <View style={{ backgroundColor: 'black', flex: 1 }}>
      <Animated.View style={{ left: leftPos }}>
        <Image
          style={styles.cloud}
          source={require('./assets/cloud.png')}
        />
      </Animated.View>
    </View >
  );
}
const styles = StyleSheet.create({
  cloud: {
  }
});

leftPos는 새로운 0 값으로 setLeftPos를 호출 했음에도 불구하고 cycleAnimation에서 항상 430 (첫 번째 반복 제외)입니다. 또한 setLeftPos의 콜백에 cycleAnimation을 넣으려고 시도했지만 동일한 결과를 얻었습니다.

  • 답변 # 1

    잘못 재설정하고 있습니다. 상태를 업데이트 할 필요가 없습니다. 다음을 시도하십시오.

    leftPos.setValue(0);

  • 답변 # 2

    함수를 useEffect 안에 넣으십시오.

    import React, { useState, useEffect } from "react";
    import { StyleSheet, View, Image, Animated, Easing } from "react-native";
    export default function App() {
      const [leftPos, setLeftPos] = useState(new Animated.Value(0));
      useEffect(() => {
        const cycleAnimation = () => {
          console.log("STARTING ANIMATION:", leftPos);
          Animated.sequence([
            Animated.timing(leftPos, {
              toValue: 430,
              duration: 3000,
              easing: Easing.linear,
              useNativeDriver: false,
            }),
          ]).start(() => {
            setLeftPos(new Animated.Value(0));
          });
        };
        cycleAnimation();
      }, [leftPos]);
      return (
        <View style={{ backgroundColor: "black", flex: 1 }}>
          <Animated.View style={{ left: leftPos }}>
            <Image style={styles.cloud} source={require("./assets/icon.png")} />
          </Animated.View>
        </View>
      );
    }
    const styles = StyleSheet.create({
      cloud: {},
    });
    
    

관련 자료

  • 이전 aws lambda - Alexa 출력을 Amazon SQS에 연결할 수 있습니까?
  • 다음 Flutter PageView 내에서 스크롤 뷰 제스처를 처리하는 방법은 무엇입니까?