Continous Animation base on Event

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 wanna ask about how to continuing an animation base on onClick event of a button.

**Image removed for security reasons**

I have a button that, if clicked it will animate a flex . However, with this setup on my onClick event, the flex just animate at first click, it doesn't animate again on second click and so on.

I need to animate the flex whenever i click the button, not only after first click. Any help or hint will be appreciated. 😀😀

God Bless Developers !!

Hi,

Please add the animation to widget on button's onClick method. This should fix your problem.

Regards,

function onButtonClick()

{

widget.animate(animDef, animConfig);

}

The above pseudo code should will clarify what i meant. widget can be what ever widget you wanted to animate which is in the visible region.

Regards,

Hi,

Thank you for your response, i have follow your suggestion. The widget did animate when i click a button, but it didn't animate again on second click, just as what i asking about.

Here is my code :

function animateOnClick()

{

var animate = kony.ui.makeAffineTransform();

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

frmProduct.flxPageNumber.animate(

kony.ui.createAnimation({

"100": {

"anchorPoint": {

"x": 0.5,

"y": 0.5

},

"stepConfig": {

"timingFunction": kony.anim.EASE

},

"transform": animate

}

}), {

"delay": 0,

"iterationCount": "1",

"fillMode": kony.anim.FILL_MODE_BOTH,

"duration": 1,

"direction": kony.anim.DIRECTION_ALTERNATE

});

}

I did call the animateOnClick() function in code snippet under onClick button event. I guess i need something like callback but i have no idea. 😶

Can you help me what things did i miss on the code ?

Hi,

In IOS widget cannot be rotated by 360 degrees in one step. You need to have multiple steps to rotate the widget. This limitation is captured in documentation.

http://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/transform_object_methods.htm

And if you are trying the sample on android, try setting

"fillMode": kony.anim.FILL_NONE,

"direction": kony.anim.DIRECTION_NONE

let me know if this helps.

Regards,

Hi,

Wow, it works like a charm on Android Phone 😄

Let me Rewrite my code to summarize :

function animateOnClick() { var animate = kony.ui.makeAffineTransform(); animate.rotate3D(360, 0, 1, 0); frmProduct.flxPageNumber.animate( kony.ui.createAnimation({ "100": { "anchorPoint": { "x": 0.4, "y": 0.5 }, "stepConfig": { "timingFunction": kony.anim.EASE }, "transform": animate } }), { "delay": 0, "iterationCount": "1", "fillMode": kony.anim.FILL_NONE, "duration": 1, "direction": kony.anim.DIRECTION_NONE }); }

this Function code could come in handy for another devs who have similiar problem.

Thank you.

Thank you​ for a great answer and follow-up!