React Native Animations - Wiggle/Shake animation on render, followed by onPress animations

问题

Have a functioning "onPress" parallel animation. However, I want the same animated image to wiggle upon "render", giving off a visual indication to click it. So this should happen prior to my onPress animations. Unfortunately, efforts so far, break the other animations when I get the wiggle/shake animation running.

Hoping someone can use Yoda like skills and get the animations all working correctly together. Thanks!

Reference: Working current animations:

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animatedValue: new Animated.Value(0),
      springValue: new Animated.Value(0.47),
      fadeValue: new Animated.Value(0),
    };
  }

render() {
    return (
      <ImageBackground source={background} style={styles.image1}>
        <View style={styles.container1}>
          <TouchableOpacity onPress={this._springAnimation}>
            <Animated.Image
              source={require('animation/assets/present1.png')}
              style={[
                styles.imageView,
                {
                  transform: [{scale: this.state.springValue}],
                },
              ]}
            />
            <Animated.View
              style={{

Note: Not using StyleSheet here as having "opacity: this.state.fadeValue" within my StyleSheet does not work

            opacity: this.state.fadeValue,
            height: 120,
            width: 260,
            right: 17,
            top: -60,
            marginTop: 10,
            marginLeft: 30,
            marginRight: 30,
            backgroundColor: '#e6e6e6',
            borderRadius: 10,
            borderWidth: 1,
            borderColor: '#fff',
            justifyContent: 'center',
          }}>
          <Text style={styles.buttonTextBig}>Win</Text>
          <Text style={styles.buttonText}>
            {'\u2022'} Example 1{'\n'}
            {'\u2022'} Example 2 {'\n'}
            {'\u2022'} Example 3
              </Text>
            </Animated.View>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    );
  }
}

The wiggle animation that works/I can use:

_wiggleAnimation = () => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(this.state.animatedValue, {
          toValue: 1.0,
          duration: 150,
          easing: Easing.linear,
          useNativeDriver: true,
        }),
        Animated.timing(this.state.animatedValue, {
          toValue: -1.0,
          duration: 300,
          easing: Easing.linear,
          useNativeDriver: true,
        }),
        Animated.timing(this.state.animatedValue, {
          toValue: 0.0,
          duration: 150,
          easing: Easing.linear,
          useNativeDriver: true,
        }),
      ]),
    ).start();
  };

来源：https://stackoverflow.com/questions/61320650/react-native-animations-wiggle-shake-animation-on-render-followed-by-onpress

标签

javascript

react-native

animation