There is requirement to show animated pages. Where new page with display with flip animation. How to achieve this in kony ? It will be good if I get a sample. I am using kony visualizer 7.3

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.

2

Hi,

You can use the below code to animate/flip a widget. In the given code snippet we are flipping the label widget.

var transformObject = kony.ui.makeAffineTransform();

transformObject.setPerspective(500);

transformObject.rotate3D(360,0,1,0);

var animationObject = kony.ui.createAnimation(

{

"100":{"transform":transformObject,"stepConfig":{"timingFunction":kony.anim.LINEAR}}});

var animationConfig = {

duration: 1,

fillMode: kony.anim.FILL_MODE_FORWARDS

};

var animationDefObject={definition:animationObject,config:animationConfig};

frm.flx.lbl.animate(animationObject,animationConfig);

3

Could you please share a sample project where page animation is used ?

Thanks

4

Hi @Richvwd Shvwp​ ,

PFA sample app.

Regards,

5

Hi,

Thanks for reply. I have one more requirement where a flex container will flip. It will move 180 degree and animation should start from bottom. Bottom part will come forward and go up. The code I have is doing animation in opposite way. Could you help ?

Thanks

6

Hi @Richvwd Shvwp​, did any of the responses help you to a resolution? If yes, please click [Select as Best] under the response that helped the most. This will close out the post.

7

Hi @Richvwd Shvwp​ ,

You just need to modify the below line of code as per your requirement to achieve what you asked for:

transformObject.rotate3D(360,0,1,0);

Here, the parameters are angle, x, y, z respectively. So as per my understanding you need to pass below parameters:

transformObject.rotate3D(180,1,0,0);

8

I did same. But it is fliping from top to bottom. I need to show both ways. One tap will animate from top to bottom then another tap will take bottom position to top.

9

You need to set the anchor point in the animationObject.

"anchorPoint": {

"x": 0.5,

"y": 1

}

10

No Change. Below is my code. Still it is animating in one way only, from Top to Bottom.

function animate1(){

function callback() {

//alert("callback")

}

var trans100 = kony.ui.makeAffineTransform();

trans100.rotate3D(180, 1, 0, 0);

frmFlipCard.flxFlipCard.animate(

kony.ui.createAnimation({

"100": {

"anchorPoint": {

"x": 0.5,

"y": 1

},

"stepConfig": {

"timingFunction": kony.anim.EASE

},

"rectified": true,

"transform": trans100

}

}), {

"delay": 0,

"iterationCount": 1,

"fillMode": kony.anim.FILL_MODE_FORWARDS,

"duration": 0.25

}, {

"animationEnd": callback

});

}

11

Also why animation happening only first time when tapping ? Second time when I tap no animation is happening.

12

Ok. I got the solution . We have to do trans100.rotate3D(0, 1, 0, 0) again on next tap.

13

Thank you Lalitendu for sharing your solution.