原文: Animated Transition in React Native!
作者: Jiří Otáhal
站点: Medium
这篇文章有近15k的浏览量。 对于某些人来说，它可能不是什么，但对我来说，这是一个很大的动力。 这就是为什么我决定创建Pineapple — Financial Manager。 在仅仅22天的时间里，我完成了iOS版本，Android版本和网站演示，花费了300美元，并撰写了一些关于这方面的文章。 不能说这次我很享受。 你也应该尝试一下！
最近我试图从下一个动画挑战中获得灵感。 由此我们去看一下Ivan Parfenov 创建的。 我很好奇，如果我能够使用React Native来实现这种转换效果。 为什么我们甚至需要像这样的动画？ 阅读Pablo Stanley的优秀UI动画技巧。
For PLΛTES by Ivan Parfenov
For PLΛTES by Ivan Parfenov
我们可以看到这样一组动画。
- 工具栏平铺（显示/隐藏）
- 底部栏（显示/隐藏）
- 移动选定的项目
- 隐藏所有其他项目
- 显示详细信息项目甚至更多。
Timeline of animations
关于转换的难点在于同步所有这些动画。 我们不能真正卸载列表页面并显示详细信息页面，因为我们需要等到所有动画完成。 另外，我很喜欢干净的代码。 易于维护。 如果您曾尝试为您的项目实现动画，那么代码通常会变得混乱。 充满辅助变量，疯狂的计算等。这就是为什么我想介绍react-native-motion。
Timeline of animations.gif
关于react-native-motion的想法
你看到工具栏标题的动画了吗？ 您只需将标题移动一点并以动画的方式将透明度设置为0/1。 没什么大不了！ 但是正因为如此，你需要编写这样的代码。 甚至在你真正开始为该组件编写UI之前。
class TranslateYAndOpacity extends PureComponent {
constructor(props) {
// ...
this.state = {
opacityValue: new Animated.Value(opacityMin),
translateYValue: new Animated.Value(translateYMin),
};
// ...
}
componentDidMount() {
// ...
this.show(this.props);
// ...
}
componentWillReceiveProps(nextProps) {
if (!this.props.isHidden && nextProps.isHidden) {
this.hide(nextProps);
}
if (this.props.isHidden && !nextProps.isHidden) {
this.show(nextProps);
}
}
show(props) {
// ...
Animated.parallel([
Animated.timing(opacityValue, { /* ... */ }),
Animated.timing(translateYValue, { /* ... */ }),
]).start();
}
hide(props) {
// ...
Animated.parallel([
Animated.timing(opacityValue, { /* ... */ }),
Animated.timing(translateYValue, { /* ... */ }),
]).start();
}
render() {
const { opacityValue, translateYValue } = this.state;
const animatedStyle = {
opacity: opacityValue,
transform: [{ translateY: translateYValue }],
};
return (
<Animated.View style={animatedStyle}>{this.props.children}</Animated.View>
);
}
}
现在我们来看看如何使用react-native-motion来实现这一点。 我知道动画通常非常具体。 我知道React Native提供了非常强大的动画API。 无论如何，拥有一个拥有基本动画库会很棒。
import { TranslateYAndOpacity } from 'react-native-motion';
class ToolbarTitle extends PureComponent {
render() {
return (
<TranslateYAndOpacity duration={250}>
<View>
// ...
</View>
</TranslateYAndOpacity>
);
}
}
共享元素
这一挑战最大的问题是选中列表Cell的移动。 这个Cell是列表页面和详情页面之间共享的。 当元素实际上没有完全定位时，如何将Cell从FlatList移动到Detail页面的顶部？ 用react-native-motion就很容易。
// List items page with source of SharedElement
import { SharedElement } from 'react-native-motion';
class ListPage extends Component {
render() {
return (
<SharedElement id="source">
<View>{listItemNode}</View>
</SharedElement>
);
}
}
我们在List Page中指定了SharedElement的源元素。 现在，我们需要为“详细信息”页面上的目标元素执行几乎相同的操作。 以此知道我们想要移动共享元素的位置。
// Detail page with a destination shared element
import { SharedElement } from 'react-native-motion';
class DetailPage extends Component {
render() {
return (
<SharedElement sourceId="source">
<View>{listItemNode}</View>
</SharedElement>
);
}
}
魔力到底在哪里？
我们如何将相对定位的元素从一个页面移动到另一个页面？ 其实，我们不能。 SharedElement的工作原理是这样的：
- 获取源元素的位置
- 获取目标元素的位置（显然，如果没有这个步骤，动画将无法启动）
- 创建共享元素的一个克隆（重点的魔力！）
- 在屏幕上方渲染一个新图层
- 渲染将覆盖源元素的克隆元素（在源元素的位置）
- 开始移动到目标位置
- 一旦到达目的地位置，移除克隆的元素
The magic
您大概可以想象在同一时刻同一个React节点有3个元素。 这是因为在移动动画期间，List Page被Detail Page覆盖。 这就是为什么我们可以看到所有3个元素。 但是我们想要创造一个视觉效果，即我们实际上是移动了原始的源元素（实际上这只是一种错觉）。
SharedElement timeline
你可以看到A点和B点。这是移动进行的时间段。 你也可以看到SharedElement触发了一些有用的事件。 在这种情况下，我们使用WillStart和DidFinish事件。 当开始移动到目的地时，将源元素和目标元素的透明度设置为0，并在动画完成后将目标元素的透明度恢复为1。
你怎么看？
react-native-motion仍然还在维护和支持中。 这绝对不是这个库的最终稳定版本。 但我希望这是一个好开始😊我很想听听你对此有何看法！
原文: Animated Transition in React Native!
作者: Jiří Otáhal
站点: Medium
网友评论