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 :)

如果這篇文章對您有幫助，請為我鼓掌。 這會激勵我寫更多的東西:)

翻譯自: https://www.freecodecamp.org/news/bubble-animation-with-react-native-72674eab073a/