最近我试图为下一个动画寻衅探求灵感。
我们开始吧 —— 由 Ivan Parfenov 创建。
我很好奇我是否能够用 React Native 来做这个过渡效果。
你可以在我的 expo 帐户中查当作果！
为什么我们还须要这样的动画？来读读 Pablo Stanley 写的绝佳的 UI 动画技巧。

Ivan Parfenov 设计的 PLΛTES。

我们可以看到有几个动画。
工具栏（显示/隐蔽），底栏（显示/隐蔽），移动所选项目，隐蔽所有其他项目，显示详细信息项目乃至更多。

动画韶光线。

过渡动画的难点在于同步所有这些动画。
由于我们须要等到所有动画都完成，我们无法真正移除列表页面并显示详细信息页面。
此外，我对整洁的代码有所追求。
代码要易于掩护，如果您曾考试测验为项目实现动画，则代码常日会变得混乱。
到处都是赞助变量，各种打算等。
这正是我想先容 react-native-motion 的缘故原由。

对 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> ); }}复制代码

共享的元素

这一寻衅的最大问题是移动选定的列表项。
列表页面和详细信息页面之间共享的项目。
当元素实际上没有绝对定位时，如何将项目从 FlatList 移动到 Detail 的页面顶部？利用 react-native-motion 非常随意马虎。

// List items page with source of SharedElementimport { SharedElement } from 'react-native-motion';class ListPage extends Component { render() { return ( <SharedElement id=\"大众source\"大众> <View>{listItemNode}</View> </SharedElement> ); }}复制代码

我们在 ListPage 上指定了 SharedElement 的 source 元素。
现在我们须要对 DetailPage 上的目标元素实行险些相同的操作，来知道我们想要移动共享元素的位置。

// Detail page with a destination shared elementimport { SharedElement } from 'react-native-motion';class DetailPage extends Component { render() { return ( <SharedElement sourceId=\"大众source\公众> <View>{listItemNode}</View> </SharedElement> ); }}复制代码

黑科技在哪里？

我们如何将相对定位的元素从一个页面移动到另一个页面？实际上我们做不到。
SharedElement 的事情办法如下：

获取源 element 的位置获取目标 element 的位置（显然，没有这一步，动画不能被初始化）创建共享的 element（黑科技！
）在屏幕上方渲染一个新图层渲染 element 元素，将覆盖源 element（在源 element 的位置上）开始移动到目标 element 位置一旦移动到目标 element 位置后，删除克隆 element

你可以想象在同一时候同一个 React Node 有 3 个 element。
这是由于在移动动画期间，DetailPage 会覆盖列表页面。
这便是为什么我们可以看到所有 3 个元素。
但是我们想要创造一种我们实际移动了原始 element 的幻觉。

SharedElement 的韶光线。

您可以看到 A 点和 B 点。
这是移动正在实行的韶光段。
您还可以看到 SharedElement 触发一些有用的事宜。
在这种情形下，我们利用 WillStart 和 DidFinish 事宜。
在启动移动目标 element 时，将源 element 和目标 element 的不透明度设置为 0，并在动画完成后将目标 element 的不透明度设置为 1。

你以为怎么样？

社区这里一贯不断在掩护和更新：react-native-motion。
这绝不是这个库的终极和稳定版本。
但是一个好的开始 :) 我很想听听你怎么想！

我一贯在探求新的寻衅和机会。
如果您须要帮助，请见告我，我很乐意谈论它。

LinkedIn || Github || Twitter || Facebook || 500px

如果创造译文存在缺点或其他须要改进的地方，欢迎到 翻译操持 对译文进行修正并 PR，也可得到相应褒奖积分。
文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

翻译操持 是一个翻译优质互联网技能文章的社区，文章来源为 上的英文分享文章。
内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 翻译操持、官方微博、知乎专栏。