У меня есть список элементов, отображаемых в плоском списке, и я анимирую каждый из них.
В конструкторе я присваиваю значения для анимации
constructor(props){
super(props);
this.state = { ... };
this.height = new Animated.Value(SCREEN_WIDTH/1.8);
this.width = new Animated.Value(SCREEN_WIDTH/2.5);
}
Поэтому я отображаю элементы по индексу вполучить их различные значения, например:
renderStyle
if(index == 0){
return {
marginRight: SCREEN_WIDTH / 35,
marginLeft: SCREEN_WIDTH / 35,
margin: SCREEN_WIDTH / 50,
width: this.width,
height: this.height,
opacity: this.state.opacity,
borderRadius: SCREEN_WIDTH / 36,
}
}
if(index == 1){
this.height.setValue(SCREEN_WIDTH/1.5);
return {
marginRight: SCREEN_WIDTH / 35,
marginLeft: SCREEN_WIDTH / 35,
margin: SCREEN_WIDTH / 50,
width: this.width,
height: this.height,
opacity: this.state.opacity,
borderRadius: SCREEN_WIDTH / 36,
}
}
, затем я анимирую элементы, когда пользователь нажимает на них.Индекс = 0 анимирует правильно, но индекс = 1, который я установил новое значение, вообще не анимируется, я не понимаю, что с ним не так?Не могли бы вы объяснить, пожалуйста?
Функция анимации:
Animated.parallel([
Animated.timing(this.width,{
toValue: SCREEN_WIDTH/1.2,
duration: 750
}),
Animated.timing(this.height,{
toValue: SCREEN_HEIGHT/1.2,
duration: 750
}),
Animated.timing(this.state.opacity,{
toValue: 0,
duration: 750
}),
]).start(() => this.props.go(item));
setTimeout(() => Actions.video({item: item}), 800);
Визуализация
return
(
<Animated.View pointerEvents={this.state.pointer} onLayout={({nativeEvent}) => {
this.setState({
measurements: nativeEvent.layout
})
}}>
<TouchableOpacity onPress={this.captureAnimation.bind(this, item, index)}>
<AnimatedImage source={{uri: 'http://' + item.info.picture_path}} style={this.renderStyle(index)}/>
</View>
</TouchableOpacity>
</Animated.View>
);
Это другой файл JS, поэтому flatlistработает на домашней странице, и метод renderItem получает значения в этом JS-файле, чтобы иметь возможность анимировать каждое из них.
Редактировать: я нашел альтернативное решение, но в любом случае его не объясняют, почему после установки значения анимация не выполняетсяработа.