React Native 动画 setValue() 问题？

Question

实际上我正在尝试在 Animated.timing() 完成后使用 setValue() 设置动画值然后想在循环动画中使用这个更新的动画值。

//Initialising animation value=50
const leftAnim = useRef(new Animated.Value(50)).current 
useEffect(() => {
    Animated.timing(leftAnim,{
        toValue:360,
        duration:3000,
        easing:Easing.linear,
        useNativeDriver:false,
    }).start(({finished}) => {
        //Updating animation value=100
        leftAnim.setValue(100)
        //Animated API is not considering the setValue and starting the loop animation with the first value i.e 50 instead of 100
        Animated.loop(
            Animated.timing(leftAnim,{
                toValue:360,
                duration:5000,
                easing:Easing.linear,
                useNativeDriver:false
            })
        ).start()
    })
},[])

我是不是做错了什么？有更好的方法吗？

Answer 1

您可以使用 leftAnim.setOffset(nextStart) 并相应地在内部循环调整结束。 Demo on snack expo

import React, { Component, useRef, useEffect, useState } from 'react';
import { Easing, StyleSheet, View, Animated, Button, Text } from 'react-native';

const start = 0;
const end = 100;

export default Anim = () => {
  const leftAnim = useRef(new Animated.Value(start)).current;
  const [curValue, setCurValue] = useState(start);

  useEffect(() => {
    leftAnim.addListener((v) => {
      setCurValue(v.value.toFixed(0));
    });

    Animated.timing(leftAnim, {
      toValue: end,
      duration: 5000,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start(({ finished }) => {
      //setting value to 80
      leftAnim.setOffset(80);

      // increment only by 20, 80 + 20 = 100
      Animated.loop(
        Animated.timing(leftAnim, {
          toValue: end - 80,
          duration: 2000,
          easing: Easing.linear,
          useNativeDriver: false,
        })
      ).start();
    });
  }, [leftAnim]);
  return (
    <View style={styles.container}>
      <Animated.Image
        source={require('./assets/snack-icon.png')}
        style={{ width: 40, height: 40, transform: [{ translateY: leftAnim }] }}
      />

      <Text>Current Value: {curValue}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'start',
    alignItems: 'center',
    padding: 10,
    paddingTop: 50,
  },
  input: {
    height: 50,
    marginHorizontal: 15,
    backgroundColor: '#ededed',
    marginTop: 10,
    paddingHorizontal: 9,
  },
});

Answer 2

替换这个： leftAnim.setValue(100)

有了这个： leftAnim._startingValue = 100

现在，当循环动画开始时，它将从 100 开始，因为我们已经更改了起始值。

Snack Link

React Native 动画 setValue() 问题？

React Native Animated setValue() problem?

javascript

react-native

react-animated