Работающая параллельная анимация "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();
};