文章目录CABasicAnimation一、Core Animation 的分层二、动画作用在 CALayer 上不是 UIView三、CABasicAnimation 的三个核心要素1. keyPath —— 要动画的属性2. fromValue / toValue / byValue —— 动画的起点终点3. 时长与控制四、把动画加到 layer五、动画的「表现层」和「模型层」模型层Model Layer表现层Presentation Layer关键规则六、完整示例四种常见动画1. 淡出2. 缩放3. 旋转你的封面4. 沿 X 轴平移七、CABasicAnimation 的局限八、性能与注意事项CABasicAnimationCABasicAnimation是Core Animation 框架里最基础、最常用的动画类用来做「某个属性从一个值平滑变化到另一个值」的补间动画。你项目里封面旋转就是它。下面从概念到实战系统讲一遍。一、Core Animation 的分层先建立整体图景。iOS 动画分几层textUIKit 层 UIView animateWithDuration: ← 最简单做一次性动画 ↓底层转成 Core Animation 层 ├── CAAnimation抽象基类 │ ├── CAPropertyAnimation抽象 │ │ ├── CABasicAnimation ← 从 A 到 B │ │ └── CAKeyframeAnimation ← 沿路径/多个关键点 │ ├── CAAnimationGroup ← 多个动画组合 │ └── CATransition ← 转场动画 └── CALayer ← 动画作用的载体关键认知UIKit 的动画 API 是 Core Animation 的封装。想做无限循环、精确控制缓动、组合动画就得直接下到 Core Animation 层用CABasicAnimation。二、动画作用在 CALayer 上不是 UIViewUIView和CALayer是「一个视图两层」UIView负责响应事件、处理触摸、布局CALayer负责绘制和动画每个UIView背后都有一个layerview.layer。所有 Core Animation 的动画都是加到 layer 上的objc[self.coverImageView.layer addAnimation:rotation forKey:coverRotation]; // ↑ 注意是 layer不是 view为什么要分两层layer 更轻量可以在没有 UIView 的情况下独立存在比如CALayer可以单独做粒子效果动画性能也更好。三、CABasicAnimation 的三个核心要素一个CABasicAnimation回答三个问题问题对应属性改哪个属性keyPath从哪到哪fromValue/toValue或byValue怎么变duration/repeatCount/timingFunction等1. keyPath —— 要动画的属性objcCABasicAnimation *anim [CABasicAnimation animationWithKeyPath:transform.rotation.z];keyPath是字符串指向 layer 上某个可动画的属性。常用的keyPath含义效果position位置移动position.x/position.y单轴位置单方向移动opacity透明度淡入淡出bounds.size尺寸缩放改尺寸transform.scale缩放缩放transform.scale.xX 轴缩放横向缩放transform.rotation旋转旋转transform.rotation.z绕 Z 轴旋转屏幕平面内旋转你的封面transform.rotation.x绕 X 轴旋转上下翻转backgroundColor背景色颜色渐变cornerRadius圆角圆角变化borderWidth边框宽度边框变化注意 keyPath 支持点语法可以精确到子属性objcposition // 整个 position position.x // 只动 x transform.rotation.z // 只绕 z 转 bounds.size.width // 只改宽度关键不是所有属性都能动画。layer 上「可动画属性」有明确清单写错了会运行时崩溃报NSUnknownKeyException。常见的就是上面表里那些。2. fromValue / toValue / byValue —— 动画的起点终点三种组合方式objc// 方式 1从 A 到 B最常用 anim.fromValue 0; anim.toValue (M_PI * 2); // 方式 2从当前值变化 delta相对动画 anim.byValue 100; // 在当前值基础上 100 // 方式 3只给 toValuefromValue 取当前值 anim.toValue 1.0; // 从当前值变到 1.0重要概念fromValue/toValue是id类型所以要装箱objc0 // NSNumberint (M_PI * 2) // NSNumberdouble (YES) // NSNumberBOOL [UIColor redColor] // 颜色直接是对象 [NSValue valueWithCGPoint:...] // 结构体用 NSValue 包基本类型用()装箱对象类型直接用。3. 时长与控制objcanim.duration 20.0; // 一次动画持续 20 秒 anim.repeatCount HUGE_VALF; // 无限重复 anim.timingFunction [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; anim.autoreverses YES; // 到达终点后反向回到起点 anim.beginTime CACurrentMediaTime() 1.0; // 延迟 1 秒开始 anim.speed 2.0; // 2 倍速常用控制属性属性作用duration一次完整动画的时长秒repeatCount重复次数HUGE_VALF是无限repeatDuration重复的总时长autoreverses到终点后是否反向timingFunction缓动曲线匀速、加速、减速等beginTime延迟开始时间speed动画速度倍率缓动曲线timingFunction常量效果kCAMediaTimingFunctionLinear匀速kCAMediaTimingFunctionEaseIn慢进快出加速kCAMediaTimingFunctionEaseOut快进慢出减速kCAMediaTimingFunctionEaseInEaseOut慢进慢出kCAMediaTimingFunctionDefault默认类似 EaseInEaseOut四、把动画加到 layerobjc[layer addAnimation:anim forKey:someKey];forKey:是动画的标识不是 keyPath。作用是查询[layer animationForKey:someKey]拿到这个动画移除[layer removeAnimationForKey:someKey]移除替换同一个 key 再加动画会替换旧的去重用 key 判断是否已添加key 可以为 nil但那样就无法查询和精确移除了不推荐。五、动画的「表现层」和「模型层」这是 Core Animation最重要、最容易踩坑的概念。模型层Model Layer你直接读写的属性objclayer.position // 读到的永远是「真实」值 layer.transform layer.opacity表现层Presentation Layer屏幕上实际显示的属性objclayer.presentationLayer.position // 动画进行中的「当前显示值」关键规则动画播放时模型层的值不变只有表现层在变。objcCABasicAnimation *anim [CABasicAnimation animationWithKeyPath:opacity]; anim.fromValue 1.0; anim.toValue 0.0; anim.duration 2.0; [layer addAnimation:anim forKey:fade]; // 动画进行中 layer.opacity // 还是 1.0模型层没变 layer.presentationLayer.opacity // 0.5 左右表现层在变 // 动画结束后 layer.opacity // 还是 1.0跳回原值动画结束后layer 立即「跳回」到模型层的值。这就是为什么你的封面停止旋转时立即回到未旋转状态模型层transform从没变过如果你想让 layer停留在终点必须同时修改模型层objc// 动画结束后停留在终点 anim.fromValue 1.0; anim.toValue 0.0; anim.removedOnCompletion NO; // 动画结束后不移除 anim.fillMode kCAFillModeForwards; // 保持终点状态 [layer addAnimation:anim forKey:fade]; // 但这只改了表现层模型层还是 1.0 // 正确做法动画结束后手动改模型层 layer.opacity 0.0;对你的封面旋转因为动画是无限循环停止时回到原位正是想要的效果所以不需要处理模型层。这是简化不是 bug。六、完整示例四种常见动画1. 淡出objcCABasicAnimation *fade [CABasicAnimation animationWithKeyPath:opacity]; fade.fromValue 1.0; fade.toValue 0.0; fade.duration 0.3; fade.timingFunction [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; [layer addAnimation:fade forKey:fadeOut]; layer.opacity 0.0; // 同时改模型层动画结束后保持2. 缩放objcCABasicAnimation *scale [CABasicAnimation animationWithKeyPath:transform.scale]; scale.fromValue 1.0; scale.toValue 1.5; scale.duration 0.2; scale.autoreverses YES; // 放大后自动缩回 [layer addAnimation:scale forKey:pulse];3. 旋转你的封面objcCABasicAnimation *rotation [CABasicAnimation animationWithKeyPath:transform.rotation.z]; rotation.fromValue 0; rotation.toValue (M_PI * 2); rotation.duration 20.0; rotation.repeatCount HUGE_VALF; rotation.timingFunction [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; // 匀速 [layer addAnimation:rotation forKey:coverRotation];注意你的原代码没设 timingFunction默认是kCAMediaTimingFunctionDefault缓入缓出这意味着每圈开头和结尾会减速再加速转起来不是匀速的视觉上会「一顿一顿」。如果你想要匀速旋转应该显式设kCAMediaTimingFunctionLinear。这是个可以优化的小点。4. 沿 X 轴平移objcCABasicAnimation *move [CABasicAnimation animationWithKeyPath:position.x]; move.fromValue (layer.position.x); move.toValue (layer.position.x 100); move.duration 0.5; [layer addAnimation:move forKey:moveRight];七、CABasicAnimation 的局限CABasicAnimation只能做两个值之间的直线插值。以下场景它做不了需求用什么沿曲线/路径移动CAKeyframeAnimation配path多个关键点的复杂动画CAKeyframeAnimation多个动画同时/顺序播放CAAnimationGroup视图控制器转场CATransition或自定义转场物理效果弹簧、重力UIAttachmentBehavior等 UIKit Dynamics交互式动画可中断、可反向UIViewPropertyAnimatoriOS 10CAKeyframeAnimation示例沿路径移动objcCAKeyframeAnimation *anim [CAKeyframeAnimation animationWithKeyPath:position]; UIBezierPath *path [UIBezierPath bezierPathWithArcCenter:...]; anim.path path.CGPath; anim.duration 2.0; [layer addAnimation:anim forKey:moveAlongPath];八、性能与注意事项1. 尽量用transform别用frame/boundstransform动画由 GPU 处理性能好改frame/bounds会触发重新布局性能差。2. 动画的 key 要唯一且语义化用static NSString * const kCoverRotationKey coverRotation;而不是裸字符串避免冲突和手误。3. 移除动画后模型层不变如果动画是「一次性」的比如淡出记得同时改模型层否则移除动画后会跳回。4. 视图销毁时动画自动停止动画加在 layer 上view 被释放时 layer 也释放动画自然停止。但如果 view 还在但不再需要动画要手动removeAnimationForKey:。5.removedOnCompletion默认是 YES动画播完自动移除。如果设成 NO动画会一直留在 layer 上但不再播放配合fillMode kCAFillModeForwards可以「保持终点状态」。6. 不要在layoutSubviews里加动画layoutSubviews会多次调用每次都加动画会叠加。应该在其他时机加或者在layoutSubviews里用 key 检查避免重复。
