With our 1.3 release, coming in September, we are adding the highly requested Animations support in NativeScript. There will be a dedicated blog post explaining in-depth about our animations support. If you are impatient please read more info on the animations in the GitHub issue. If you are curious how the animations are implemented and you like to read TypeScript code - please see the implementation here.
In this blog post I will share a simple example, created by one of the senior developers in the team Alex, which was inspired by an animated GIF in a tweet:
So we decided to dogfood our own animations and to see how easy it will be implement this in NativeScript in a cross-platform way. It turned out to be quite easy - just a few lines of code.
You can see the entire source code here, but here is the most interesting part.
First we need to initialize the “circle” elements. In our case we are simple creating empty buttons and applying a simple CSS definition over them:
Now when the elements are on the screen we should initialize the animation:
The animation code that actually performs this beautiful animations is here:
Now the next step for you is to play with the shiny new animations API in NativeScript and send us any feedback!