Victorian GIF

Our Task
We engaged in a 1 week sprint to test React Native and Unity’s environments for importing, creating, and modifying complex animation sequences. Our requirements were to ensure that these animations were smooth (ideally 60fps) and performant on older iOS/Android devices. This series of experiments was designed to help Substantial determine the proper frameworks to use when designing interactive media for cross-platform use.

Tech Experiments with React Native
React Native is one of the most popular platforms of choice for current mobile development. Its cross-platform nature makes it easy to create interfaces that work across the web, iOS, and Android. Lottie is a cross-platform library that renders animations from After Effects in iOS, Android, and React Native. The combination of the two allows designers and developers to create and refine animations once with less concern for the final destination.

Our findings from importing and modifying Lottie animations in React Native:

Takeaway: React Native and Lottie is an effective way to import .json animations into your app, however there are many design limitations to keep in mind when creating custom animations.

Details:

  • Controlling animations with gestures (i.e. drag & drop) seems to be a performance risk.
  • Lottie imported effortlessly and allows frame control for pause/play/reverse. Lottie importing to React Native is limited as to what visuals the animations can contain (no images, no gradients, little FX support ).
  • We were able to successfully create a custom animation with sound fx and get both to respond to a button press event in our demo.
  • Attempts to use middleware animation tools like Spine in combination with React Native were not successful. Spine had many different runtimes but nothing out of the box for RN. We would have had to import WebGL-react-native and glue it together with our own custom tooling.

Tech Experiments with Unity3D
Unity3D is one of the most popular platforms for game and simulation development. It supports 2D and 3D graphics and its roots in modern programming languages have made it a tool for traditional developers to produce graphics, animations, and games with less of a learning curve. It is also cross-platform, targeting all of the major mobile, gaming, and VR platforms, 27 in all.

Our findings from Unity3d experiments importing animation and UI layouts:

Takeaway: We were able to replicate a traditional app UI system with an SVG importer, as well as handle complex animation systems that can can be created using various external tools. We were also able make a new ball animation in higher fidelity with more control of the animations using Spine. Ultimately, Unity allows for denser animation imports and tight control on animation playback.

Traditional UI System in Unity

Details:

  • There are many different ways we can import animation types into Unity. Some include:
    1. Import from After Effects to Unity
    2. Import SVG files and create animations in Unity
    3. Build from scratch using Unity Animator
    4. Import from other 3rd party tools such as Spine, Toon Boom, Nima
  • Spine allows for character rigging and linking many animations together for one set of files. For example, a ball can bounce, roll, pop, all with one game object. This is valuable if the app needs to handle many complex animations at the same time.
  • UGUI and SVG importer on first tests seems to be an efficient workflow for adapting complex UI design into Unity’s engine. UGUI offers a several basic components built in, but traditional iOS/Android OS animations would have to be recreated.

Other Tech Experiments
Our findings from exploring options with various other middleware tools:

  • We ran a VPlay experiment which is a interface builder tool for ios/android games and apps. This tool seems to be intended for lightweight apps and games.
  • Webgl-react-native is an option for rendering advance animation sequences in React Native but can be difficult to implement. More research needed here.
  • One platform we didn’t explore during this set of experiments is Three.js, which allows the creation of 2D/3D animations as a part of a website using JavaScript without relying on proprietary browser plugins It’s simpler than WebGL and is worthy of more attention.

Synopsis
Frameworks like React Native and Unity make animation much easier to implement. Choosing a platform is largely dependent on the final design vision of the app. If the app is predominantly focused on micro-game like interactions, Unity is a good consideration. If the app is predominately user interfaces containing simple animations sequences, React Native is a good framework to use.

In any of these solutions, animation sequences would need to be created with After Effects or equivalent middleware animation tools. Having someone on your team who can interpolate their animation concepts into easily modifiable animation sequences is the key to productivity in this case. So while modern frameworks make this easier, there’s still plenty of work to be done. If this is all sounding obvious to you, then you’re on the right track.

Want to talk more about animation practices? Get in touch.