ios中的Core Animation

我们在项目开发过程中，偶尔会遇到一些关于动画的小功能。那么关于动画，我们需要掌握哪些知识点呢？

我们先来了解下本文介绍的Core Animation,中文翻译为核心动画，它是一组非常强大的动画处理API，使用它能做出非常炫丽的动画效果，而且往往是事半功倍。也就是说，使用少量的代码就可以实现非常强大的功能。它可以用在Mac OS X和iOS平台。Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。

注意事项：Core Animation是直接作用在CALayer上的，并非UIView。

1.Core Animation的结构
首先我们来看一张图，如下图示：

核心动画1.png

注意事项：
1.需要注意的是CAAnimation 和 CAPropertyAnimation 都是抽象类。
2.view是负责响应事件的，layer是负责显示的。

1.使用步骤

1：初始化一个CAAnimation对象，并设置一些动画相关属性。

2：通过调用CALayer的addAnimation:forKey:方法增加CAAnimation对象到CALayer中，这样就能开始执行动画了。

3：通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画。

2.动画的基本制作、暂停、恢复。
2.1 动画的制作

     //使用CABasicAnimation创建基础动画
     CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
     anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
     anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
     anima.duration = 1.0f;
//     anima.fillMode = kCAFillModeForwards; 当动画结束后，layer会一直保持着动画最后的状态
//     anima.removedOnCompletion = NO;
     [self.demoView.layer addAnimation:anima forKey:@"positionAnimation"];

效果如下：

使用CABasicAnimation创建基础动画.gif

2.2 动画的暂停

- (IBAction)pause:(id)sender {
    
    [self pauseLayer:self.demoView.layer];
}
#pragma mark - 暂停CALayer动画
- (void)pauseLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
    // 让CALayer的时间停止走动
    layer.speed = 0.0;
    // 让CALayer的时间停留在pausedTime这个时刻
    layer.timeOffset = pausedTime;
}

2.3 动画的恢复

- (IBAction)resume:(id)sender {
    [self resumeLayer:self.demoView.layer];
}
#pragma mark - 恢复动画
- (void)resumeLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = layer.timeOffset;
    // 1. 让CALayer的时间继续行走
    layer.speed = 1.0;
    // 2. 取消上次记录的停留时刻
    layer.timeOffset = 0.0;
    // 3. 取消上次设置的时间
    layer.beginTime = 0.0;
    // 4. 计算暂停的时间(这里也可以用CACurrentMediaTime()-pausedTime)
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    // 5. 设置相对于父坐标系的开始时间(往后退timeSincePause)
    layer.beginTime = timeSincePause;
    
}

效果如下：

UIView 暂停恢复.gif

动画的调用方式
3.1 UIView 代码块调用

  // UIView 代码块调用：
     _demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
     
     [UIView animateWithDuration:1.0f animations:^{
     _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
     } completion:^(BOOL finished) {
     _demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
     }];

3.2 UIView [begin commit]模式

_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
     [UIView beginAnimations:nil context:nil];
     [UIView setAnimationDuration:1.0f];
     _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
     [UIView commitAnimations];

3.3 使用Core Animation中的类

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
anima.duration = 1.0f;
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

实现效果，如下

UIView 代码块调用.gif

其他的动画效果：
旋转动画

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//绕着z轴为矢量，进行旋转(@"transform.rotation.z"==@@"transform.rotation")
     anima.toValue = [NSNumber numberWithFloat:3*M_PI];
     anima.duration = 1.0f;
     [_demoView.layer addAnimation:anima forKey:@"rotateAnimation"];

效果如下：

旋转动画.gif

透明动画

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform.scale"];//同上
     anima.toValue = [NSNumber numberWithFloat:2.0f];
     anima.duration = 1.0f;
     [_demoView.layer addAnimation:anima forKey:@"scaleAnimation"];

效果如下：

透明动画.gif

背景色变化动画

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
     anima.toValue =(id) [UIColor greenColor].CGColor;
     anima.duration = 5.0f;
     [_demoView.layer addAnimation:anima forKey:@"backgroundAnimation"];

关键帧动画 values

CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
     NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
     NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
     NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
     NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
     NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
     NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
     anima.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
     anima.duration = 2.0f;
     anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];//设置动画的节奏
     anima.delegate = self;//设置代理，可以检测动画的开始和结束
     [_demoView.layer addAnimation:anima forKey:@"keyFrameAnimation"];

CAAnimationGroup 组合动画

 // 位移动画
     CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
     NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
     NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
     NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
     NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
     NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
     NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
     anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];

过渡动画

[UIView beginAnimations:@"animationID" context:nil];
     [UIView setAnimationDuration:0.5f]; //动画时长
     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
     [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.demoView cache:YES]; //给视图添加过渡效果
     //在这里写你的代码.
     [UIView commitAnimations]; //提交动画

- (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIView *) view
{
    //创建CATransition对象
    CATransition *animation = [CATransition animation];
    //设置运动时间
    animation.duration = 2;
    //设置运动type
    animation.type = type;
    if (subtype != nil) {
        //设置子类
        animation.subtype = subtype;
    }
    //设置运动速度
    animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;
    [view.layer addAnimation:animation forKey:@"animation"];
}

代码地址：
ios — Core Animation
关于，ios中的Core Animation简单到这。

ios中的Core Animation

你可能感兴趣的:(ios中的Core Animation)