NativeScript Angular

Animations

One of the ways to improve the attractiveness of your application is by adding animations. NativeScript exposes a simple and easy, but powerful enough API to allow animating almost every native element in your application.

Animating Properties

NativeScript allows us to animate the properties of the element we want. Once the parameters of the animate method are set (e.g. scale, rotate, duration, etc.), the properties will be animated.

NativeScript lets you animate the following properties:

opacity backgroundColor translateX and translateY scaleX and scaleY rotate width and height

In every animation, you can control the following properties:

duration: The length of the animation. delay: The amount of time to delay starting the animation. iterations: Specifies how many times the animation should be played. curve: The speed curve of the animation. Available options are defined below.

Property values:

JavaScript Property Value Description
backgroundColor Accepts hex or Color value.
curve Timing funciton that uses the AnimationCurve enumeration.
delay Delay the animation start in milliseconds.
duration Duration of animation in milliseconds.
iterations Number of times to repeat the animation.
opacity Number value (0 - 1 where 0 is full opacity).
rotate Number value for degrees (0 - 360 degrees).
scale Object value { x:1, y:2 } (1 = Original scale).
translate Object value { x:100, y:200 } (Translate by given DIPs).
width Number value.
height Number value.

A simple example is animating the opacity and background of a label.

label.animate({
    opacity: 0.75,
    backgroundColor: new Color("Blue"),
    translate: { x: 200, y: 200 },
    scale: { x: 2, y: 2 },
    rotate: 180,
    duration: 3000,
    delay: 20,
    iterations: 5,
    curve: enums.AnimationCurve.easeIn
}).then(() => {
    console.log("Animation finished.");
}).catch((e) => {
    console.log(e.message);
});

Improve this document

Demo Source


Chaining Animations

Animations can be also mapped one after another, thus resulting in a single chain of a more complicated one.

animate(target: View) {
    let duration = 300;
    target.animate({ opacity: 0, duration: duration })
        .then(() => target.animate({ opacity: 1, duration: duration }))
        .then(() => target.animate({ translate: { x: 200, y: 200 }, duration: duration }))
        .then(() => target.animate({ translate: { x: 0, y: 0 }, duration: duration }))
        .then(() => target.animate({ scale: { x: 5, y: 5 }, duration: duration }))
        .then(() => target.animate({ scale: { x: 1, y: 1 }, duration: duration }))
        .then(() => target.animate({ rotate: 180, duration: duration }))
        .then(() => target.animate({ rotate: 0, duration: duration }))
        .then(() => {
            console.log("Animation finished");
        })
        .catch((e) => {
            console.log(e.message);
        });
}

Improve this document

Demo Source


Multiple Views

If appropriate, you can animate multiple items simultaneously. It is as easy as placing all the animations you want in a single array and playing them with the help of Animation element.

// import { Animation, AnimationDefinition } from "tns-core-modules/ui/animation";
animate() {
    let definitions = new Array<AnimationDefinition>();
    let a1: AnimationDefinition = {
        target: view1,
        translate: { x: 200, y: 0 },
        duration: 3000
    };
    definitions.push(a1);

    let a2: AnimationDefinition = {
        target: view2,
        translate: { x: 0, y: 200 },
        duration: 3000
    };
    definitions.push(a2);

    let a3: AnimationDefinition = {
        target: view3,
        translate: { x: -200, y: 0 },
        duration: 3000
    };
    definitions.push(a3);

    let a4: AnimationDefinition = {
        target: view4,
        translate: { x: 0, y: -200 },
        duration: 3000
    };
    definitions.push(a4);

    let animationSet = new Animation(definitions);

    animationSet.play().then(() => {
        console.log("Animation finished");
    })
        .catch((e) => {
            console.log(e.message);
        });
}

Improve this document

Demo Source


Width Height Properties

Since {N} 6.0, we can animate the width and height properties of views. On the snippets below are demonstrated, how to configure those animations: tns run

@ViewChild("target", { read: ElementRef, static: false }) view: ElementRef;
constructor() { }

animateWidth() {
    this.view.nativeElement.animate({
        width: 320,
        duration: 1000,
        curve: AnimationCurve.easeIn
    });
}

animateHeight() {
    this.view.nativeElement.animate({
        height: 400,
        duration: 1000,
        curve: AnimationCurve.easeIn
    });
}
<GridLayout rows="auto, auto, *">
  <Button row="0" text="Animate height" (tap)="animateHeight()" class="btn btn-primary btn-active" width="80%"></Button>
  <Button row="1" text="Animate width" (tap)="animateWidth()" class="btn btn-primary btn-active" width="80%"></Button>
  <Label row="2" #target text="NativeScript" textWrap="true" marginTop="50"></Label>
</GridLayout>

Improve this document

Demo Source