iOS 动画七：Layer Animations

最新推荐文章于 2025-09-10 22:07:12 发布

weixin_33845881

最新推荐文章于 2025-09-10 22:07:12 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签：人工智能

原文链接：https://juejin.im/post/5c3d8066e51d45522c3018bb

本文深入探讨了使用CALayer进行动画处理的优势，详细介绍了通过修改bounds、position、transform等属性实现的动画效果，包括边框、阴影及内容动画，并提供了丰富的示例代码。

layers 比 views 有更多的 animatable properties，layers 动画更灵活。

对 layers 的 position, size, or transform 进行动画处理同样会影响该层中的子视图，就像您直接对视图本身进行动画一样。

bounds: 修改它使层的边框具有动画效果。
position: 修改它使层在其父层中的位置具有动画效果。如果你只想一个轴进行动画，你可以分别设置 position.x or position.y。
transform: 修改它使层 move, scale, and rotate 。你甚至可以在三维空间中对层进行动画处理，这是单凭视图是无法做到的。

我们可以很容易地动画 layer 的边界，以改变它的颜色，宽度和角的半径:

• borderColor: 修改它改变 border 颜色。 • borderWidth: 修改它以伸缩 border width。 • cornerRadius: 修改它改变 laye 的角半径。

Shadow

• shadowOffset: 修改它，使 shadow 接近或者远离 layer。 • shadowOpacity: : 修改它，使 shadow 淡入淡出。 • shadowPath: 修改它以改变 layer 的 shadow，我们可以创建 3D 特效让图层看起来像漂浮在不同的阴影形状和位置上。 • shadowRadius: 修改这个以控制阴影的模糊。

Contents

• contents: 修改它，将原始 TIFF 或 PNG 数据分配为层内容。 • mask: 修改它，建立形状或图像以用于屏蔽层的可见内容。 • opacity: 修改它改变图层内容的透明度。

以上所列只是我们可以动画的部分属性列表; CALayer的子类还有很多其它属性可以进行动画处理。

demo 实例

view 方式动画

UIView.animate(withDuration: 0.5) { 
   self.heading.center.x += self.view.bounds.width
}
复制代码

可以 layer 方式实现

let flyRight = CABasicAnimation(keyPath: "position.x") 
flyRight.fromValue = -view.bounds.size.width/2 
flyRight.toValue = view.bounds.size.width/2
flyRight.duration = 0.5
heading.layer.add(flyRight, forKey: nil)
复制代码

add(_:forKey:) 拷贝一个动画对象，并告诉 Core animation 在图层上运行它。参数 key 允许您稍后识别动画。

More elaborate layer animations

    let flyRight = CABasicAnimation(keyPath: "position.x")
    flyRight.fromValue = -view.bounds.size.width/2
    flyRight.toValue = view.bounds.size.width/2
    flyRight.duration = 0.5
    flyRight.fillMode = kCAFillModeBoth
    flyRight.isRemovedOnCompletion = false
    heading.layer.add(flyRight, forKey: nil)
复制代码

fillMode 的作用是决定当前对象过了非 active 时间段的行为. 比如动画开始之前,动画结束之后。

kCAFillModeRemoved 这个是默认值,动画开始前和动画结束后 , 动画对 layer 都没有影响,动画结束后 , layer 会恢复到之前的状态。
kCAFillModeForwards 当动画结束后, layer 会一直保持着动画最后的状态。

kCAFillModeBackwards 这个和 kCAFillModeForwards 是相对的,就是在动画开始前,你只要将动画加入了一个 layer , layer 便立即进入动画的初始状态并等待动画开始。

kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态。该属性使动画的第一帧（ﬁrst frame）立即显示在屏幕上，并使动画的最后一帧（the ﬁnal frame）在动画结束后也显示在屏幕上。

转载于:https://juejin.im/post/5c3d8066e51d45522c3018bb