The Math behind animations is a new series that explores the simple and yet powerful mathematical tools that are used in everyday apps.
The goal is to showcase how useful these topics can be when seen under the prism of app development.
Back to the web: we introduced canvaskit-js, a 20kb polyfill of canvaskit-wasm that targets web APIs directly.
The project was built around three main use cases:
* React Native Skia
* Flutter
* Vanilla Web development
Eager to hear your feedback on this.
We're about to offer 3d transforms in RN Skia. Now, I would like the blur value of the pixel to be based on the z coordinate. That should be doable, right.
Animation Worklets are not only a better API. It's a more powerful one too. Here the text values are formatted on the UI thread, which was not previously doable in v1.
SVG Morphing with React Native Reanimated is not perfect yet but it's getting there, I will investigate Android support as well as Rotational Path morphing for smoother effects.
This demo is now almost 100x faster with the new Atlas API. Here Reanimated does important uplifting for us.
@reactiive_
and I will be polishing this demo and delivering it to you as a small but compelling collab 😇
You can animate your SVGs with Skia by parsing the XML on every frame (it's on a separate thread and supports SVG filters). But
@chrfalch
& I may have something much better in the works. A drop-in replacement to react-native-svg may be closer to what we originally thought.
This week's episode is a funky one. We use the new Transition API from Reanimated to build the iconic opened tabs transition from Safari. Thanks to this new technic, we can build this effect with only a few lines of code. Hope that you'll enjoy the show 🍿
Just published react-native-reanimated
@1
.3.0 to address some of the compatibility issues with RN 0.61 – there are more changes to come but hope this one will resolve problems most people were facing after RN upgrade
Excited to share that React Native is the Future of Mobile at
@Shopify
😎
- Our in production
@reactnative
apps have 95%+ code shared between iOS and Android 🤯
- We're hiring native mobile and web developers
@ShopifyEng
- We're contributing back to OSS👊🏽
With Reanimated 2, we can run linear algebra on the UI thread to make 3d projections. In this little demo, there is no setRequestFrame() nor messages crossing the native bridge.