Reimplement UIView block based animation methods with custom easing curve

Question

The lack of custom easing curves in UIView's block based animation methods leads to Core Animation if more advanced curves are needed.

A way of doing this with a Category on CAKeyframeAnimation is discussed in How to create custom easing function with Core Animation?.

To keep my code clean and maintainable I would like to go a step further and re-implement UIView's block based methods and include a block describing the easing curve function. resulting category on UIView would look something like this:

+ (void)animateWithDuration:(NSTimeInterval)duration easingCurveFunction:(double(^)(double))function  animations:(void (^)(void))animations;

Does anyone have an idea of how apple implements their block based animation methods?

Terryterrye

Seems like you can override the layer delegate method -actionForKey:forLayer: (or whatever it's called) to provide the correct animation whenever a property change is made from within the passed animation block... That's where I'd start anyway – Zilber

Check out github.com/zrxq/UIView-EasingFunctions – Glutamine

Answer 1

I'm not sure about creating a block-based method, but I've found that a fairly simple way to implement a custom easing function and still used block-based animations is to override the layer's addAnimation:(CAAnimation *)anim forKey:(NSString *)key method and swap in a different easing function for whatever view you want to animate.

To start, subclass CALayer, and add the following method...

// CustomViewLayer.m

#import "CustomViewLayer.h"

@implementation CustomViewLayer

- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key
{
    if ([anim isKindOfClass:[CABasicAnimation class]]) {

        // intercept the animation and insert your own easing function
        int x1 = 0.250;
        int y1 = 1.185;
        int x2 = 0.210;
        int y2 = 1.000;
        CAMediaTimingFunction *func = [CAMediaTimingFunction functionWithControlPoints:x1 :y1 :x2 :y2];
        anim.timingFunction = func;    
    }

    [super addAnimation:anim forKey:key];
}

@end

In your view subclass, make sure you're returning the custom layer class...

// CustomView.m

#import "CustomView.h"
#import "CustomViewLayer.h"

@implementation CustomView

+ (Class)layerClass
{
    return [CustomViewLayer class];
}

@end

Then, you can use the standard block-based animation methods such as...

[UIView animateWithDuration:0.3 animations:^{
    [customView setFrame:newFrame];
}];

...and the custom easing function will be used. It may not solve all your problems, but it is easy to do and it still allows you to use block-based animations. Keep in mind, however, that the easing function will apply to any and all animations that are animated through the block-based methods. So if you want to animate the alpha property for example, but don't want to use the custom easing function, you will have to fiddle around with it or maybe come up with a different solution altogether.

Lastly, an awesome tool for easily creating and testing easing functions can be found here: http://matthewlein.com/ceaser/

Transgress

Answer 2

I don't know how Apple implements their block based methods, but reading BlocksKit sourcecode, I understood that to implement the method you mentioned, you probably need to:

1. Declare a UIView category such as UIView (block)
2. In the category, add a NSTimer property to fire/invalidate the timer with given duration
3. In the category, add a block property to keep the easingCurveFunction block code
4. In the category, add another block perty to keep the animation block code
5. In your block-based method, set the timer, save the blocks code to properties
6. When the timer fires, run the easingCurveFunction block and animation block, as you keep them in the properties

I actually followed this practice when adding my own block-based methods to Apple's classes.

Hydrolyte

The problem with this is we don't take advantage of the animations provided by CoreAnimation at all... It will work, but it will require that the main thread is not doing any heavy lifting, or any lifting at all... Would be great to use the GPU and CoreAnimation to its full extent.. – Medalist