Nativescript: Animations not working in 2.0.0 on android?

[AntonTrapp]

Tried to animate a background image like in the https://www.youtube.com/watch?v=YzaTuxpk5Cc video (animations - grocery store example):

<grid-layout id="background" scaleX="1.6" scaleY="1.6"></grid-layout>

    let background = page.getViewById("background");
    console.log("Starting...");
    background.animate({
      scale: { x: 11.0, y: 11.0 },
      duration: 2000
    }).then(function() {
      console.log("  DONE!");
    });

the animation finishes immediately and the console shows the DONE callback - so the animation was "successful", however it does nothing and it takes no time to finish ;)

This does only happen on android - ios animation working as expected.

[NickIliev]

@AntonTrapp

Thank you for noticing this issue - I have tested your scenario and can confirm that indeed the behavior is reproduced under {N} 2.0.0 and Android (tested on API 23 & API 19).
At this moment this bug can be reproduced with any animation:
rotate, opacity, scale, backgroundColor, ect

This behaviour is present only when we are trying to animate in navigatingTo

@AntonTrapp as a workaround you can animate your page elements in loaded page event
For example:

// page.xml
<Page loaded="onLoaded">
    <grid-layout id="background" scaleX="1.6" scaleY="1.6"></grid-layout>
</Page>

//page.ts
export function onLoaded(args: EventData) {
    var page = <Page>args.object;

    let background = page.getViewById("background");
    console.log("Starting...");
    background.animate({
      scale: { x: 0.8, y: 0.8 },
      duration: 4000
    }).then(function() {
      console.log("  DONE!");
    });
}

[tzraikov]

@AntonTrapp, We investigated this issue in detail. The navigatingTo event fires before creating the native view responsible for the page object. That is why animations do not execute at this moment. Like Nick suggested, you should use the loaded or navigatedTo events instead.

[AirMike]

I'm still having this issue (android) (using Angular 2)

// page.xml
<StackLayout #main (loaded)="showMain(main)">

// page.ts
showMain (main) {
        main.animate({
            opacity: 1,
            duration: 2000
        })
    }

Layout is shown but without animation.
Tried it also in ngAfterViewInit with reference in class @ViewChild("main") main: ElementRef; but still layout is shown without animation

[AirMike]

You can close this.

Ffound out that animation was not working because user that reported the issue had animation turned off in developer options...

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.