iOS-Core Animation

作者: 顺7zi燃 | 来源:发表于2019-02-20 17:43 被阅读0次

iOS-Core Animation
iOS-Core Animation动画详解
iOS实现一个电子时钟
前端训练营第九周学习总结
Android 五类动画简单整理
css3动画
Instruments学习之Core Animation
[Andoird][Animation]
animation 动画
animation属性

1、视图效果

1.1 圆角

    // 圆角 + 剪裁
    self.secondView.layer.cornerRadius = 20;
    self.secondView.layer.masksToBounds = YES;

1.2 图层边框

    // 圆角 + 边框 + 剪裁
    self.fourthView.layer.cornerRadius = 20;
    self.fourthView.layer.borderWidth = 2;
    self.fourthView.layer.masksToBounds = YES;

1.3 阴影

简单的阴影

    //shadowOpacity: (0.0 - 1.0)(不可见 - 完全不透明)
    self.firstView.layer.shadowOpacity = 0.5f;
    //shadowColor: 阴影的颜色
    self.firstView.layer.shadowColor = [UIColor redColor].CGColor;
    //shadowOffset:阴影的方向和距离
    self.firstView.layer.shadowOffset = CGSizeMake(3, 3);
    //shadowRadius:阴影的模糊度
    self.firstView.layer.shadowRadius = 10.0f;

裁剪 + 阴影

// 内层视图进行裁剪，外层视图添加阴影(外层视图透明，会按里面内容进行显示阴影)
    self.shadowLayerView.layer.cornerRadius = 20;
    self.shadowLayerView.layer.borderWidth = 5.0f;
    self.shadowLayerView.layer.masksToBounds = YES;
    self.shadowView.layer.shadowOpacity = 0.5f;
    self.shadowView.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);
    self.shadowView.layer.shadowRadius = 10.0f;

阴影+裁剪.png

1.4 图层蒙版

/* 
 mask:  CALayer 类型。 mask图层定义了父图层的部分可见区域。
 mask 属性像是一个饼干切割机， mask 图层实习的部分会被保留下来，其他的则会被抛弃。
 CALayer 蒙版图层真正厉害的地方在于蒙版图不局限于静态图。任何有图层构成的都可以作为 mask 属性，这意味着你的蒙板可以通过代码甚至是动画实时生成。
*/
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = self.imageView.bounds;
    
    UIImage *image = [UIImage imageNamed:@"Cone"];
    maskLayer.contents = (__bridge id _Nullable)(image.CGImage);
    
    // apple mask to image layer
    self.imageView.layer.mask = maskLayer;

图层蒙版

1.5 拉伸过滤

1.6 组透明

2、变换

2.1 3D变换

透视投影

    // 透视投影
    CATransform3D transform = CATransform3DIdentity;
    // m34 的默认值是0，可以通过设置 m34 为-1.0/d 来应用透视效果， d 代表了想象中视角相机和屏幕之间的距离，以像素为单位，大概估算一个(500-1000)。
    transform.m34 = -1.0 / 500;
    transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0);
    imageView.layer.transform = transform;

灭点

当在透视角度绘图的时候，远离相机视角的物体将会变小变远，当远离到一个极限距离，它们可能就缩放成了一个点，于是所有的物体最后都汇聚消失在同一个点。
现实中，这个点通常是视图的中心。为了在应用中创建拟真效果的透视，这个点应该聚在屏幕中心，或者至少是包含所有3D对象的视图中心。

/* 注：oneImageView 和 twoImageView 是 contentView 的子视图
 sublayerTransform 影响所有的子图层 ，CATransform3D 类型。
                    可以一次性对包含这些图层的容器做变换，于是所有的子图层都自动继承了这个变换方式
 doubleSided: 控制图层的背面是否要被绘制。BOOL类型 默认YES,   NO:当图层正面从相机视角消失的时候，它将不会被绘制
*/
    CATransform3D perspective = CATransform3DIdentity;
    perspective.m34 = - 1.0 / 500.0;
    self.contentView.layer.sublayerTransform = perspective;
    
    // 1. 逆时针旋转45度
    CATransform3D transform = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
    self.oneImageView.layer.transform = transform;
    self.oneImageView.layer.doubleSided = NO;
    
    // 2. 顺时针旋转45度
    CATransform3D transform2 = CATransform3DMakeRotation(-M_PI_4, 0, 1, 0);
    self.twoImageView.layer.transform = transform2;
    self.twoImageView.layer.doubleSided = NO;

父子同时变换

    [self.view addSubview:self.outView];
    [self.outView addSubview:self.innerView];
    
    self.innerView.layer.position = [self.outView.layer convertPoint:self.outView.layer.position fromLayer:self.view.layer];
    
    CATransform3D transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);
    self.outView.layer.transform = transform;
    
    CATransform3D innerTransform = CATransform3DMakeRotation(-M_PI_4, 0, 0, 1);
    self.innerView.layer.transform = innerTransform;

3、专用图层

3.1 CAShapeLayer

CAShapeLayer 可以用来绘制所有能够通过 CGPath 来表示的形状，用UIBezierPath 创建了图层路径(矩形、椭圆、弧形、扇形、直线等)

3.2 CATextLayer

CATextLayer ，它以图层的形式包含了 UILabel 几乎所有的绘制特性( 也要比 UILabel 渲染得快)

3.3 CATransformLayer

CATransformLayer 并不平面化它的子图层，所以它能够用于构造一个层级的3D结构

3.4 CAGradientLayer

CAGradientLayer 是用来生成两种或更多颜色平滑渐变的。用 Core Graphics 复制一个 CAGradientLayer 并将内容绘制到一个普通图层的寄宿图也是有可能的，但是 CAGradientLayer 的真正好处在于绘制使用了硬件加速。

3.5 CAReplicatorLayer

CAReplicatorLayer 的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层，并在每个复制体上应用不同的变换。

3.6 CAScrollLayer

3.7 CATiledLayer

在主线程调用 UIImage 的 -imageNamed: 方法或者 -imageWithContentsOfFile:方法)将会阻塞你的用户界面，至少会引起动画卡顿现象。
CATiledLayer 为载入大图造成的性能问题提供了一个解决方案:将大图分解成小片然后将他们单独按需载入

3.8 CAEmitterLayer

CAEmitterLayer 是一个高性能的粒子引擎，被用来创建实时例子动画如:烟雾，火，雨等等这些效果

3.9 CAEAGLLayer

各种各样的OpenGL绘图缓冲的底层可配置项需要用 CAEAGLLayer 完成，它是 CALayer 的一个子类，用来显示任意的OpenGL图形。

3.10 AVPlayerLayer

AVPlayerLayer 是用来在iOS上播放视频的

4、隐式动画

4.1 事务

CATransaction

    //begin a new transaction
    [CATransaction begin];
    //set the animation duration to 1 second
    [CATransaction setAnimationDuration:1.0];
    //commit the transaction
    [CATransaction commit];

UIView

    //+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;
    [UIView beginAnimations: context:]
    //之间所有视图或者图 层属性的改变而做的动画都是由于设置了 的原因
    [UIView commitAnimations]

UIView +Block

    //+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations;
    [UIView animateWithDuration: animations:]

4.2 完成块

   // 用默认的事务做变换，默认的时间0.25秒
   [CATransaction setCompletionBlock:^{
    }];
// 或 
    //+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion 
    [UIView animateWithDuration: animations: completion:]

5、显示动画

5.1 CAAnimation 继承结构

CAAnimation继承结构.png

注意：上图中的黑色虚线代表”继承”某个类，红色虚线代表“遵守”某个协议
CAAnimationGroup：组动画
CAPropertyAnimation：属性动画
CATransition：转场动画

5.2 CAAnimation

CAAnimation.png

速度控制函数(CAMediaTimingFunction)
kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。