Moving two flex container same time

HCL Volt MX Volt MX Forum
1
This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

Hi,

I have some very basic animation requirement. I am new so facing problem with Kony APIs.

I want to move 2 flex containers at same time on press of left right arrow. First will move and second will take its place . I tried with below solution using Kony MVC, but moving a small distance also moving the container to long distance. Need help in fixing this ?

define({

//Type your controller code here

moveAnimation:function() {

var self = this;

function callback() {

}

self.view.cntr1.animate(

kony.ui.createAnimation({

"100": {

"left": "-120dp",

"stepConfig": {

"timingFunction": kony.anim.EASE

}

}

}), {

"delay": 0,

"iterationCount": 1,

"fillMode": kony.anim.FILL_MODE_FORWARDS,

"duration": 0.25

}, {

"animationEnd": callback

});

self.view.cntr2.animate(

kony.ui.createAnimation({

"100": {

"left": "-20dp",

"stepConfig": {

"timingFunction": kony.anim.EASE

}

}

}), {

"delay": 0,

"iterationCount": 1,

"fillMode": kony.anim.FILL_MODE_FORWARDS,

"duration": 0.50

}, {

});

}

});

Thanks

2

Hi @Richvwd Shvwp​ ,

Can you provide a screenshot of the output before and after animation? It would help understand the issue better.

3

Hi,

Please check attached image. On Before screen you can see two containers. On Animation first Black container should move -120dp (want to move from Right to Left) and second purple container should move -20 dp. When it animated second container moving loner distance than -20dp. Please check After image.

You can create sample app in kony 7.3 and project using Kony Reference Architecture. Can try similar thing.

Thanks

4

Please check before image attached

5

Hi @Richvwd Shvwp​ ,

The " kony.ui.createAnimation" API work on Absolute positions wrt the screen. I suppose you are looking into animations with relative to the initial position of the widget for which you will have to try using > "kony.ui.makeAffineTransform".

For more info on Transform Animations check this: http://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Widget_Level_Animations/Widget_animatable_properties.htm#kony.ui.2

6

HI,

I tried with this. But wondering how to to left to right movement. It is moving only left to right. Giving negative number also no effect.

Thanks

7

sorry, It is moving only right to left.

8

@Richvwd Shvwp​ , Can you share that piece of code?

9

kony.ui.makeAffineTransform also have same effect. Send purple color box is moving towards left, but distance covered is more than given DP.

10

Can you share the code snippet you wrote for it?

11

Hi,

Second container is not only moving longer distance but moving faster too. Also how to move the container towards right ? It has only move left direction.

moveAnimation:function() {

var self = this;

var trans100 = kony.ui.makeAffineTransform();

var trans1001 = kony.ui.makeAffineTransform();

self.view.cntr1.animate(

kony.ui.createAnimation({

"100": {

"left": "10dp",

"stepConfig": {

"timingFunction": kony.anim.EASE

},

"transform": trans100

}

}), {

"delay": 0,

"iterationCount": 1,

"fillMode": kony.anim.FILL_MODE_FORWARDS,

"duration": 1

}, {});

self.view.cntr2.animate(

kony.ui.createAnimation({

"100": {

"left": "10dp",

"stepConfig": {

"timingFunction": kony.anim.EASE

},

"transform": trans1001

}

}), {

"delay": 0,

"iterationCount": 1,

"fillMode": kony.anim.FILL_MODE_FORWARDS,

"duration": 1

}, {});

}

12

@Richvwd Shvwp​ , You need to use translate in the transform object and you should not use left or right property.

Pls try using the below modified code:

moveAnimation:function() { var self = this; var trans100 = kony.ui.makeAffineTransform(); trans100.translate(-300,0); var trans1001 = kony.ui.makeAffineTransform(); trans1001.translate(-120,0); self.view.cntr1.animate( kony.ui.createAnimation({ "100": { "stepConfig": { "timingFunction": kony.anim.EASE }, "transform": trans100 } }), { "delay": 0, "iterationCount": 1, "fillMode": kony.anim.FILL_MODE_FORWARDS, "duration": 1 }, {}); self.view.cntr2.animate( kony.ui.createAnimation({ "100": { "stepConfig": { "timingFunction": kony.anim.EASE }, "transform": trans1001 } }), { "delay": 0, "iterationCount": 1, "fillMode": kony.anim.FILL_MODE_FORWARDS, "duration": 1 }, {});

}

13

Thanks. It worked for me.

14

Hi, How to give Percentage instead of pixel ?