- 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…

Continue reading “A tiny expression compiler for React Native Animated values”