Core Animation学习----CAkeyframeAnimation

最新推荐文章于 2017-02-07 11:01:56 发布

转载最新推荐文章于 2017-02-07 11:01:56 发布 · 2.5k 阅读

文章标签：

#animation #path #delay #action #360 #class

ios技术专栏收录该内容

54 篇文章

订阅专栏

本文介绍如何使用Core Animation创建Pacman的开合嘴动画效果。通过创建两个不同状态的UIBezierPath，并利用CABasicAnimation实现反复切换，同时使用CAKeyframeAnimation使Pacman沿特定路径移动。

CAkeyframeAnimation：提供了关键帧动画的支持。你可以为层属性指定key path来使其产生动画，这个数组的值保存了动画每个阶段的值，同时还有key frame的次数和时间函数。在动画运行的时候，数组中的每个值就会被轮流进行插值使用。

- (void)viewDidLoad {

[super viewDidLoad];



self.title = [[self class] displayName];



self.view.backgroundColor = [UIColor blackColor];



CGFloat radius = 30.0f;

CGFloat diameter = radius * 2;

CGPoint arcCenter = CGPointMake(radius, radius);



// Create a UIBezierPath for Pacman's open state

pacmanOpenPath = [[UIBezierPath bezierPathWithArcCenter:arcCenter

radius:radius

startAngle:DEGREES_TO_RADIANS(35)

endAngle:DEGREES_TO_RADIANS(315)

clockwise:YES] retain];

[pacmanOpenPath addLineToPoint:arcCenter];

[pacmanOpenPath closePath];



// Create a UIBezierPath for Pacman's close state

pacmanClosedPath = [[UIBezierPath bezierPathWithArcCenter:arcCenter

radius:radius

startAngle:DEGREES_TO_RADIANS(1)

endAngle:DEGREES_TO_RADIANS(359)

clockwise:YES] retain];

[pacmanClosedPath addLineToPoint:arcCenter];

[pacmanClosedPath closePath];



// Create a CAShapeLayer for Pacman, fill with yellow

shapeLayer = [CAShapeLayer layer];

shapeLayer.fillColor = [UIColor yellowColor].CGColor;

shapeLayer.path = pacmanClosedPath.CGPath;

shapeLayer.strokeColor = [UIColor grayColor].CGColor;

shapeLayer.lineWidth = 1.0f;

shapeLayer.bounds = CGRectMake(0, 0, diameter, diameter);

shapeLayer.position = CGPointMake(-40, -100);

[self.view.layer addSublayer:shapeLayer];



SEL startSelector = @selector(startAnimation);

UIGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:startSelector];

[self.view addGestureRecognizer:recognizer];

[recognizer release];



// start animation after short delay

[self performSelector:startSelector withObject:nil afterDelay:1.0];

}

- (void)startAnimation {

// Create CHOMP CHOMP animation

CABasicAnimation *chompAnimation = [CABasicAnimation animationWithKeyPath:@"path"];

chompAnimation.duration = 0.25;



chompAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

chompAnimation.repeatCount = HUGE_VALF;

chompAnimation.autoreverses = YES;

// Animate between the two path values

chompAnimation.fromValue = (id)pacmanClosedPath.CGPath;

chompAnimation.toValue = (id)pacmanOpenPath.CGPath;



[shapeLayer addAnimation:chompAnimation forKey:@"chompAnimation"];



// Create digital '2'-shaped path

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:CGPointMake(-40, 100)];

[path addLineToPoint:CGPointMake(360, 100)];

[path addLineToPoint:CGPointMake(360, 200)];

[path addLineToPoint:CGPointMake(-40, 200)];

[path addLineToPoint:CGPointMake(-40, 300)];

[path addLineToPoint:CGPointMake(360, 300)];



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

moveAnimation.path = path.CGPath;

moveAnimation.duration = 8.0f;

// Setting the rotation mode ensures Pacman's mouth is always forward. This is a very convenient CA feature.

moveAnimation.rotationMode = kCAAnimationRotateAuto;

[shapeLayer addAnimation:moveAnimation forKey:@"moveAnimation"];}