Phase • Animations made easy!

Adding animations to apps made with App Inventor had never been an easy task. Also, there’s nothing out there, like an extension, which would make it possible. 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:

  • image

  • image

  • image

  • image

  • image

  • phaseM1

  • phaseM2

  • 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: Google Drive
AIA: PhaseDemo (1).aia (104.9 KB)

Download

AIX: Google Drive
: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. 😄
22 Likes

Stunning :+1:

2 Likes

Fantastic, thank you!

1 Like

Time for a small (verrrrryyyyy small :joy:) update!

  • Added new animation type: FlipIn Y

  • Increased the extension’s size by 0.1 KB.

Downloads

AIX: Google Drive
APK: Google Drive
AIA: PhaseDemo (1).aia (104.9 KB)


BTW, may I please know why I'm I unable to edit my first post? In other communities it is possible to edit your post whenever you want.
2 Likes

This is a SUPER nice extension! Thanks!!!

1 Like

latest aix needs permission to access/download

1 Like

You are at trust level 1, so you should be able to edit your existing posts. In fact, the edit history for the original shows that you edited it about 17 hours ago.

Yes, I did edited it earlier but now I’m unable to do so. In fact, there’s no edit button.

Edited. Thanks for pointing out. :smile:

Time for a fresh update!

  • Added AnimationPaused event.
    component_event

  • Added AnimationResumes event.
    component_event%20(1)

  • Added PauseAnimation method.
    component_method

  • Added ResumeAnimation method.
    component_method%20(1)

  • Fixed ZoomIn/Out animation types. They were not working as expected earlier.
    Thanks @Anke for reporting.

  • Renamed the following event blocks. Now their names are a bit more meaningful.

    • OnAnimationStart -> AnimationStarts
      component_event%20(2)

    • OnAnimationEnd -> AnimationEnds
      component_event%20(3)

    • OnAnimationCancel -> AnimationCancelled
      component_event%20(4)

  • Increased extension’s size by 3.9 KB. :upside_down_face:

Download

AIX: Google Drive
:warning: Caution : This version of Phase might break the 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:

3 Likes

Thank you very much!

This great extension opens up so many possibilities which many are not yet realizing (probably not even Shreyash himself :wink:).
For example, I could now easily solve an old (complex) problem (regarding Timers, Canvas & the known issues with synchronicity) for a meditation app. The extension works in my case throughout the use of the app, not just during a first initial animation.

This is by far more than just a simple fade-in / out animation effect extension (comparable to the effects that PowerPoint offers, as some claim and with which one should rather be sparing).

6 Likes

That’s one heck of a first extension! :slight_smile:

I have an app I’m working on with ~6000+ blocks. This just might replace a few in those areas where animation takes place. Always appreciative of extensions that save time and code involved in from-scratch solutions.

2 Likes

2 posts were split to a new topic: How to deal with thousands of blocks?

Why is it not working? Does not show previously hidden buttons.
test_phase.aia (108.8 KB)

you initialize last_button as Button1, so if you click Button1 and the Animation ends, last_button is Button1, which not might be what you want…

Taifun


Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.

1 Like

Button1 is not visible at first. In the AnimationEnd event, assigns the current button to last_button. The buttons appear but not quite. You can’t see them but you can click on them. To see what the problem is better to run the .aia file. It’s hard to describe.

Try this (to avoid the buttons disappear):

3 Likes

It works! Super extension. Thank you Anke for another good help;). So this is not just ordinary animation. “Out” methods cause elements to disappear or decrease :). We can do as you suggested or that:

It would be possible to make the “AnimationEnd” event return what element was animated?
It would be a good idea to delay between animations in continuous mode. Now the delay works like this:
Delay -> Animation, Animation, Animation …
It could be like this:
Delay -> Animation, Delay -> Animation, Delay -> Animation.

1 Like

I just LOVE this extension and it’s soo useful. I used it in my App which will be published soon, and it is just amazing.

The fact that shocked me is, that this extension is 100% free and @Shreyash made this completely without gaining money.

I just can thank you very very much and hope to see other good work like this in the future.
:clap:

Yoshi

3 Likes

AppInventor: learning not earning

2 Likes