13-may-2022 update: added 'AnimatedHamburgerMenu.msapp' file to show how to animate a hamburger menu using the component
Hello #PowerApps community...
I am glad to present my ControlAnimator component which will allow you to add some nice animations to your #PowerApps applications.
Here are a few examples of what you can achieve with it (and it's just the start because I'm sure you will come up with some other great ideas):
And this:
What does it do?
Well, in fact the component generates a floating number value between a StartValue and an EndValue within a specified number of Steps. These numbers are generated using ease-in and ease-out functions provided by Robert Penner on his site
- Ease-in: starts slowly from the StartValue and accelerates until it reaches the EndValue
- Ease-Out: starts at max speed from the StartValue and deccelerates until it stops at the EndValue
- Ease-In/Out: starts slowly from the StartValue and accelerates until it reaches half-way and then deccelerates until it stops at the EndValue
What are the animations provided by the component?
Here is the full list of animations you can generate with the component:
- SimpleLinear (no acceleration)
- CubicEasingIn (cubic acceleration)
- CubicEasingOut (cubic decceleration)
- CubicEasingInOut (cubic acceleration/decceleration)
- QuadraticEasingIn (quadratic acceleration)
- QuadraticEasingOut (quadratic decceleration)
- QuadraticEasingInOut (quadratic acceleration/decceleration)
- QuarticEasingIn (quartic acceleration)
- QuarticEasingOut (quartic decceleration)
- QuarticEasingInOut (quartic acceleration/decceleration)
- QuinticEasingIn (quintic acceleration)
- QuinticEasingOut (quintic decceleration)
- QuinticEasingInOut (quintic acceleration/decceleration)
- ExponentialEasingIn (exponential acceleration)
- ExponentialEasingOut (exponential decceleration)
- ExponentialEasingInOut (exponential acceleration/decceleration)
- SinusoidalEasingIn (sinusoidal acceleration)
- SinusoidalEasingOut (sinusoidal decceleration)
- SinusoidalEasingInOut (sinusoidal acceleration/decceleration)
- CircularEasingIn (circular acceleration)
- CircularEasingOut (circular decceleration)
- CircularEasingInOut (circular acceleration/decceleration)
What are the component's properties?
Here are all the properties for this component...
Input properties
- StartValue (number) = starting value
- EndValue (number) = ending value
- Steps (number) = number of steps between StartValue and EndValue
- StepWaitTime (number) = in milliseconds, time to wait between each step of the animation
- AnimationType (text) = animation function you wish to use (from the ones listed above) (use the output property AnimationTypeEnum to set the value)
- Animate (boolean) = when true, starts the 'animation' by generating the resulting values (in the Value output property) between StartValue and EndValue
- Reverse (boolean) = when true, animation starts from EndValue and proceeds to StartValue
- Reset (boolean) = when true, resets the output value to the StartValue (if Reverse is false) or to the EndValue (if Reverse is true)
Output properties
- Value (number) = generated number between StartValue and EndValue, using the math ease-in, ease-out function specified by the AnimationType input property
- AnimationTypeEnum (record) = enumeration of all availables animations (use it to set the AnimationType input property of the component)
How do I use it?
Let's say you want a gallery's width to animate from 50 to 240 pixels. Here is how you can do it:
- Put a ControlAnimator component on your screen and name it cmpGalleryAnimation (and set a background color to it)
- Set its StartValue property to 50, its EndValue property to 240 and its AnimationType property to cmpGalleryAnimation.AnimationTypeEnum.CubicEasingIn for instance (or pick another one if you wish to)
- Set you gallery's Width property to: cmpGalleryAnimation.Value
- In your screen's OnVisible event, reset your cmpGalleryAnimation component so that its Value output property initializes with the StartValue of 50, thus giving an initial width to your gallery when the screen shows up
- Run your app and then, inside your cmpGalleryAnimation component, activate the Animate toggle
- Tadaaaaaaaa!
- Activating the Reset toggle will just restore the current value to the StartValue and reactivating the Animate toggle will animate your gallery again.
If you want your animation to speed up a little, play around with the Steps input parameter and lower its value to 20 or even 15 for instance.
What's in the attached files to this post?
There are two files attached to this post:
- ControlAnimator.msapp: it's the component (import it in your app while you're in the Power Apps Studio, through the Import component option of the Custom menu located in the Insert tab)
- ControlAnimatorApp.zip: it's an application that includes the component + a screen where you will be able to test the various animations and play around with the various parameters (import it in your tenant using the Import canvas app from the Apps tab located on the Power Apps home page)
- AnimatedHamburgerMenu.msapp: a small application to show how to animate a hamburger menu
Now it's your turn to play!
And tell us here in the post how you used the component and show us the animations you made up with it! ❤️❤️❤️
If you find any issues to the component or wish to propose new features, please do so on Github right here (and have a glance at my other components 😉: e-gallis/PowerApps.
