如何在平面图中实现动画

Question

我在rn项目中使用平面列表，当我将新数据推送到平面列表时，我的项目1将自动从位置A移动到位置B。但我的问题是，我不希望它只是更改位置，我想使用动画将我的项目(从位置A移到位置B)。我该如何实现？非常感谢。

请查看下面链接中的演示图片和视频：https://photos.app.goo.gl/WypswNyA38A2EAPQAhttps://photos.app.goo.gl/Ev1RYMduDj7mxrHn7

Answer 1

您可以使用Animated组件来制作动画。根据附加的视频，将播放两步动画，一步将列表中的项目向上推，另一步将增加列表项目的不透明度。一个简单的方法是添加高度为0的列表项，并使用动画将高度增加到所需的高度，这将完成第一步。第一步完成后，控制opacity从0进入1。

接下来，当列表项添加到列表中时，您需要启动动画，componentDidMount是正确的位置。请考虑执行上述步骤的以下组件。

import React from 'react';
import { Animated } from 'react-native';
class AnimatedListItem extends React.Component {
constructor(...props) {
super(...props);
this.state = {
height: new Animated.Value(0),
opacity: new Animated.Value(0)
};
}
componentDidMount() {
Animated.sequence([
Animated.timing(
this.state.height,
{
toValue: this.props.height,
duration: this.props.duration || 1000
}
),
Animated.timing(
this.state.opacity,
{
toValue: 1,
duration: this.props.duration || 1000
}
)
]).start();
}
render() {
const { height, opacity } = this.state;
return (
<Animated.View
style={{
...this.props.style,
height: height,
opacity: opacity
}}
>
{this.props.children}
</Animated.View>
);
}
}
export default AnimatedListItem;

在上面的片段中，两个动画被传递给Animated.sequence([...])方法，以便一个接一个地设置动画。

您现在可以在renderItem方法中使用上述组件，如

renderItem = () => {
return (
<AnimatedListItem height={50} duration={800} style={...}>
/* render actual component here */
</AnimatedListItem>
);
}

希望这会有所帮助！

注意：这是实现您想要的目标的最低限度的示例。