What's up mobile devs?
Today we're going to develop together from scratch this extraordinary effect inspired by an animation created by Philip Davis in Swift UI.
We will exclusively use React Native Skia to implement it.
My React Native animations course: www.reanimate.dev
Source code: github.com/enzomanuelmangano/...
If you are not familiar with React Native Skia I highly recommend William Candillon's channel and clearly the RN Skia documentation:
- William Candillon channel: / wcandillon
- RN Skia docs: shopify.github.io/react-nativ...
This animation was heavily inspired by this tweet by Philip Davis: twitter.com/philipcdavis/stat...
Another guy named Ashu already published a solution for this animation.
Here's the tweet: twitter.com/aashudubey_ad/sta...
Here's his source code: github.com/Aashu-Dubey/react-...
Support me on Patreon: / reactiive 🤓
Learn more about React Native: www.reactiive.io
Chapters:
00:00 Introduction
01:47 Setup
03:14 Building the Grid
09:30 Adding the SweepGradient
12:12 Refactoring the component
14:24 Handling the touchHandler
18:20 Compute the scale
27:20 Smoothing out the scaling effect
32:20 Let's analyze the transform
38:57 Tuning the constants
40:53 Improving the center of the the transformation
Негізгі бет Grid Magnification in React Native (Skia)
Пікірлер: 19