Upfront note that English is not my first language, and my mathematical terminology might not translate very well (although google has helped).
(TL;DR at the bottom)
I want to describe the animation of a computer model using a mathematical formula. I need a function $F(x)$ that outputs a value (which will be used as a scale factor) in the range of $[0, 1]$, and takes the current animation progress (also in the range of $[0,1]$) as input $x$.
The goal of the animation is to provide a "fading" effect, with the object growing slowly at first but increasingly faster until the maximum size ($F(x) = 1$) has been reached. Previously I used a quadratic formula, but now I want to add a 'fading-out' animation (gradually shrinking the object back to $F(x) = 0$ after some time).
I'm looking for a type of curve that looks a bit like this (not enough reputation to post an image unfortunately). There's 3 segments in this curve:
- The first part is the 'fade-in' period. I did this with a simple quadratic formula at first.
- The middle part is the part where $F(x) > 1$. I'm not interested in it because I set the value back to $1$ in code. Whatever happens here doesn't matter, as long as $F\ge1$.
- The third and final segment is the 'fading-out' period. It should behave like a reverse-quadratic curve, shrinking fast at first but decreasing speed with increasing $x$'s.
I could use two separate formulas for this, one for fading-in and one for fading-out, but I'm interested in if this is possible using only a single formula. I want to be able to tweak the following points (annotated in the image linked above) to change the properties of the animation:
- $x_s$: The point in time where the objects starts with growing. $F(x)$ where $x$ is in $[0, x_s]$ should always be $\le0$. Values below zero will be be set back to zero in code.
- $x_t$: The point where the object is fully grown (finishing point of the fade-in animation) → $F(x_t) = 1$.
- $x_d$: The point where the size of the object starts to decrease again → $F(x_d) = 1$ (again).
- $x_f$: The point where the animation has finished → $F(x)$ where $x \ge x_f$ should be $\le0$ again.
(As per the definition of $x_t$ and $x_d$: $F(x) \ge 1$ if $x$ is in $[x_t, x_d]$.)
My current guess is that I should do this with a sinusoid. This poses the challenge of creating a sine-wave that's asymmetrical (because the duration of the fade- in and out animations are not the same). During my research I found this question, but I have not been able to use something like $F(x) = sin(x + a*sin(x))$ to work as I want it to. Maybe it's not the right solution for this problem, or maybe I'm too stupid to realize.
I'm not looking for a copy-pasteable formula, any help will be greatly appreciated. If there's a better way to do this than with a sine-wave I'd also like to know of course.
TL;DR/summary: I need a formula that creates a curve like this for an animation. I want to be able to tweak the points $x_s$, $x_t$, $x_d$, $x_f$ to change the duration and position of the fade-in and -out periods.