Animation examples

This article contains examples demonstrating how to animate the animatable view properties. A full list of all animatable properties and a detailed explanation of the animations API is presented here.

The full source code for all samples is located here.

Animated opacity

opacity

view.animate({
    opacity: 0,
    duration: 3000
});

view.animate({
    opacity: 0,
    duration: 3000
});

.view {
    animation-name: opacity;
    animation-duration: 3;
}
@keyframes opacity {
    from { opacity: 1; }
    to { opacity: 0; }
}

Try this in the NativeScript Playground

Animate background color

background-color

view.animate({
    backgroundColor: new colorModule.Color("#3D5AFE"),
    duration: 3000
});

view.animate({
    backgroundColor: new colorModule.Color("#3D5AFE"),
    duration: 3000
});

.view {
    animation-name: backgroundColor;
    animation-duration: 3;
}
@keyframes backgroundColor {
    from { background-color: white; }
    to { background-color: #3D5AFE; }
}

Try this in the NativeScript Playground

Animate position

translate

view.animate({
    translate: { x: 100, y: 100},
    duration: 3000
});

view.animate({
    translate: { x: 100, y: 100},
    duration: 3000
});

.view {
    animation-name: translate;
    animation-duration: 3;
}
@keyframes translate {
    from { transform: translate(0, 0); }
    to { transform: translate(100, 100); }
}

Try this in the NativeScript Playground

Animate scale

scale

view.animate({
    scale: { x: 2, y: 2},
    duration: 3000
});

view.animate({
    scale: { x: 2, y: 2},
    duration: 3000
});

.view {
    animation-name: scale;
    animation-duration: 3;
}
@keyframes scale {
    from { transform: scale(1, 1); }
    to { transform: scale(2, 2); }
}

Try this in the NativeScript Playground

Animate rotate

rotate

view.animate({
    rotate: 360,
    duration: 3000
});

view.animate({
    rotate: 360,
    duration: 3000
});

.view {
    animation-name: rotate;
    animation-duration: 3;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

Try this in the NativeScript Playground

Chaining animations with AnimationSet

chaining-with-animation-set

var definitions = new Array();
definitions.push({ target: view1, translate: { x: 200, y: 0 }, duration: 3000 });
definitions.push({ target: view2, translate: { x: 0, y: 200 }, duration: 3000 });
definitions.push({ target: view3, translate: { x: -200, y: 0 }, duration: 3000 });
definitions.push({ target: view4, translate: { x: 0, y: -200 }, duration: 3000 });
var playSequentially = true;
var animationSet = new animationModule.Animation(definitions, playSequentially);
animationSet.play().then(function () {
    console.log("Animation finished");
})
    .catch(function (e) {
    console.log(e.message);
});

var definitions = new Array<animationModule.AnimationDefinition>();
definitions.push({target: view1, translate: {x: 200, y: 0}, duration: 3000 });
definitions.push({target: view2, translate: {x: 0, y: 200}, duration: 3000 });
definitions.push({target: view3, translate: {x: -200, y: 0}, duration: 3000 });
definitions.push({target: view4, translate: {x: 0, y: -200}, duration: 3000 });
var playSequentially = true;
var animationSet = new animationModule.Animation(definitions, playSequentially);
animationSet.play().then(() => {
    console.log("Animation finished");
})
.catch((e) => {
    console.log(e.message);
});

Animating multiple views

multiple-views

var definitions = new Array();
var a1 = {
    target: view1,
    translate: { x: 200, y: 0 },
    duration: 3000
};
definitions.push(a1);
var a2 = {
    target: view2,
    translate: { x: 0, y: 200 },
    duration: 3000
};
definitions.push(a2);
var a3 = {
    target: view3,
    translate: { x: -200, y: 0 },
    duration: 3000
};
definitions.push(a3);
var a4 = {
    target: view4,
    translate: { x: 0, y: -200 },
    duration: 3000
};
definitions.push(a4);
var animationSet = new animationModule.Animation(definitions);
animationSet.play().then(function () {
    console.log("Animation finished");
})
    .catch(function (e) {
    console.log(e.message);
});

var definitions = new Array<animationModule.AnimationDefinition>();
var a1: animationModule.AnimationDefinition = {
    target: view1,
    translate: {x: 200, y: 0},
    duration: 3000
};
definitions.push(a1);

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

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

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

var animationSet = new animationModule.Animation(definitions);

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

Try this in the NativeScript Playground

Reusing animations

reusing

var animation1 = view.createAnimation({ opacity: 0 });
var animation2 = view.createAnimation({ opacity: 1 });
animation1.play()
    .then(function () { return animation2.play(); })
    .then(function () { return animation1.play(); })
    .then(function () { return animation2.play(); })
    .then(function () { return animation1.play(); })
    .then(function () { return animation2.play(); })
    .then(function () {
    console.log("Animation finished");
})
    .catch(function (e) {
    console.log(e.message);
});

var animation1 = view.createAnimation({opacity: 0});
var animation2 = view.createAnimation({opacity: 1});

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

Slide-in effect

slide-in-effect

var item = new imageModule.Image();
item.src = "~/res/icon_100x100.png";
item.width = 90;
item.height = 90;
item.style.margin = "5,5,5,5";
item.translateX = -300;
item.opacity = 0;
item.on("loaded", function (args) {
    args.object.animate({ translate: { x: 0, y: 0 }, opacity: 1 });
});
wrapLayout.addChild(item);

var item = new imageModule.Image();
item.src = "~/res/icon_100x100.png";
item.width = 90;
item.height = 90;
item.style.margin = "5,5,5,5";
item.translateX = -300;
item.opacity = 0;
item.on("loaded", (args: observable.EventData) => {
    (<viewModule.View>args.object).animate({translate: { x: 0, y: 0 }, opacity: 1});
});
wrapLayout.addChild(item);

Infinite animations

infinite

animationSet = new animationModule.Animation([{
        target: view,
        rotate: 360,
        duration: 3000,
        iterations: Number.POSITIVE_INFINITY,
        curve: view.ios ? UIViewAnimationCurve.UIViewAnimationCurveLinear : new android.view.animation.LinearInterpolator
    }]);
animationSet.play().catch(function (e) {
    console.log("Animation stopped!");
});
// Call animationSet.cancel() to stop it;

animationSet = new animationModule.Animation([{
    target: view,
    rotate: 360,
    duration: 3000,
    iterations: Number.POSITIVE_INFINITY,
    curve: view.ios ? UIViewAnimationCurve.UIViewAnimationCurveLinear : new android.view.animation.LinearInterpolator
}]);
animationSet.play().catch((e) => {
    console.log("Animation stopped!");
});
// Call animationSet.cancel() to stop it;

Rotation using originX and originY

Example 5: Rotating a view around its center. Center of view is changed via originX and originY properties.

rotation_origin_x_y

const view = page.getViewById("myView");

view.originX = 1; // default 0.5 (center), 0 is most left, 1 is most right
view.originY = 0; // default 0.5 (middle), 0 is top, 1 is bottom
view.animate({
    rotate: 360, // will take into account originX and originY
    duration: 1000
}).then(() => {
    view.originX = 0;
    view.originY = 1;
    view.rotate = 0;

    view.animate({
        rotate: -360,
        duration: 1000
    })
})

const view = page.getViewById("myView");

view.originX = 1; // default 0.5 (center), 0 is most left, 1 is most right
view.originY = 0; // default 0.5 (middle), 0 is top, 1 is bottom
view.animate({
    rotate: 360, // will take into account originX and originY
    duration: 1000
}).then(() => {
    view.originX = 0;
    view.originY = 1;
    view.rotate = 0;

    view.animate({
        rotate: -360,
        duration: 1000
    })
})

Animation - View's Width and Height

Width

let label = page.getViewById("lblNS");
let animation = new Animation([
    {
      width: 200,
      duration: 2000,
      target: label,
      delay: 200
    }

  ]);
animation.play();

let label: Label = <Label>page.getViewById("lblNS");
let animation = new Animation([
        {
            width: 200,
            duration: 2000,
            target: label,
            delay: 200
        }

    ]);
animation.play();

Height

let label = page.getViewById("lblNS");
let animation = new Animation([
    {
      height: 200,
      duration: 2000,
      target: label,
      delay: 200
    }

  ]);
animation.play();

let label: Label = <Label>page.getViewById("lblNS");
let animation = new Animation([
        {
            height: 200,
            duration: 2000,
            target: label,
            delay: 200
        }

    ]);
animation.play();

Demo JavaScript Demo TypeScript

NativeScript Core