是否有办法知道随后何时执行特定动画,以便将状态设置为状态?
我有一个包含图像和视频的元素数组,该数组的每个元素都包含一个持续时间。
我必须在数组中定义的持续时间内重现每个元素。
但是我遇到了问题,因为我当时无法设置要复制的特定项目。
链接:Expo
代码:
import * as React from 'react';
import {
Text,
View,
StyleSheet,
Dimensions,
Animated,
Easing,
Image,
StatusBar,
} from 'react-native';
import { Constants, Video } from 'expo';
const { width } = Dimensions.get('window');
const arr = [
{
id: 0,
timer: 14000,
type: 1,
url:
'https://scontent-msp1-1.cdninstagram.com/vp/d513ee0212c97d05e10d70afca94bc0a/5CB445A0/t50.12441-16/56993789_129445468151136_4722826772916052125_n.mp4?efg=eyJ2ZW5jb2RlX3RhZyI6InZ0c192b2RfdXJsZ2VuLjQ4MC5jb250cm9sX3NpZGVjYXIifQ&_nc_ht=scontent-msp1-1.cdninstagram.com&vtsbc=1',
},
{
id: 1,
timer: 5000,
type: 0,
url:
'https://scontent-msp1-1.cdninstagram.com/vp/2c47a274c12d17fe83e240a00e4906c9/5CB46160/t51.12442-15/e35/56391694_411695079627974_2682719859211289992_n.jpg?_nc_ht=scontent-msp1-1.cdninstagram.com&se=7&ig_cache_key=MjAyMTA4MTY1Mjk4MzE0NDQyMA%3D%3D.2',
},
{
id: 2,
timer: 5000,
type: 0,
url:
'https://scontent-msp1-1.cdninstagram.com/vp/8b8ddd0281e885a2620aa58905a879f7/5CB50C64/t51.12442-15/e35/55788474_314451852556821_4190846479622237104_n.jpg?_nc_ht=scontent-msp1-1.cdninstagram.com&se=7&ig_cache_key=MjAyMTE0NDQwMjg2NjI3MjMwMg%3D%3D.2',
},
{
id: 3,
timer: 7000,
type: 1,
url:
'https://scontent-msp1-1.cdninstagram.com/vp/a92ae16e587dea1c6a331134ad46bd54/5CB45FD9/t50.12441-16/57579835_2344121102466466_6101710668128382339_n.mp4?efg=eyJ2ZW5jb2RlX3RhZyI6InZ0c192b2RfdXJsZ2VuLjQ4MC5jb250cm9sX3NpZGVjYXIifQ&_nc_ht=scontent-msp1-1.cdninstagram.com&vtsbc=1',
},
];
export default class App extends React.Component {
constructor() {
super();
this.state = {
id: 0,
};
this.animatedValue = [];
arr.forEach((v, i) => {
this.animatedValue[i] = new Animated.Value(0);
});
}
componentDidMount() {
this.animate();
}
animate() {
const animations = arr.map((v, i) => {
return Animated.timing(this.animatedValue[i], {
toValue: 1,
duration: arr[i].timer,
easing: Easing.linear,
});
});
Animated.sequence(animations).start();
setInterval(() => {
this.setState({ id: this.state.id + 1 });
console.log(':', this.state.id);
}, arr[this.state.id].timer);
}
render() {
return (
<View style={styles.container}>
<StatusBar hidden />
<View
style={{
flexDirection: 'row',
backgroundColor: '#000000',
marginLeft: 2,
marginRight: 2,
}}>
{arr.map((prop, key) => {
const widthAni = this.animatedValue[key].interpolate({
inputRange: [0, 1],
outputRange: ['0%', '100%'],
});
return (
<View
style={{
backgroundColor: 'rgba(255,255,255,0.4)',
height: 3,
width: width / arr.length,
borderRadius: 1,
marginRight: 2,
}}>
<Animated.View
style={{
backgroundColor: 'rgba(255,255,255,1)',
height: 3,
width: widthAni,
borderRadius: 1,
}}
/>
</View>
);
})}
</View>
{arr.map((prop, key) => {
//console.log(this.state.id);
return (
<View>
{arr[this.state.id].type == 0 ? (
<Image
style={{ width: '100%', height: '100%' }}
source={{
uri: arr[this.state.id].url,
}}
/>
) : (
<Video
source={{
uri: arr[this.state.id].url,
}}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay
useNativeControls
style={{
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
}}
/>
)}
</View>
);
})}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
//justifyContent: 'center',
//paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});