iOS:核心动画之关键帧动画CAKeyframeAnimation

一、概述

在iOS开发中，动画效果是十分重要的一个功能。在核心动画框架中，CAKeyframeAnimation是一个比较强悍的动画类。它可以对一个属性在动画过程中进行多个关键帧的设置，而非简单的起始和结束值设置。本文将详细介绍CAKeyframeAnimation的使用方法，以及通过多个实际案例分享如何优雅地使用它。

二、使用方法

CAKeyframeAnimation的使用方式，主要分为以下几个步骤：

1.创建CAKeyframeAnimation对象

```

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"位置属性名称"];

```

注：位置属性名称可以为position、transform.rotation.z等。

2.设置动画属性

```

animation.values = @[@(起始值), @(第一个关键帧的值), @(第二个关键帧的值), @(...), @(结束值)];

```

以上代码中，values为动画属性的具体值，可以是NSNumber类型的数值或NSValue类型的对象。通过values数组，可以定义多个关键帧的动画属性值。

3.设置动画时间、循环、执行次数等属性

```

animation.duration = 1.0;

animation.repeatCount = HUGE_VALF; // 无限循环

animation.autoreverses = YES; //动画结束时是否执行逆动画

```

4.将动画添加到相应的图层中

```

[view.layer addAnimation:animation forKey:@"动画key"];

```

以上为关键帧动画的常规使用方式，同时在使用过程中还可以结合一些其他的属性进行动画效果的定制，这里不再赘述。

三、实例分享

1.图片抖动效果

代码实现

```

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];

animation.duration = 0.1;

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

animation.repeatCount = MAXFLOAT;

animation.values = @[@(-Angle2Radian(4)), @(Angle2Radian(4)),@(-Angle2Radian(4))];

[self.layer addAnimation:animation forKey:nil];

```

效果展示


2.心跳动画

代码实现

```

CALayer *heartViewLayer = [[CALayer alloc] init];

UIView *heartView = [[UIView alloc] init];

[heartView setFrame:CGRectMake(20, 20, 36, 36)];

[heartView setBackgroundColor:[UIColor clearColor]];

[self.view addSubview:heartView];

[heartView.layer addSublayer:heartViewLayer];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

[shapeLayer setFillColor:[UIColor redColor].CGColor];

CGMutablePathRef path = CGPathCreateMutable();

CGPathMoveToPoint(path, nil, CGRectGetWidth(heartView.bounds)/2, CGRectGetHeight(heartView.bounds)/5);

CGPathAddCurveToPoint(path, nil, CGRectGetWidth(heartView.bounds)*4/5, 0, CGRectGetWidth(heartView.bounds), CGRectGetHeight(heartView.bounds)*2/5, CGRectGetWidth(heartView.bounds)/2, CGRectGetHeight(heartView.bounds)*4/5);

CGPathAddCurveToPoint(path, nil, CGRectGetWidth(heartView.bounds)/5, CGRectGetHeight(heartView.bounds)*2/5, 0, 0, CGRectGetWidth(heartView.bounds)/2, CGRectGetHeight(heartView.bounds)/5);

[shapeLayer setPath:path];

CGPathRelease(path);

[heartViewLayer addSublayer:shapeLayer];

// 心跳动画

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];

animation.duration = 0.7;

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

animation.values = @[

[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)],

[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)],

[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9, 0.9, 1.0)],

[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.01, 1.01, 1.0)],

[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]

];

animation.repeatCount = MAXFLOAT;

[heartViewLayer addAnimation:animation forKey:nil];

```

效果展示


3.喷泉动画

代码实现

```

// 关键帧动画: 喷泉

#define kMouthWidth 450.0

#define kMouthHeight 100.0

#define kMouthCp1X 100.0

#define kMouthCp1Y 110.0

#define kMouthCp2X 130.0

#define kMouthCp2Y 90.0

CGPoint mouthStartPoint = CGPointMake((CGRectGetWidth(self.view.bounds)-kMouthWidth)/2, CGRectGetHeight(self.view.bounds));

UIBezierPath *mouthPath = [UIBezierPath bezierPath];

[mouthPath moveToPoint:mouthStartPoint];

[mouthPath addLineToPoint:CGPointMake(mouthStartPoint.x, mouthStartPoint.y-kMouthHeight)];

[mouthPath addCurveToPoint:CGPointMake(mouthStartPoint.x+kMouthWidth, mouthStartPoint.y-kMouthHeight) controlPoint1:CGPointMake(mouthStartPoint.x+kMouthCp1X, mouthStartPoint.y-kMouthCp1Y) controlPoint2:CGPointMake(mouthStartPoint.x+kMouthCp2X, mouthStartPoint.y-kMouthCp2Y)];

[mouthPath addLineToPoint:CGPointMake(mouthStartPoint.x+kMouthWidth, mouthStartPoint.y)];

[mouthPath closePath];

CALayer *mouthLayer = [[CALayer alloc] init];

[mouthLayer setFrame:self.view.bounds];

[mouthLayer.backgroundColor] = [UIColor colorWithRed:0.000 green:0.455 blue:0.756 alpha:1.000].CGColor;

[self.view.layer addSublayer:mouthLayer];

CAEmitterLayer *emitter = [CAEmitterLayer layer];

[emitter setFrame:mouthLayer.bounds];

[mouthLayer addSublayer:emitter];

CAEmitterCell* cell = [CAEmitterCell emitterCell];

cell.emissionLongitude = M_PI/2.0;

cell.emissionLatitude = 0.0;

cell.lifetime = 5.0;

cell.birthRate = 1000;

cell.velocity = 100;

cell.velocityRange = 50;

cell.yAcceleration = 100;

cell.contents = (__bridge id)([UIImage imageNamed:@"star.png"].CGImage);

emitter.emitterCells = @[cell];

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

animation.duration = 5.0;

animation.path = mouthPath.CGPath;

animation.rotationMode = kCAAnimationRotateAuto;

[emitter addAnimation:animation forKey:@"pathAnimation"];

```

效果展示


四、总结

综合以上关键帧动画的案例，可以看到CAKeyframeAnimation不仅仅是一种简单的动画方案，而是一种非常灵活的动画解决方案。通过多个关键点的设定，我们可以实现各种不同的动画效果，可以在各个业务场景中得到灵活应用。因此，熟悉CAKeyframeAnimation的使用方法和特性也是iOS开发者必备的技能之一。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/