Я создал приложение React Native для тестирования анимации. У меня есть фон, и когда пользователь нажимает этот фон, я хочу, чтобы анимация появлялась поверх фона и оживлялась. Код:
import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, ImageBackground, Animated, Easing, Platform
} from 'react-native';
import { frame1 } from '../app-master-test/assets/index';
import { frame2 } from '../app-master-test/assets/index';
import { frame3 } from '../app-master-test/assets/index';
import { frame4 } from '../app-master-test/assets/index';
import { frame5 } from '../app-master-test/assets/index';
import { frame6 } from '../app-master-test/assets/index';
import { frame7 } from '../app-master-test/assets/index';
import { frame8 } from '../app-master-test/assets/index';
import { background } from '../app-master-test/assets/index';
const Images= [
{ id: 1, source: frame1},
{ id: 2, source: frame2 },
{ id: 3, source: frame3 },
{ id: 4, source: frame4 },
{ id: 5, source: frame5 },
{ id: 6, source: frame6 },
{ id: 7, source: frame7 },
{ id: 8, source: frame8 },
]
const length = Images.length;
export default class Timer extends React.Component {
constructor(props){
super(props);
this.state = {
isOn: false,
}
this.animations = new Animated.Value(0);
this.opacity = [];
Images.map((item, index) => {
this.opacity.push(
this.animations.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [0, 1, 0],
}),
);
});
}
onItemMouseDown = () => {
Animated.loop(
Animated.timing(this.animations, {
toValue: length - 1,
duration: 2000 * length,
easing: Easing.linear,
useNativeDriver: true,
}),
).start();
console.log(this.animations)
this.setState({
isOn:true,
}, () => {
console.log(this.state.isOn)
})
}
onItemMouseUp = () => {
this.setState({
isOn:false
}, () => {
console.log(this.state.isOn)
})
}
render() {
return(
<ImageBackground source={background} style={styles.background}>
<TouchableOpacity
onPressIn={this.onItemMouseDown}
onPressOut={this.onItemMouseUp}
>
<Text style={styles.touchbutton}>Touch this</Text>
</TouchableOpacity>
{this.state.isOn === true ?
<View style={styles.container}>
{/* <Image source={frame1}></Image> */} //I can render this image if this.state.isOn is true
{Images.map((item, index) => { //but this does not show ANYTHING!
const opacity = this.opacity[index];
{/* console.log(item)
console.log(index) */}
return(
<Animated.View
key={item.id}
style={[styles.anim, {animations: item, opacity}]}
/>
)
})}
</View>
: null }
</ImageBackground>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: 'center',
},
background: {
flex: 1,
resizeMode: "cover",
justifyContent: "center",
alignItems: 'center',
},
anim: {
width: 100,
height: 100,
},
touchbutton: {
flex: 1,
position: 'relative',
marginTop: 300,
},
touchbuttontest: {
flex:1,
position: 'relative',
marginTop: 200,
}
});
Как уже упоминалось, ничего не появляется. Я не уверен, что это бит:
<Animated.View
key={item.id}
style={[styles.anim, {animations: item, opacity}]}
/>
, в частности линия стиля. Я не уверен, что это правильно. Я не совсем понимаю, что там происходит. Не знаю, что поставить вместо animations: item. Я думаю, это должно быть свойство чего-то, но чего, я не знаю. Я наблюдал за этим, и ни один из предложенных вариантов не работает: https://egghead.io/lessons/react-animate-styles-of-a-react-native-view-with-animated-timing