Custom Easing Equations in Components (Custom Functions)

[EpicTriffid]

We are all aware of the ability in PowerApps to visually transform objects using the Timer control. This gives us the functionality of animations, elevating the visual appeal of solutions. But we have also seen how this can be improved.

In the June of 2018 @Mr-Dang-MSFT posted his helpful and insightful video on the use of Easing Equations in PowerApps animations. In it, he describes how motion in PowerApps animations can be made smooth by use of Easing Equations. These allow you to change linear motion into much more dynamic and sweeping movements. I'll leave the video linked below, along with a very helpful article I discovered going into a bit more detail:

https://powerusers.microsoft.com/t5/Webinars-and-Video-Gallery/Friday-Functions-Smoother-Animations-...

http://powerappsguide.com/blog/post/controls-how-to-show-hide-controls-with-a-sliding-transition-eff...

I won't go over again how to put animation into your apps, as Mr Dang does it perfectly, but I think it helpful to describe that Easing Equations, at a basic level, allow you to move, or transform, your object by fractions of it's size, position, or transparency. It does this at different rates over the duration of your Timer. This can be best described by a graph, and Mr Dang helpfully provided a site to show the various types of Easing: 

https://easings.net/

You can see in here the various paths of the graphs, and by hovering over them, the arrow to the right will display the expected movement when the equation is applied to your object. Wonderful! But there were a fair few of these, and many more options on how we might want to visually transform our object. And while we are provided with the breakdown of how these Easings are made using CSS or Post CSS, as well as the base maths function that we can use to transpose these into PowerApps, I myself was, and am not built for this level of complexity. How on earth would I get this:

function easeOutBack(x: number): number {
const c1 = 1.70158;
const c3 = c1 + 1;

return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
}

into PowerApps?

I had no idea. Maths was never my strong suit, and these honestly scared me. But I did know that functions like EaseOutBack, where, for example, your object may move out, overshoot, then settle back into the final position, felt a bit more advanced and professional than what I was already using. Then again, maths. Complicated maths. I was stuck.

But while I'm not a mathematician, I do happen to be incredibly, infuriatingly, undeniably, stubborn.

After days of looking around dark corners of the web, I stumbled onto this very helpful site by the name of SpicyYoghurt (what a name!): https://spicyyoghurt.com/tools/easing-functions

SpicyYoghurt goes into detail on how the same Easings can be constructed in JavaScript. Darn it. Buuuuut, this made a bit more sense to me. Maybe days of looking at maths had imprinted on me, or passed into my brain via osmosis.  

For EaseOutBack, SpicyYoghurt described that EaseOutBack could be expressed in JS as:

function easeOutBack (t, b, c, d) {
    if (s == undefined) s = 1.70158;
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
}

In this, the parameters are:

t = The current time value

b = The starting value (starting X value)

c = The change value (how far we want the item to move)

d = The duration

It turns out that pretty much all Easing equations use this parameters, as well as some mathematically defined constant that helps scale the equation depending on, for example, the size of the object being moved. And looking at these, my brain immediately thought "VARIABLES!". And then it went "BUT HOW DO WE USE THESE IN AN ACTUAL X PROPERTY?" (It was feeling quite shouty that day). Well, if I wanted to move a box, I could change the parameters in my head so that they actually read this:

t = The current value of the timer

b = The starting X coordinate

c = How far we want the item to move

d = The duration of timer

That made sense to me. Putting that equation into the X property was a different story. Was I meant to just paste the equation into the property, and replace the parameters with defined variables? It seemed clunky. And my mind couldn't wrap around how such an equation would actually interact with the property. 

But! Luckily, at this moment, I stumbled upon something talking about Custom Functions in PowerApps. Matthew Devaney's blog on all things PowerApps had posted on how to create Custom Functions. In it he was describing how to create reusable code for recreating Excel's EOMonth function:

https://www.matthewdevaney.com/power-apps-custom-functions-reusable-code/

Now, one thing I had never consciously considered, but understood instinctively, was that a function is basically a series of parameters that feed into a equation sitting in the background. So when I saw Matthew Devaney's guide, I thought that I might just be able to use the same method for my Easing equations. The Custom Functions needed to be enabled by activating Enhanced Component Properties in the Experimental Features, but after that I could use the JS example from SpicyYoghurt and get underway.

First, I made a new property called EaseOutBack by making a new Component, then selecting New Custom Property on the right:

Naming it EaseOutBack, I changed the Property Type to Function, Property Definition to Output, and Data type to Text.

Now I needed to add a new Parameter using the button at the bottom:

These were going to be the parameters in my Custom Function. Using the list of variables needed for the JS version of EaseOutBack above as a template for the data we need to gather, I entered a Parameter name, chose Data type Text, and then Saved, until all the below parameters had been made:

These were my 4 parameters. Now to create my formula. I pressed where it said the Property name on the right to open the formula bar at the top with our custom property already selected:

I now had to convert the JS formula to something that matched PowerApps syntax and my new parameters:

ChangeValue * ((TimerValue/Duration - 1) * TimerValue * ((1.70158 + 1) * TimerValue + 1.70158) + 1) + StartCoord

And that was it! Done! I made a custom function! I had no idea if it would work, but the journey had been long, and all I wanted to know what whether it looked any good. I headed back to my test screen, then selected Insert > Custom > EaseOutBack:

(I've made a few now, but you can see EaseOutBack in there.)

(When added, it'll appear as a fairly large but transparent box, like below, but I just shrink it to nothing and hide it:)

And now we can use it . In my case, I was going to have a box come in from the right of the screen, overshoot, then settle on the edge. I'd already made my box, so heading to its x property, I tried out my new function with the four new parameters:

If(
    flyOut,
    EaseOutBack_2.EaseOutBack((MenuTimer_1.Value/MenuTimer_1.Duration) - 1, -Self.Width, Self.Width, MenuTimer_1.Duration),
    EaseOutBack_2.EaseOutBack(((MenuTimer_1.Value/MenuTimer_1.Duration) - 1), Self.Width - Self.Width, -Self.Width, MenuTimer_1.Duration))

So now, using this, starting my position off the screen, then moving in by the width of the box, I got this:

It worked! It might not seem like a lot, but I now had not only managed to use more than just the basic Easing Equation, but I had also made a process for making any number of different kinds of easing equations in components that could be moved wherever I wanted them. I can now use this repeatedly in my app, move it to another app, etc. I have already made versions of these to replace the SinIn and SinOut Easing Equations that Mr Dang created, so I hope to have more fun with this in the future. It was certainly empowering to create a final process all of my own design from several different sources and beginnings. I can now use this same functionality to create smooth and professional looking animations like below:

Hopefully this can be a useful resource for someone who is looking for something like this in the future, and that it is one of the results that actually shows up in a search engine! 🙂 

[TheRobRush]

Nice write up, you should leave a comment on this, something like 

Solution in original post

then mark it as the solution so anyone looking for stuff like this will find your post quicker

[EpicTriffid]

Thanks! Will do!

[EpicTriffid · Accepted solution]

Solution in original post

[JB006]

Thanks for sharing your thoughts, very helpful.