我尝试在屏幕中的 2 个项目上应用动画。有两个图像,我想同时在两个图像上应用动画但不同的动画。一个应该从左侧滑动,另一个从右侧滑动。
我搜索了不同的来源,但一无所获。有将多个动画一起应用的示例,但这些将应用于 <Animated.View>
中的所有项目。
export default class App extends React.Component {
componentWillMount() {
this.animatedMargin = new Animated.Value(0);
// I want to fire both animations from here
setTimeout(() => {
// this._slideAnimation('left');
// this._slideAnimation('right');
// I actually want to know how to achieve this
}, 100);
}
_slideAnimation(direction) {
if (direction === 'left'){
Animated.timing(this.animatedMargin, {
toValue: width,
duration: 1000
}).start();
} else {
Animated.timing(this.animatedMargin, {
toValue: 0,
duration: 1000
}).start();
}
}
render() {
return (
<View style={{ styles.container }}>
{/* I want to slide this from left to right */}
<Animated.View style={[ styles.ainmated, { left: this.animatedMargin } ]}>
<Image source={ left_image } />
</Animated.View>
{/* and this one in reverse direction */}
<Animated.View style={[ styles.ainmated, { right: this.animatedMargin } ]}>
<Image source={ right_image } />
</Animated.View>
</View>
);
}
}
但是这样的话,一次只能应用一个动画。我试过Animated.parallel这样可以并行应用多个动画,但两者<Animated.View>
标签将使用相同的动画而不是单独的动画
那么,如何在 React native 中同时在一个屏幕上不同的对象/组件实现不同的动画?
最佳答案
你不需要两个动画来实现这一点。
这是一个完整的工作示例:
import * as React from 'react';
import { Text,Animated,View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';
const { width } = Dimensions.get('screen')
const ITEM_SIZE = 60
export default class App extends React.Component {
componentWillMount() {
this.animatedMargin = new Animated.Value(0);
setTimeout(() => {
this._slideAnimation();
}, 1000);
}
_slideAnimation() {
Animated.timing(this.animatedMargin, {
toValue: (width / 2) - ITEM_SIZE,
duration: 1000
}).start()
}
render() {
return (
<View style={ styles.container }>
<Animated.View style={[ styles.animated, { left: this.animatedMargin } ]}>
<View style={[styles.imagePlaceholder, { backgroundColor: '#0070ff'}]} />
</Animated.View>
<Animated.View style={[ styles.animated, { right: this.animatedMargin } ]}>
<View style={[ styles.imagePlaceholder, {backgroundColor: '#008080'} ]} />
</Animated.View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
animated: {
position: 'absolute'
},
imagePlaceholder: {
width: ITEM_SIZE,
height: ITEM_SIZE
}
});
关于javascript - 在 React native 应用程序的屏幕中的不同项目上应用不同的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56592979/