Реагировать на нативную анимацию - анимация покачивания / встряхивания при рендеринге с последующей анимацией onPress - PullRequest
0 голосов
/ 20 апреля 2020

Работающая параллельная анимация "onPress". Тем не менее, я хочу, чтобы одно и то же анимированное изображение шевелилось при «рендере», выделяя визуальную индикацию, чтобы щелкнуть по нему. Так что это должно произойти до моей анимации onPress. К сожалению, до сих пор, сломайте другие анимации, когда я запускаю анимацию покачивания / встряхивания.

Надеясь, что кто-то может использовать навыки, подобные Yoda, и заставить анимации работать правильно вместе. Спасибо!

Ссылка: рабочие текущие анимации:

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={{

Примечание: здесь не используется таблица стилей, так как в ней есть "opacity: this.state.fadeValue" моя таблица стилей не работает

            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>
    );
  }
}

Анимация покачивания, которая работает / я могу использовать:

_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();
  };
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...