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, my first extension. 
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!
Blocks
Phase features a lot of 15 primary blocks. Most of these blocks are self-explanatory, but in case you need to learn more, you can hover over them in the blocks editor to see their documentation.
-
Events
AnimationStartsAnimationEndsAnimationCancelledAnimationPausedAnimationResumed
-
Methods
AnimateComponentAnimationCancelled2-
CancelandCancelAll -
PauseandPauseAll -
ResumeandResumeAll -
IsRunningandIsPaused
-
And 68 animation techniques 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, BounceOut , BounceOutDown, BounceOutLeft , BounceOutRight, BounceOutUp
|
| 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 |
|---|---|
id |
int: A unique number that is used to identify the specified component when an event fires. |
component |
AndroidViewComponent: The component that needs to be animated. Specify the component by attaching this  block. |
technique |
String: The technique with which the 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. For example, 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 Cancel 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! 
Demo
Here is a demo app showing all the available animation types:
APK: PhaseDemo.apk (5.2 MB)
AIA: PhaseDemo.aia (74.5 KB)
Note: These don’t use the latest version of the extension.
Thanks @Franck_G28 for making this for me. 
Download [Version: 3.1]
Direct: io.shreyash.phase.aix (81.1 KB)
Google Drive: https://drive.google.com/file/d/1fviQil8GOeSvVWMKMOxG1Hi82M4qOCNQ/view?usp=sharing
Let me know if you find any bugs/errors. Also, I’m open to suggestions and feature requests. 
