Question

我是新来的反应原生开发的人，我正在尝试让一个动画序列重复该序列中的动画。

我试图再次将值设置为0，但这似乎不起作用。我希望序列先对动画进行动画处理，然后再对动画进行动画处理。我不想将其放入循环中，因为我希望以后可以更改顺序。我知道createAnimation函数被全部调用了三次，但是动画不再运行。

import React, { Component } from 'react';
import {
  Platform,
  Animated,
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
  TouchableHighlight,
} from 'react-native';


const AnimatedButton = Animated.createAnimatedComponent(TouchableHighlight);

export default class Animater extends Component {
  showAlert = () => {
     console.log("show: ");
    Alert.alert('You need to...');
  };

  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
    this.animatedValue2 = new Animated.Value(0);
  }



animate = () =>{

this.animatedValue.setValue(0)
  const createAnimation = function (value, duration, delay = 0) {

  value.setValue(0);

    return Animated.timing(
      value,
      {
        toValue: 150,
        duration,
        delay
      }
    )
  }


    Animated.sequence([
    createAnimation(this.animatedValue, 500),
    createAnimation(this.animatedValue2, 500, 1000),  
    createAnimation(this.animatedValue, 500, 1000),       
  ]).start()

}



  render() {
    const interpolateColor = this.animatedValue.interpolate({
      inputRange: [0, 100, 150],
      outputRange: ['rgb(0,0,0)', 'rgb(51,250,170)' , 'rgb(0,0,0)'],
    });

    const interpolateColor2 = this.animatedValue2.interpolate({
      inputRange: [0, 150],
      outputRange: ['rgb(0,0,0)', 'rgb(51,0,86)'],
    });


    const animatedStyle = {
      backgroundColor: interpolateColor,
    };
    const animatedStyle2 = {
      backgroundColor: interpolateColor2,
    };
    return (
    <View>
     <View style={styles.containerR}>
        <AnimatedButton style={[animatedStyle, styles.buttonR]}          
         onPress={this.animate}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This w w w </Text>
        </AnimatedButton>

       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>
    </View>
    <View style={styles.containerC}>
       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>

       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>
    </View>
    </View>

    );
  }
}

const styles = StyleSheet.create({
  buttonR: {

   // backgroundColor: '#de1738',
    padding: 10,
    borderRadius: 100,
    width: 100,
    height: 100
  },
    containerC: {
      //flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 10
    },
    containerR: {
      //flex: 3,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 10
    },

});

我希望animationValue动画能够再次运行，但是没有。

Answer 1

您可以简单地使用animation重复loop

Animated.loop(
  Animated.sequence([
    Animated.delay(1000),
    Animated.timing(this.animatedValue, {
      toValue: 150,
      duration: 500
    })
  ]),
  {
    iterations: 10 // Number of repetitions
  }
).start()

使用递归函数重复无限重复。

createAnimation() {
    Animated.sequence([
     Animated.delay(1000),
     Animated.timing(this.animatedValue, {
       toValue: 150,
       duration: 500
       })
    ]).start(() => {
      // Logic whenever an iteration finishes...
      createAnimation()
    });
}

componentDidMount() {
    createAnimation();

如何在动画序列中重复React Native动画

1 个答案: