使用CAKeyframeAnimation的C4Image自定义动画

时间:2013-04-25 15:31:59

标签: c4

我正在移植一个现有的iOS应用以学习C4,我需要使用自定义动画来滑动图像,并且弹出'使用CAKeyframeAnimation从屏幕外生效。

使用C4实现更复杂动画的最佳方式是什么?

图像创建

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

以前实施中使用的CAKeyframeAnimation

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;

1 个答案:

答案 0 :(得分:0)

C4中的所有可视对象都有一个可以访问的图层属性。创建CAKeyframeAnimation时,可以将此属性用作要添加动画的对象。

上面的代码工作得很好(虽然我确实调整了一些数字以确保对象在画布上)。

我将代码更改为:

#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

你可以抓住这个有效的git repo

我必须做的主要事情是:

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

我所做的其他改动只是坐标和颜色,以确保一切正常。