使用React Native进行气泡动画

by Narendra N Shetty

由纳伦德拉·N·谢蒂(Narendra N Shetty)

使用React Native进行气泡动画 (Bubble animation with React Native)

使用`Animated`和`PanResponder`构建React Native应用程序时获得的经验教训 (Lessons learned while building a React Native App using `Animated` and `PanResponder`)

In this article, I’ll talk about how I implemented an app transition which I found on Dribbble by Ramotion.

在本文中，我将讨论如何实现由Ramotion在Dribbble上发现的应用程序过渡。

This pagination controller can be used for onboarding flow or for a tutorial.

该分页控制器可用于入门流程或教程。

The complete version is published in Expo, and you can get it by opening the Expo app and scanning this QR code:

完整版本发布在Expo中，您可以通过打开Expo应用并扫描以下QR码来获取它：

让我们开始吧？ (Let’s begin, shall we?)

Here’s how I built the background:

这是我建立背景的方式：

I had View holding the background color. This includes Animated.View for the bubble animation. Its position was absolute so that it stayed on top of the screen. I also added some basic styles.

我让View保持了背景色。这包括气泡动画的Animated.View 。它的位置是绝对的，因此它保持在屏幕顶部。我还添加了一些基本样式。

Then, I animated the bubble by expanding from 0 to max using the CSS transform scale with Animated.timing.

然后，我通过使用Animated.timingCSS变换比例将气泡从0扩展到最大值，从而对气泡进行了Animated.timing 。

The above animation needed to trigger based on user interaction. First I used TouchableWithoutFeedback. Then I changed it with gestures.

上面的动画需要基于用户交互来触发。首先，我使用了TouchableWithoutFeedback 。然后我用手势更改了它。

I positioned the bubble according to the gif, which animated from the bottom. I did this using top and left property.

我根据从底部开始动画的gif定位气泡。我使用top和left属性来完成此操作。

Neat! Results are as expected except the color. We’ll get back to that later.

整齐！结果与预期的一样，除了颜色。我们稍后再讲。

Now I restructured the code by moving the bubble logic into a separate component called CircleTransition. Then I triggered the animation from the parent component.

现在，我通过将气泡逻辑移到称为CircleTransition.的单独组件中来重组代码CircleTransition. 然后，我从父组件触发了动画。

Then it was time when to tackle the color. To make the bubble animate with the new color, I passed the new color into the component. And after the transition, I hid the bubble.

然后是时候解决颜色了。为了使气泡以新颜色动画，我将新颜色传递到组件中。过渡之后，我躲了起来。

Can you see something weird in the above transition?

在上述转换中，您能看到一些奇怪的东西吗？

During the second bubble transition, the background color is fell back to the first color. I needed to update the background color to the new color with the bubble transitioned.

在第二个气泡过渡期间，背景颜色会变回第一种颜色。我需要在过渡气泡后将背景色更新为新颜色。

I passed a callback to the start method which executed when the transition completed.

我将回调传递给start方法，该方法在过渡完成时执行。

Voila! It’s all set. Now I had the basic animation working.

瞧！都准备好了现在，我可以使用基本的动画了。

Next I got into the gesture. The bubble transitions when the user swipes left or right according to the gif.

接下来，我进入了手势。当用户根据gif左右滑动时，气泡会转变。

I created a new component called Swipe. It contains all the logic for the gesture and replacesTouchableWithoutFeedback.

我创建了一个名为Swipe的新组件。它包含手势的所有逻辑，并替换了TouchableWithoutFeedback 。

I used PanResponderwhich reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches. It can also recognize simple multi-touch gestures. For more on this you can go here and here.

我使用了PanResponder ，它将多个触摸调和为一个手势。它使单点触摸手势具有额外的触摸弹性。它还可以识别简单的多点触摸手势。有关更多信息，您可以在这里和这里。

Now for the logic of the gestures.

现在了解手势的逻辑。

First I needed to figure out which direction the user is swiping. I only need to animate when the user swipes left or right. I also needed to setup some threshold to determine if it’s actually a swipe or not.

首先，我需要弄清楚用户向哪个方向滑动。当用户向左或向右滑动时，只需要设置动画即可。我还需要设置一些阈值，以确定是否实际上是刷卡。

If it was a valid swipe, I triggered the appropriate action.

如果刷卡有效，则触发了相应的操作。

Yes! You guessed it right. I have gotten what I wanted to achieve with the gesture. Then I added an action for swipeRight. The gesture was completed with a bit of refactoring.

是! 你猜对了。我已经通过手势获得了想要实现的目标。然后我为swipeRight添加了一个动作。手势完成了一点重构。

That’s it! This was the most complex part in the app.

而已！这是应用程序中最复杂的部分。

I won’t show my complete work on this app. The information in this post should be enough help you build your own. Fork this and try to complete your app to match the above gif.

我不会在此应用程序上显示我的完整作品。这篇文章中的信息应该足以帮助您构建自己的信息。对此进行分叉，并尝试完成您的应用以匹配上述gif。

If you are stuck and need any help, final version is in result branch, have a peek. Also you can ping me on Twitter @narendra_shetty or comment below.

如果您遇到困难并需要任何帮助，则最终版本在result分支中，请查看。您也可以在Twitter @narendra_shetty上对我ping或在下面发表评论。

And when you complete, please share your Expo/GitHub link.

完成后，请分享您的Expo / GitHub链接。

If this article was of any help to you, please clap for me. It will motivate me to write more :)

如果这篇文章对您有帮助，请为我鼓掌。这会激励我写更多的东西:)