TranslateX and Animate in iOS strange behaviour on 2.0

@start

Sample code (attached also)

main-page.ts

var rootpage,moveable;
export function pageloaded(args) {
    rootpage = args.object;
    moveable=rootpage.getViewById('moveable');
}
export function click(args) {
    moveable.translateX = -50;
    moveable.translateY = -50;
    moveable.animate({
        translate: { x: 0, y: 0 }, 
        duration: 200,
        delay: 1000
    });
}

@start, moveable is at 50,50
When we click, the moveable will go to 0,0 and after some time animation will kicks in and it will move to 0,0, it works, but when we click again, it will go to 0,0 after the animation and stay there (different behaviour with the first click)

@x4080

@x4080

I have tested your scenario and it works as espected.
What is going on on my side is the following:

when you click first your red square is re-positioned at x:-50 and y:-50
then the animation kicks in and the square moves to its original position { x: 0, y: 0 },
the same action repeats on every click

I must point out that your setting in your xml are moving the square relative to its parent ( left="50" top="50" ) but for the animation your initial coordiantes of the square are still { x: 0, y: 0 } and in fact on every click you are reseting them to -50 which will move the square on the top left side of the parent AbsoluteLayout.

hmm that's interesting, I'll try again later and let you know but thanks for the effort

about the XML, the scenario I will use is that the initial position is x, and with pan it will move and when pan over it can move to left or right depends on the last pan position

and the other problem that I have is that because the initial position is x, after screen rotate it will come back to that x and not the latest position

what is the best practice for this? the similar example is like sidebar menu in Android and it have the pan and animation after pan

what I found it that the view will jump after animation finished when pan was exist before animating

thanks

@x4080

@x4080 I was with the wrong impression that the issue was for Android for which I appologize!
I have now re-tested it under iOS and indeed the behaviour you described is present with NativeScript 2.0.1.

the animation is OK with the initial tap
after the first tap the position of the red square is changed (goes to left-top corner of the parent layout at x:0 and y:0) and the animation goes backwards

The animation works as expected on Android.
Code to reproduce the issue:
main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageloaded">
    <GridLayout>
      <AbsoluteLayout width="100%" height="100%" backgroundColor="gray">
        <AbsoluteLayout width="100" height="100" left="50" top="50" backgroundColor="red" id="moveable">
        </AbsoluteLayout>
      </AbsoluteLayout>
      <Button text="hi" tap="click"></Button>
    </GridLayout>
</Page>

main-page.ts

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { AbsoluteLayout } from "ui/layouts/absolute-layout";

var rootpage;
var moveable;

export function pageloaded(args) {
    rootpage = args.object;
    moveable = <AbsoluteLayout>rootpage.getViewById('moveable');
}

export function click(args) {
    moveable.translateX = -50;
    moveable.translateY = -50;
    moveable.animate({
        translate: { x: 0, y: 0 }, 
        duration: 200,
        delay: 1000
    });
}

that's OK Nick glad it's not just me

I think I'm seeing the same problem here. After the animation completes, my view is being reset to the state it was in prior to the animation.

Revert tns-core-modules to v1.7.1

I've seen it as well on Ios, I've been able to correct it by setting the translateY position following the animation. Like so:

icon.animate({
    translate: { x: 0, y: -250 },
    curve: AnimationCurve.linear,
    duration: 400
}).then(() => {
    icon.translateY = -250;
});

Not a permanent fix but it helps.

I've also noticed though that if you set the translateY(or X) prior to starting a second animation in iOS it doesn't start from that position. the value will be correct but the animation starts from the last ending position. For example if you set the Y with icon.translateY = 0;, prior to starting the above example animation again It will start at the previous ending Y of -250 and not 0.

I've seen it as well on Ios, I've been able to correct it by setting the translateY position following the animation.

That didn't work for me. Things still jumped to the incorrect state after the animation, and sometimes during the animation. I just had to revert to tns-core-modules@v1.7.1

It appears every animation in IOS in my application is throwing this error

Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: null ; Value: Error {message: "Animation cancelled.", line: 106, column: 31, sourceURL: "file:///app/tns_modules/ui/animation/animation-common.js", stack: "_rejectAnimationFinishedPromise@file:///app/tns_mo…e]
[native code]
promiseReactionJob@[native code]"} (/Users/JoshSo/Code/N/nativescript-weather/node_modules/zone.js/dist/zone-node.js:419:27)
Error {message: "Uncaught (in promise): Error: Animation cancelled.", line: 496, column: 41, sourceURL: "file:///app/tns_modules/zone.js/dist/zone-node.js", stack: "resolvePromise@file:///app/tns_modules/zone.js/dis…e]
[native code]

@tzraikov

awesome thank you @tzraikov 👍

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

TranslateX and Animate in iOS strange behaviour on 2.0 #2161

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TranslateX and Animate in iOS strange behaviour on 2.0 #2161

Description

Activity

NickIliev commented on May 25, 2016

x4080 commented on May 25, 2016

x4080 commented on May 25, 2016

NickIliev commented on May 25, 2016

x4080 commented on May 25, 2016

the-reality-engineer commented on Jun 4, 2016

JoshDSommer commented on Jun 10, 2016

the-reality-engineer commented on Jun 10, 2016

JoshDSommer commented on Jun 11, 2016

JoshDSommer commented on Jun 21, 2016

lock commented on Aug 29, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions