Animations not working in 2.0.0 on android?

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.

@AntonTrapp

@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!");
    });
}

@AntonTrapp

@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.

@ViewChild

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

You can close this.

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

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.

Navigation Menu

Repository navigation

Animations not working in 2.0.0 on android? #2077

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Animations not working in 2.0.0 on android? #2077

Description

Activity

NickIliev commented on May 9, 2016

tzraikov commented on May 17, 2016

AirMike commented on Jun 13, 2016

AirMike commented on Jun 13, 2016

lock commented on Aug 30, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions