时间:2021-07-01 10:21:17 帮助过:29人阅读
###1、核心动画的基本概述* CoreAnimation的是 Objective - C 的框架,它通过简单的动画编程接口来提供一套高性能的动画引擎。 * 简单易用的高性能混合编程模型。 * 类似视图一样,你可以通过使用图层来创建复杂的接口。 * 轻量级的数据结构,它可以同时显示并让上百个图层产生动画效果。 * **`一套简单的动画接口,可以让你的动画运行在独立的线程里面,并可以独立于主线程之外`**。 * **`一旦动画配置完成并启动,核心动画完全控制并独立完成相应的动画帧`**。 * 提高应用性能。应用程序只当发生改变的时候才重绘内容。再小的应用程序也需要改变和提供布局服务层。核心动画还消除了在动画的帧速率上运行的应用程序代码。 * 灵活的布局管理模型。包括允许图层相对同级图层的关系来设置相应属性的位置和大小。* 核心动画类(CAAnimation)包含CABasicAnimation(基本动画)、CATransition(转场动画)、CAKeyframeAnimation(关键帧动画)、CAAnimationGrup(动画组),动画的对象是图层(layer)。 * **`CABasicAnimation`**:提供了在图层的属性值间简单的动画。 * **`CAKeyframeAnimation`**: 提供支持关键帧动画。你指定动画的一个图层属性的关键路径,一个表示在动画的每个阶段的价值的数组,还有一个关键帧时间的数组和时间函数。 * **`CATransition`**:提供了一个影响整个图层的内容过渡效果。在动画显示过程中采用淡出(fade)、推出(push)、显露(reveal)图层的内容。 * **`CAAnimationGroup`**: 允许一系列动画效果组合在一起,并行显示动画。 ###2、基本动画(CABasicAnimation)CABasicAnimation 用于实现layer属性值从一个值(fromValue)到另外一个值(toValue)变化的简单动画,比如旋转、缩放、逐渐透明、移动等。* **基本使用** 1. 创建动画并设置动画要改变的属性 ``` CABasicAnimation *animation = [CABasicAnimation animation]; [animation setKeyPath:@"transform.scale"]; // 或者 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; ``` 2. 设置动画属性 ``` animation.fromValue = @1.0; animation.toValue = @0.5; animation.duration = 0.5; animation.autoreverses = YES; animation.repeatCount = 10; ``` 3. 添加动画到图层 ``` [aniView.layer addAnimation:animation forKey:@"ani_scale"]; ```* **动画的属性** * **`fromValue`**:属性的起始值,id类型。 * **`toValue`**:属性的目标值,id类型。 * **`byValue`**:属性要变化的值,也就是fromValue到toValue所改变的值。 * **`duration`**:动画的持续时间。 * **`autoreverses`**:动画是否有恢复动画。 * **`repeatCount`**:动画重复次数,设置为HUGE_VALF表示无限次。 * **`removedOnCompletion`**:是否回到初始状态,要设置fillMode为kCAFillModeForwards才起效果。 * **`fillMode`**:非动画时的状态。 * **`speed`**:动画的速度,默认1.0,设为2.0就是两倍的速度完成动画。 * **`timingFunction`**:动画速度变化控制函数包含(Linear、EaseIn、EaseIn、EaseInEaseOut)。 * **`timeOffset`**:动画的时间偏移。 * **`beginTime`**:动画开始的时间,为CACurrentMediaTime() + 延迟秒数。 * **`CACurrentMediaTime()`**:当前媒体时间,可以用于动画暂停和开始的时间记录。这个绝对时间就是将mach_absolute_time()(mach_absolute_time是一个CPU/总线依赖函数,返回一个基于系统启动后的时钟”嘀嗒”数。)转换成秒后的值.这个时间和系统的uptime有关,系统重启后CACurrentMediaTime()会被重置。 * **暂停动画**```- (void)pauseAnimation{ CFTimeInterval stopTime = [_aniView.layer convertTime:CACurrentMediaTime() fromLayer:nil]; // 动画暂停时的媒体时间 _aniView.layer.timeOffset = stopTime; // 将偏移的时间定格在暂停时 _aniView.layer.speed = 0.0; // 将速度设为0}```* **继续动画**```- (void)recoverAnimation{ CFTimeInterval stopTime = _aniView.layer.timeOffset; _aniView.layer.timeOffset = 0; // 重置动画的时间偏移 _aniView.layer.speed = 1.0; // 恢复动画的速度 _aniView.layer.beginTime = 0; // 将beginTime清0 _aniView.layer.beginTime = [_aniView.layer convertTime:CACurrentMediaTime() fromLayer:nil] - stopTime; // 从新设置beginTime,这个时间就是暂停了多久的秒数。}```参考:[How to pause the animation of a layer tree](https://developer.apple.com/library/ios/qa/qa1673/_index.html)###3、关键帧动画(CAKeyframeAnimation)CAKeyframeAnimation 可以给一个图层提供多个目标值(values)或者一个指定路径(path)的动画。关键帧动画有如下几个重要参数:**`values`:**指定图层属性(position、scale、rotation...)的多个目标值,这个图层就会由这些指定的值进行动画。**`path`:**一个`CGPathRef`类型的路径,指定图层就会沿着这个路径进行动画。**`keyTimes`:**关键帧指定对应的时间点,其取值范围为0到1.0。也就是keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间平分。 **`calculationMode`:**关键帧之间的插值计算模式,有如下几种: kCAAnimationLinear(线性的,两帧之间连续显示) kCAAnimationDiscrete(离散的,只在关键帧处显示) kCAAnimationPaced(强制步调一致的,keyTimes和timingFunctions设置无效) kCAAnimationCubic(两帧过度是圆滑曲线的) kCAAnimationCubicPaced(圆滑过度并且步调一致)* **多个目标值的动画**: 1. 创建一个改变position的关键帧动画并设置它的基本属性 ``` CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; animation.duration = duration; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; animation.repeatCount = 10; ``` 2. 指定多个目标点并设置每帧对应的时间点 ``` NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)]; NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, 0)]; NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight, TSreenHeight/2)]; NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, TSreenHeight)]; NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)]; NSArray *values = @[value1,value2,value3,value4,value5]; animation.values = values; animation.keyTimes = @[@0,@.3,@.6,@.7,@1]; ``` 3. 添加动画到指定的图层 ``` [_ballImageView.layer addAnimation:rotationAnim forKey:nil]; ```* **指定路径的动画:** 1. 创建一个改变position的关键帧动画并设置它的基本属性 ``` CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; animation.duration = duration; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; animation.repeatCount = 10; ``` 2. 设置一个贝塞尔曲线的动画路劲path ``` UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, 160)]; CGPoint endPoint1 = CGPointMake(160, 160); CGPoint endPoint2 = CGPointMake(320, 160); CGPoint controlPoint = CGPointMake(80, 0); CGPoint controlPoint2 = CGPointMake(240, 320); [path addQuadCurveToPoint:endPoint1 controlPoint:controlPoint]; [path addQuadCurveToPoint:endPoint2 controlPoint:controlPoint2]; ``` 3. 添加动画到图层 ``` [imgView.layer addAnimation:keyAnimation forKey:nil]; ```###4、转场动画(CATransition)CATransition 用于视图的页面切换、页面更新时的转场动画,提供了多种type和subType转场效果。* **type属性:** 转场动画效果(`API中公开的效果只有fade、moveIn、push、reveal四种,其他为私有`)。 1. **`fade`** 淡出效果 2. **`moveIn`** 进入效果 3. **`push`** 推出效果 4. **`reveal`** 移出效果 5. **`cube`** 立方体翻转效果 6. **`suckEffect`** 抽走效果 7. **`rippleEffect`** 水波效果 8. **`pageCurl`** 翻开页效果 9. **`pageUnCurl`** 关闭页效果 10. **`cameraIrisHollowOpen`** 相机镜头打开效果 11. **`cameraIrisHollowClose`** 相机镜头关闭效果* **subType属性:** 转场的动画方向 1. **`fromLeft` 或 `kCATransitionFromLeft`** 从左过度 2. **`fromRight` 或 `kCATransitionFromRight`** 从右过度 3. **`fromTop` 或 `kCATransitionFromTop`** 从上过度 4. **`fromBottom` 或 `kCATransitionFromBottom`** 从下过度 * **实例代码:** ``` CATransition *animation = [CATransition animation]; animation.duration = 0.5; animation.type = @"moveIn"; // 或者 animation.type = kCATransitionMoveIn; animation.subtype = @"fromLeft"; // 或者 animation.subtype = kCATransitionFromLeft [self.photoView.layer addAnimation:self.animation forKey:nil]; ```###5、动画组(CAAnimationGrup)CAAnimationGrup 可以为一个layer添加多个动画效果,要实现复杂的动画可以使用用动画组的方式给layer添加动画。* 实例代码 1. 创建多个动画 ``` // 旋转动画 CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; rotation.duration = 3; rotation.byValue = @(2 * M_PI); // 缩放动画 CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; scale.duration = 3; scale.byValue = @2; // 变透明动画 CABasicAnimation *opacity = [CABasicAnimation animationWithKeyPath:@"opacity"]; opacity.duration = 3; opacity.byValue = @-1; // 圆角变化动画 CABasicAnimation *cornerRadius = [CABasicAnimation animationWithKeyPath:@"cornerRadius"]; cornerRadius.duration = 3; cornerRadius.byValue = @75; // 关键帧动画 CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; keyAnimation.duration = 3; NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)]; NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, 0)]; NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight, TSreenHeight/2)]; NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, TSreenHeight)]; NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)]; NSArray *values = @[value1,value2,value3,value4,value5]; keyAnimation.values = values; keyAnimation.calculationMode = kCAAnimationCubic; ``` 2. 创建一个动画组,组合多个动画 ``` CAAnimationGroup *aniGroup = [CAAnimationGroup animation]; aniGroup.duration = 3; aniGroup.repeatCount = HUGE_VALF; aniGroup.animations = @[rotation, scale, opacity, cornerRadius, keyAnimation]; [self.aniView.layer addAnimation:aniGroup forKey:nil]; ```###6、动画画轨迹(CAShapeLayer添加动画)CAShapeLayer 是 CALayer 的子类,可以根据设定的path画出对应的图形、曲线等,还可以添加动画,实现动画画图。* **CAShapeLayer属性:** 1. **`path`:** 图像所依赖的路径,CGPathRef类型 2. **`fillColor`:** 图形填充颜色 3. **`fillRule`:** 填充的类型 4. **`strokeColor`:**描边的颜色 5. **`lineWidth`**:线条的宽度 6. **`lineCap`:** 线条端点的样式 7. **`lineJoin`:** 两个链接点的样式 8. **`miterLimit`:** 两条线连接时斜接的长度 9. **`strokeStart`:** 绘制的起点,取值范围[0~1],默认0 10. **`strokeEnd`:** 绘制的终点,取值范围[0~2],默认1* **CAShapeLayer画图:**``` // 1.创建条内切圆路径 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)]; // 2.创建CAShapeLayer图层并设置属性 CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = CGRectMake(0, 0, 200, 200); shapeLayer.path = path.CGPath; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.strokeColor = [UIColor redColor].CGColor; shapeLayer.lineWidth = 10.0f; shapeLayer.lineCap = kCALineCapRound; shapeLayer.strokeStart = 0.25; shapeLayer.strokeEnd = 1; // 3.添加图层 [self.view.layer addSublayer:shapeLayer];```* **CAShapeLayer添加动画:**``` // 4.给shapeLayer的strokeStart 或者 strokeEnd 属性添加动画,就可以实现动画画图了。 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; animation.duration = 3; animation.fromValue = @0; animation.toValue = @1; [shapeLayer addAnimation:animation forKey:@"ani_strokeStart"];```###7、核心动画Demo####Demo下载地址:[https://github.com/fuqinglin/CoreAnimationDemos.git](https://github.com/fuqinglin/CoreAnimationDemos.git)