Back to Blog Home
← all posts

Using css animations in NativeScript

March 7, 2016 — by Tsvetan Raikov

Fast track to the sample app repo.

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: new color.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:

// iOS: Objective C

[UIView animateWithDuration:1.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                           CGAffineTransform transform = CGAffineTransformTranslate(view.transform, 100, 100);
                           transform = CGAffineTransformScale(transform, 1.5, 1.5);
                           view.transform = transform;
                           view.backgroundColor = [UIColor colorWithRed:0.0 green:0.6 blue:1.0 alpha:1.];
                           view.alpha = 0.5;
                       }
                    completion:^(BOOL finished) {
                    }];

 

// Java: Android

ObjectAnimator translateX = ObjectAnimator.ofFloat(myView, "translateX", 100f);
ObjectAnimator translateY = ObjectAnimator.ofFloat(myView, "translatrY", 100f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(myView, "scaleX", 100f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(myView, "scaleY", 100f);
ObjectAnimator alpha = ObjectAnimator.ofFloat(myView, "alpha", 0.5f);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
AnimatorSet animSet = new AnimatorSet();
animSet.playTogether(translateX, translateY, scaleX, scaleY, colorAnimation, alpha);
translateX.setDuration(1200);
translateY.setDuration(1200);
//…
animSet.start();

 
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:

@import: "~/css/animate.css"
.animation {
        animation-name: wobble;
        animation-duration: 3s;
}

 

You can check all of these CSS based animations on the website of animate-css https://daneden.github.io/animate.css/ and play for a while.

Running the sample app

The good thing about being open source is that you can track our progress. I prepared a custom build and updated our animations demo application accordingly. Just follow those steps:

  1. Clone the following GitHub repo: https://github.com/NativeScript/animation-demo
  2. cd animation-demo
  3. git checkout feature/css-animations-release
  4. npm install
  5. You are ready to go.
Help the NativeScript community and share the news on twitter!