Animation

Animating view properties requires the "ui/animation" module.

import * as animation from "tns-core-modules/ui/animation";

Animating properties

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

Cancelling animation

var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 5 });

animation1.play()
    .then(() => {
        //console.log("Animation finished");
    })
    .catch((e) => {
        //console.log("Animation cancelled");
    });
animation1.cancel();

Chaining animations

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

Reusing animations

var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 5 });
var animation2 = label.createAnimation({ translate: { x: 0, y: 0 }, duration: 5 });

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

Animating multiple views simultaneously

var animations: Array<animation.AnimationDefinition> = [
    { target: label1, translate: { x: 200, y: 200 }, duration: 5, delay: 0 },
    { target: label2, translate: { x: 200, y: 200 }, duration: 5, delay: 2 },
    { target: label3, translate: { x: 200, y: 200 }, duration: 5, delay: 4 },
];
var a = new animation.Animation(animations);
a.play()
    .then(() => {
        //console.log("Animations finished");
    })
    .catch((e) => {
        console.log(e.message);
    });

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.