Custom Animations for C4Image with CAKeyframeAnimation

Question

I'm porting an existing iOS app to learn C4, and I need to use a custom animation to slide in an image with a 'bounce-in' effect from off-screen using a CAKeyframeAnimation.

What is the best way for me to implement more complex animations like this using C4?

Image Creation

C4Image *v = [C4Image imageNamed:@"assets/images/ca/defense.png"];
v.frame = CGRectMake(1500, 300, 400, 400); // off screen
[self addImage:v];

CAKeyframeAnimation used in previous implementation

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.duration = 0.5;

int steps = 100;
NSMutableArray *values = [NSMutableArray arrayWithCapacity:steps];
double value = 0;
float e = 2.71;
for (int t = 0; t < steps; t++) {
    value = 200 * pow(e, -0.055*t) * cos(0.08*t) + x; //418
    [values addObject:[NSNumber numberWithFloat:value]];
}

animation.values = values;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.delegate = self;
animation.beginTime = CACurrentMediaTime() + delay;

C4 - Travis · Answer 1 · 2013-07-22T17:08:23.377

All visual objects in C4 have a layer property that you can access. When you create a CAKeyframeAnimation you can use this property as the object to which you're adding the animation.

The above code works quite well (although I did tweak the numbers a bit to make sure the object was on the canvas).

I changed the code to:

#import "C4WorkSpace.h"

@implementation C4WorkSpace {
    C4Image *v;
}

-(void)setup {
    v = [C4Image imageNamed:@"C4Table"];
    v.origin = CGPointMake(self.canvas.center.x , self.canvas.center.y);
    v.borderColor = C4RED;
    v.borderWidth = 1.0f;
    v.width = self.canvas.width / 2.0f;
    [self.canvas addImage:v];
}

-(void)touchesBegan {
    CAKeyframeAnimation *animation = [CAKeyframeAnimation
                                      animationWithKeyPath:@"position.x"];
    animation.timingFunction = [CAMediaTimingFunction
                                functionWithName:kCAMediaTimingFunctionLinear];
    animation.duration = 0.5;

    int steps = 100;
    NSMutableArray *values = [NSMutableArray arrayWithCapacity:steps];
    double value = 0;
    float e = 2.71f;
    float x = v.origin.x;
    for (int t = 0; t < steps; t++) {
        value = 200 * pow(e, -0.025*t) * cos(0.08*t) - x; //418
        [values addObject:@(value)];
    }

    animation.values = values;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    animation.beginTime = CACurrentMediaTime() + 1.0f;

    [v.layer addAnimation:animation forKey:@"position.x"];
}

@end

You can grab this working git repo

The main thing I had to do was:

[v.layer addAnimation:animation forKey:@"position.x"];

The rest of the changes I made were just coordinates and colors to make sure everything was working properly.

your link to the gist isn't working and I can't find it on your site. Where did it go? — Adam Tindale, Jul 22 '13 at 13:50
Not sure what happened there... I tested the code and it runs nicely still. I also fixed the link. — C4 - Travis, Jul 22 '13 at 17:08
Thanks for the link. I was looking through the Gists and not the repos. Thanks. — Adam Tindale, Jul 29 '13 at 18:07

Custom Animations for C4Image with CAKeyframeAnimation

1 Answers1