Phase • Animations made easy!


#1

Adding animations to apps made with Kodular/Appy Builder 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 67 blocks (missed the number by 2 :crazy_face:), which are as follows:

  • image

  • image

  • image

  • image

  • image

  • And 62 property-type blocks which returns the technique with which Phase should animate the given component. As of now, there are 62 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 , 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/Download

Check out the original topic on Kodular community for downloads.


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