欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Core Animation

程序员文章站 2022-03-16 17:11:28
...
原文

http://www.cocoachina.com/ios/20160517/16290.html

概念

Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。
核心动画位于UIKit的下一层,相比UIView动画,它可以实现更复杂的动画效果。
核心动画作用在CALayer(Core animation layer)上,CALayer从概念上类似UIView,我们可以将UIView看成是一种特殊的CALayer(可以响应事件)。
实际上,每一个view都有其对应的layer,这个layer是root layer:

 @property(nonatomic,readonly,strong)                 CALayer  *layer;

给view加上动画,本质上是对其layer进行操作,layer包含了各种支持动画的属性,动画则包含了属性变化的值、变化的速度、变化的时间等等,两者结合产生动画的过程。
核心动画和UIView动画的对比:UIView动画可以看成是对核心动画的封装,和UIView动画不同的是,通过核心动画改变layer的状态(比如position),动画执行完毕后实际上是没有改变的(表面上看起来已改变)。
总体来说核心动画的优点有:

  • 性能强大,使用硬件加速,可以同时向多个图层添加不同的动画效果
  • 接口易用,只需要少量的代码就可以实现复杂的动画效果。
  • 运行在后台线程中,在动画过程中可以响应交互事件(UIView动画默认动画过程中不响应交互事件)。
使用实例
- (void)startAnimation
{
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    anim.duration = 1.5; // 动画持续1.5s

    anim.repeatCount = HUGE_VALF; //动画重复次数 default is 1

    //    anim.beginTime = 1.0f;// 动画延迟时间 default is 0

    //动画执行的过程中 先快后慢  先慢后快  匀速 等方式完成动画
    //    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    anim.autoreverses = YES; //动画结束的时候是否要按原来返回到原来的状态


    anim.fromValue = @1.0f; //动画改变起始值

    anim.toValue = @0.5; //动画改变结束值

    //    anim.byValue  和初始状态相比的改变量


    //    anim.delegate = self;//delegate 可以监听到动画开始和动画结束

    // 动画结束的时候,保持结束时的状态
    anim.removedOnCompletion = NO;
    // 始终保持最新的效果
    anim.fillMode = kCAFillModeForwards;

    [self.tipImageView.layer addAnimation:anim forKey:@"key"];
}
核心动画类的常用属性

keyPath:可以指定keyPath为CALayer的属性值,并对它的值进行修改,以达到对应的动画效果,需要注意的是部分属性值是不支持动画效果的。

CATransform3D Key Paths : (example)transform.rotation.z
     //rotation.x 上下翻转
     //rotation.y  左右翻转
     //rotation.z  中心点旋转
     //rotation 旋轉
     //scale.x 
     //scale.y
     //scale.z
     //scale 缩放
     //translation.x
     //translation.y
     //translation.z
     //translation 平移
     //CGPoint Key Paths : (example)position.x
     //x 横向平移
     //y 纵向平移
     //CGRect Key Paths : (example)bounds.size.width
     //origin.x 
     //origin.y
     //origin
     //size.width 宽度变化
     //size.height 高度变化
     //size 大小变化
     //opacity 透明度
     //backgroundColor 背景色渐变
     //cornerRadius 变为圆角
     //borderWidth 边框
     //contents 内容替换(view1变为view2)
     //Shadow Key Path:
     //shadowColor 加阴影颜色
     //shadowOffset 加阴影大小
     //shadowOpacity 加阴影透明度
     //shadowRadius  加阴影圆角

duration:动画的持续时间
repeatCount:动画的重复次数,default is 1,始终播放使用HUGE_VALF
beginTime:动画延迟执行时间,default is 0
timingFunction:动画的时间节奏控制,使用[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]创建实例

timingFunctionName的enum值如下:
     kCAMediaTimingFunctionLinear 匀速
     kCAMediaTimingFunctionEaseIn 慢进
     kCAMediaTimingFunctionEaseOut 慢出
     kCAMediaTimingFunctionEaseInEaseOut 慢进慢出
     kCAMediaTimingFunctionDefault 默认值(慢进慢出)

fillMode:视图在非Active时的行为,重要,某些情况下动画不运行的原因

CA_EXTERN NSString * const kCAFillModeForwards
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeBackwards
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeBoth
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeRemoved
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);

key:[self.tipImageView.layer addAnimation:anim forKey:@"key"];key值在某些情况下必填,出现过在collectionViewCell中添加动画时因为key值为空造成的个别cell动画停止。
delegate:可以监听到动画开始和动画结束

代理方法如下:
     - (void)animationDidStart:(CAAnimation *)anim;  //动画开始
     - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; //动画结束
CABasicAnimation

CABasicAnimation可以设定keyPath的起点,终点的值,动画会沿着设定点进行移动,CABasicAnimation可以看成是只有两个关键点的特殊的CAKeyFrameAnimation。

- (void)position {
    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"position"];
    ani.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenter.layer addAnimation:ani forKey:@"PostionAni"];
}

CABasicAnimation只能实现系统定义的一些简单动画。

实例,一组绕某一点旋转的动画实现:

- (void)addAnimation
{
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    anim.toValue = [NSNumber numberWithFloat:-M_PI_4 / 2];
    anim.duration = 10;
    anim.autoreverses = YES;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.repeatCount = MAXFLOAT; //如果这里想设置成一直自旋转,可以设置为MAXFLOAT,否则设置具体的数值则代表执行多少次
    [self setAnchorPoint:CGPointMake(0.84, 0.186) forView:self.sunshineView];
    [self.sunshineView.layer addAnimation:anim forKey:@"anim"];
}

其中,绕某一点旋转要设置该点为AnchorPoint(锚点),锚点范围为(0.0, 0.0)--(1.0,1.0),在IOS中右上为(1.0,0.0)。同时,在设置锚点的同时,会造成原视图的位移,原因未明,所以要手动偏移回去。使用如下代码手动设置锚点。

- (void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
    CGPoint oldOrigin = view.frame.origin;
    view.layer.anchorPoint = anchorPoint;
    CGPoint newOrigin = view.frame.origin;

    CGPoint transition;
    transition.x = newOrigin.x - oldOrigin.x;
    transition.y = newOrigin.y - oldOrigin.y;

    view.center = CGPointMake(view.center.x - transition.x, view.center.y - transition.y);
}
CAKeyframeAnimation

可以设定keyPath起点、中间关键点(不止一个)、终点的值,每一帧所对应的时间,动画会沿着设定点进行移动。
CAKeyframeAnimation的重要属性:
values:关键帧数组对象,里面每一个元素即为一个关键帧,动画会在对应的时间段内,依次执行数组中每一个关键帧的动画。包括起始点和终点,对象类型。
path:动画路径对象,可以指定一个路径,在执行动画时路径会沿着路径移动,Path在动画中只会影响视图的Position。
keyTimes:设置关键帧对应的时间点,范围:0-1。如果没有设置该属性,则每一帧的时间平分。进度0到0.2到0.6到1.0,类似这样
实现轮播的一段简易代码:

    CAKeyframeAnimation *anim1 = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    anim1.repeatCount = HUGE_VALF;
    anim1.duration = animtionDuration;
    anim1.values = @[@(self.frame.size.width/2),@(- self.frame.size.width/2),@(self.frame.size.width*1.5),@(self.frame.size.width/2)];
    anim1.keyTimes = @[[NSNumber numberWithFloat:0.0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1.0]];
    anim1.removedOnCompletion = NO;
    // 始终保持最新的效果
    anim1.fillMode = kCAFillModeForwards;
    [self.cloudyView1.layer addAnimation:anim1 forKey:@"anim1"];
    
    CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"position.x"];
    anim2.repeatCount = HUGE_VALF;
    anim2.toValue = @(- self.frame.size.width);
    anim2.duration = animtionDuration;
    anim2.autoreverses = YES;
    anim2.removedOnCompletion = NO;
    // 始终保持最新的效果
    anim2.fillMode = kCAFillModeForwards;
    [self.cloudyView2.layer addAnimation:anim2 forKey:@"anim2"];