- Its expressive API lets developers compose animated effects based on time, spring physics and even real-time user interaction with distinct ease.Iâve recently released animated.macro, a small JavaScript package that improves the ergonomics of working with animated values in React Native appsâââand, more importantly, has been fun to build.
- The results of these operations can then be used anywhere the basic values can.For instance, hereâs how you add two animated values together:const result = Animated.add(x, y);And hereâs a slightly more involved calculation:const result = Animated.modulo( Animated.add(phase, Math.PI * 2 + angle), Math.PI * 2);What can beÂ improvedOn closer inspection, the…
- This can be an inconvenience when refactoring animation code.In the second example, the types of phase and angle (and of Math.PI) similarly dictate the shape of the surrounding codeâââe.g. Animated values canât be added with + and plain numbers canât be added with Animated.add().
- Can we do better?Yes.Introducing animated.macro đşđ˝đ˘animated.macro lets you write JS-like arithmetic expressions that operate on animated values and plain numbers alike.
- These expressions take the form of tagged template literals that evaluate to animated values.The second example above can now be written as:import animated from “animated.macro”;const result = animated` (${phase} + ${Math.PI} * 2 + ${angle}) % (${Math.PI} * 2)`;Addition, subtraction, multiplication, division and modulo are all supported, with the same…

The Animated library, which allows animations to be set up in JS and executed on the native thread, is a mainstay of the React Native programming model. Its expressive API lets developers compose…

@motiz88:

I just published “A tiny expression compiler for React Native Animated values”

A tiny expression compiler for React Native AnimatedÂ valuestl;dr: Get animated.macro on GitHub, npm, Snack.The Animated library, which allows animations to be set up in JS and executed on the native thread, is a mainstay of the React Native programming model. Its expressive API lets developers compose animated effects based on time, spring physics and even real-time user interaction with distinct ease.Iâve recently released animated.macro, a small JavaScript package that improves the ergonomics of working with animated values in React Native appsâââand, more importantly, has been fun to build. đIn this post Iâll detail the ideas behind this package and how I went about building it.A brief introduction to Animated.ValueThe React Native docs include a fantastic guide to animations which I wonât repeat here. Central to things is the Animated.Value class, which represents an opaque handle to a numeric variable. Itâs opaque in the sense that its actual contents are maintained out of sight, often on the native thread, where JS canât access them directly.In lieu of direct access, there are methods for controlling, interpolating and declaratively combining values. Thereâs one particular set of methods that let you combine values mathematically, via addition, multiplication, division and modulo. The results of these operations can then be used anywhere the basic values can.For instance, hereâs how you add two animated values together:const result = Animated.add(x, y);And hereâs a slightly more involved calculation:const result = Animated.modulo( Animated.add(phase, Math.PI * 2 + angle), Math.PI * 2);What can beÂ improvedOn closer inspection, the above examples exhibit a…

A tiny expression compiler for React Native Animated values