我正在参加「掘金·启航计划」
前言
Core Animation 是苹果提供的一套动画框架,用于在 iOS 和 macOS 应用程序中创建动画效果。它基于图层(CALayer)的概念,可以对图层进行各种动画和转换操作,从而实现视图的平移、缩放、旋转、淡入淡出等效果。
简单聊一聊 Core Animation 的一些关键概念和特性:
图层(CALayer)
Core Animation 的核心是图层,它是一个可视化容器,可以用于呈现视觉内容。每个视图(UIView)都有一个关联的图层,可以通过视图的 layer 属性来访问。
创建了一个 CALayer 对象,并将其添加到视图的图层上。可以设置图层的大小、位置、背景色等属性。
let layer = CALayer()
layer.frame = CGRect(x: 100, y: 200, width: 100, height: 100)
layer.backgroundColor = UIColor.red.cgColor
view.layer.addSublayer(layer)
动画(CAAnimation)
Core Animation 提供了多种类型的动画,包括基础动画(CABasicAnimation)、关键帧动画(CAKeyframeAnimation)和过渡动画(CATransition)等。你可以设置动画的属性、持续时间、缓冲函数等,然后将动画添加到图层上,Core Animation 会自动处理动画的计算和渲染。
使用事务(CATransaction)包裹图层属性的修改,使图层的位置从当前位置移动到指定位置。通过设置动画的持续时间来控制动画的时长。
CATransaction.begin()
CATransaction.setAnimationDuration(1.0)
layer.position = CGPoint(x: 200, y: 200)
CATransaction.commit()
缓冲函数(CAMediaTimingFunction)
缓冲函数用于定义动画的时间变化曲线。Core Animation 提供了一些预定义的缓冲函数,如线性(linear)、加速(easeIn)、减速(easeOut)等,也可以通过自定义缓冲函数来实现更复杂的动画效果
创建了一个基础动画,使图层的 x 轴位置从 0.0 移动到 200.0,并使用了缓冲函数(ease-in-ease-out)来定义动画的时间变化曲线。
let animation = CABasicAnimation(keyPath: "position.x")
animation.fromValue = 0.0
animation.toValue = 200.0
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
layer.add(animation, forKey: "positionAnimation")
图层变换
Core Animation 提供了图层的转换和变换操作,可以对图层进行平移、旋转、缩放等变换操作,以及应用透视效果等。这些操作可以通过设置图层的属性来实现,也可以使用动画来实现平滑过渡的效果
将图层按照 z 轴旋转 π/4 弧度,实现了一个旋转效果。可以使用 CATransform3DMakeRotation 函数来创建图层的变换矩阵。
layer.transform = CATransform3DMakeRotation(CGFloat.pi / 4, 0, 0, 1)
图层蒙版
通过使用图层的蒙版属性(mask)或遮罩属性(contentsMask),可以实现图层内容的裁剪或遮罩效果。蒙版和遮罩可以是一个图片、一个形状或其他图层,可以创建出各种有趣的视觉效果。
创建了一个 UIImageView,并将一张图片设置为其内容。然后,我们创建了一个 CALayer 作为蒙版层,并将其设置为 UIImageView 的 mask 属性。通过设置 mask 属性,蒙版层会裁剪 UIImageView 的内容,从而实现蒙版效果。
let imageView = UIImageView(frame: CGRect(x: 100, y: 200, width: 100, height: 100))
imageView.image = UIImage(named: "风景.jpg")
view.addSubview(imageView)
let maskLayer = CALayer()
maskLayer.frame = imageView.bounds
maskLayer.contents = UIImage(named: "sicon2x")?.cgImage
imageView.layer.mask = maskLayer
结尾
上面只是Core Animation 的很小一部分特性,实际可以根据需求进行进一步探索和使用。