Phase • Animations made easy!

Adding animations to apps made with Kodular had never been an easy task. Even though we have a dedicated component, Animation Utilities, for animations in Kodular, it was never that easy to use. That’s why I thought of creating Phase as my first extension. :sunglasses:

Introducing Phase


Phase is powerful yet an easy to use animation extension. It makes it possible to animate any View/UI component on the screen. So, no matter if it’s a simple label or a vertical arrangement containing a complex group of components, Phase has got them all covered! :wink:

Blocks

Phase features a total of 72 blocks, which are as follows:

  • component_event%20(2)

  • component_event%20(3)

  • component_event%20(4)

  • component_event%20(5)

  • component_event%20(6)

  • phaseM1

  • phaseM2

  • component_method

  • component_method%20(1)

  • And 63 property-type blocks which returns the technique with which Phase should animate the given component. As of now, there are 63 techniques, subcategorized into 8 categories as follows:

Category Available techniques
Attention Flash , Pulse , RubberBand , Shake , Swing , Wobble , Bounce , Tada , StandUp , Wave
Special Hinge , RollIn , RollOut , Landing , TakingOff , DropOut
Bounce BounceIn , BounceInDown, BounceInLeft , BounceInRight, BounceInUp
Fade FadeIn, FadeInUp, FadeInDown , FadeInLeft, FadeInRight, FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp
Flip FlipInX , FlipInY , FlipOutX , FlipOutY
Rotate RotateIn , RotateInDownLeft , RotateInDownRight , RotateInUpLeft , RotateInUpRight, RotateOut , RotateOutDownLeft , RotateOutDownRight , RotateOutUpLeft , RotateOutUpRight
Slide SlideInLeft , SlideInRight , SlideInUp , SlideInDown, SlideOutLeft , SlideOutRight , SlideOutUp , SlideOutDown
Zoom ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp, ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp

How To

To animate any component, just call the AnimateComponent method and pass the required parameters.

Param Info
component AndroidViewComponent: The component that needs to be animated. Specify the component by attaching this block.
technique String: The technique with which specified component should be animated. For example:
delay int: Amount of time after which animation should start (in milliseconds).
duration int: Amount of time it should take to complete one set of animation (in milliseconds). In simple language, it specifies how slow the animation should be.
repeatCount int: Number of times Phase should animate the given component. 0 if you don’t want to repeat the animation at all or -1 if you want it to animate for an infinite amount of time.

In case you want to cancel the current animation, call the CancelAnimation method.

Thanks

A huge thanks go to @Vishwas for the sources of his ExtraComponents extension and his help. A big shout out for all the beta testers too! :tada:

Demo

Here is a demo app showing all the available animation types:
APK: PhaseDemo(1).apk (4.9 MB)
AIA: PhaseDemo(1).aia (105.3 KB)
Thanks @Franck_G28 for making this for me. :relaxed:

Download [Version: 2.0.1]

io.shreyash.phase.aix (106.6 KB)
:warning: Caution : This version of Phase might break some renamed event blocks if you have used them in your existing projects. To get this resolved, just replace the old blocks with new ones and you are good to go. :slightly_smiling_face:


Let me know if you find any bugs/errors. Also, I'm open to suggestions and feature requests. 😄
43 Likes

It’s a great extension. Just a word of advice to anyone who plan on use it. PLEASE don’t OVERUSE IT! When there’s a lot of this effects in an app is extremely annoying to the user. Just use common sense and keep functionality as a priority.
But like I said, It’s a very nice extension and I’m glad that you provide it free of charge too!

14 Likes

Glad that you liked it!

Every extension I’ll ever release will be free, forever.

I’m here to learn, not to earn! :sunglasses:

14 Likes

Really Awesome Extension Bro :heart_eyes::heart_eyes:

1 Like

Extension is great and…


You are awesome…:+1::+1::+1::+1:

3 Likes

Great to see that this is your first extension. It is really awesome. :heart_eyes:

2 Likes

Awesome job, Shreyash! I always waited you to release this extension! Also I know how much time you spent for it! :sweat_smile:

This is probably the best extension for making animations easily! You can be sure about I will add this extension in my every upcoming project!

Exactly! :sunglasses:

2 Likes

Great work, Shreyash! :smiley:

1 Like

To be accurate, ¾ of the total time was spent on a stupid error! Vishwas knows what I’m talking about. :sweat_smile:

2 Likes

Awesome job dude!

2 Likes

No you are here to earn likes :stuck_out_tongue_winking_eye:

Nice extension btw…keep it up!

3 Likes

This is one of the things that was missing most in Kodular to be able to make great interfaces.
Congratulations and thank you for this amazing extension ! :tada:

4 Likes

Pls check flipln x effect when click on that it close application

Very great for an extension.

Amazing for first extension!

Well done, Shreyash!

PS: Do you have 62 if then elif elif… else conditions after each other?

1 Like

Ottima estensione :+1: t3:

1 Like

great work, well done and congrats for doing an awesome job

1 Like

Just checked it on a device running Android 9 and it’s working fine. Which Android version you are having?

Awesome extension , Thank you for making it sir :heart_eyes:

1 Like

android version 7

Can you test this app and see if it’s crashing?
Test (2).apk (4.8 MB)