React Native中的动画过渡! [译]

原文: 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

我们可以看到这样一组动画。

工具栏平铺（显示/隐藏）
底部栏（显示/隐藏）
移动选定的项目
隐藏所有其他项目
显示详细信息项目甚至更多。

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 (
      {this.props.children}
    );
  }
}

现在我们来看看如何使用react-native-motion来实现这一点。我知道动画通常非常具体。我知道React Native提供了非常强大的动画API。无论如何，拥有一个拥有基本动画库会很棒。

import { TranslateYAndOpacity } from 'react-native-motion';

class ToolbarTitle extends PureComponent {
  render() {
    return (
      
        
          // ...
        
      
    );
  }
}

共享元素

这一挑战最大的问题是选中列表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 (
      
        {listItemNode}
      
    );
  }
}

我们在List Page中指定了SharedElement的源元素。现在，我们需要为“详细信息”页面上的目标元素执行几乎相同的操作。以此知道我们想要移动共享元素的位置。

// Detail page with a destination shared element
import { SharedElement } from 'react-native-motion';

class DetailPage extends Component {
  render() {
    return (
      
        {listItemNode}
      
    );
  }
}

魔力到底在哪里？

我们如何将相对定位的元素从一个页面移动到另一个页面？其实，我们不能。 SharedElement的工作原理是这样的：

获取源元素的位置
获取目标元素的位置（显然，如果没有这个步骤，动画将无法启动）
创建共享元素的一个克隆（重点的魔力！）
在屏幕上方渲染一个新图层
渲染将覆盖源元素的克隆元素（在源元素的位置）
开始移动到目标位置
一旦到达目的地位置，移除克隆的元素

The magic

您大概可以想象在同一时刻同一个React节点有3个元素。这是因为在移动动画期间，List Page被Detail Page覆盖。这就是为什么我们可以看到所有3个元素。但是我们想要创造一个视觉效果，即我们实际上是移动了原始的源元素（实际上这只是一种错觉）。

SharedElement timeline

你可以看到A点和B点。这是移动进行的时间段。你也可以看到SharedElement触发了一些有用的事件。在这种情况下，我们使用WillStart和DidFinish事件。当开始移动到目的地时，将源元素和目标元素的透明度设置为0，并在动画完成后将目标元素的透明度恢复为1。

你怎么看？

react-native-motion仍然还在维护和支持中。这绝对不是这个库的最终稳定版本。但我希望这是一个好开始我很想听听你对此有何看法！