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:

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);
});

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);
        });
}

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);
        });
}

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>