Using css animations in NativeScript

There are millions of iOS and Android applications out there. In this ecosystem, it’s not an easy task to create an application that stands out and grabs customers’ attention. The app should be clever, fast, and attractive.

One of the ways to improve the attractiveness of your application is by adding animations. We know that it’s hard to achieve fluid and native-looking animations in hybrid apps. Often this results in hybrid developers telling designers “no” to more involved animations. That is why NativeScript already includes an easy and convenient cross-platform API exposing native animations. However, I’m very excited to tell you about something new that is cooking:

This feature is in an experimental state and is not part of the production-ready distribution of NativeScript. We have prepared a special build for you which you can use. Please send us any feedback!

Current (1.6) state of the animations

Currently, in 1.6 version of NativeScript, you can use the raw NativeScript APIs to create animations:

view.animate({

translate: { x: 100, y: 100},

scale: { x: 1.5, y: 1.5 },

backgroundColor: newcolor.Color("#00A0FF"),

opacity: 0.5,

duration: 1200

});

Which, is a heck of a lot cleaner than the code you would have to write using native iOS and Android code:

CSS support for animations

Even though NativeScript’s JavaScript animation APIs are indeed easy-to-use, we realize that web developers like the ability to run animations from CSS, and there are existing CSS properties and conventions for doing just that. Using CSS not only separates animations from your application's logic, and keeps everything clean and simple—it also gives you access to hundreds of predefined and ready-to-use animations. We were curious, what if you could animate native iOS and Android components using the same syntax? Here is a sneak peek:

.animated {

animation-name: animation;

animation-duration: 1.2s;

}

@keyframes animation {

to {

transform: translate(100, 100) scale(1.5, 1.5);

background-color: #00A0FF;

opacity: 0.5;

}

}

Using the animation is simple, just assign the className property of the native object that will be animated:

view.className = "animated";

Here’s what that looks like:

CSS keyframes!

More complex animations canbe constructed by using css keyframes:

@keyframes animation {

from { transform: none; }

20%{ transform: rotate(45); }

50%{ transform: rotate(50) scale(1.2, 1.2) translate(50, 0); }

100%{ transform: rotate(0) scale(1.5, 1.5) translate(100, 0); }

}

Reuse of animate-css in NativeScript

You can get almost every animation from your favorite CSS3 animation library. You could even include animation libraries directly in your application. Let’s use the popular animate-css library as an example:

Enterprise

Stay connected with NativeScript

I agree to receive email communications from Progress Software or its Partners, containing information about Progress Software’s products. Consent may be withdrawn at any time.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.