Search code examples
ioseasingscenekiteasing-functions

Usage of SCNActionTimingModeEaseInEaseOut


For an instance of SCNAction, we can specify the property timingMode. We can specify this as SCNActionTimingModeEaseInEaseOut. It doesn't seem that this is enough, in order for this to work we must also specify timingFunction (right?). How would this timingFunction block look like? Most timing function examples out there take 4 parameters; this function has only one which is time.


Solution

  • The timing function and timing mode together determine the actual timing curve of an action's animation.

    • If you just want linear, ease-in, ease-out, or ease-in-ease-out timing, set the timingMode property appropriately and leave timingFunction alone (set it to nil).

    • You set both mode and function only if you want to customize the timing curve beyond those four options. When you do that, the mode determines the curve for the input to the timingFunction.

    This is a bit easier to explain graphically... here's the animation curves you get with the Linear and EaseInEaseOut timing modes, and no timing function: linear timing curve ease in ease out curve

    Now, suppose you want quadratic timing, where the progress of the animation is proportional to time squared (great for simulating gravity). You can do that by keeping the timing mode linear, and setting the timing function to a block/closure that returns time * time: squared linear timing curve

    With that combination, your timing function takes an input that varies linearly over time. If you set the timing mode to something else, though, the input to your timing function won't be linear. Here's the same time * time function when the timing mode is EaseInEaseOut: squared ease in ease out curve