Swift4.0 CoreAnimation核心动画

作者: KobeBrant | 来源:发表于2019-06-18 20:09 被阅读0次

1、锚点的概念 x轴与y轴的取值在0~1之间

Layer层的position参照点始终参与锚点重合
锚点决定视图进行动画时的参照点

2、几种常用的CALayer子类

CAEmitterLayer类
CAEmitterLayer是一个粒子发射器系统，负责粒子的创建和发射源属性的配置。它可以创建出炫酷的粒子效果动画
CAGradientLayer类
可以创建色彩渐变的图层效果

import UIKit
import ImageIO
class FourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        //创建图层对象
        let gradientLayer = CAGradientLayer()
        //设置图层尺寸与位置
        gradientLayer.bounds = CGRect(x: 0, y: 100, width: 100, height: 100)
        gradientLayer.position = CGPoint(x: 100, y: 100)
        //设置要进行色彩渐变的颜色
        gradientLayer.colors = [UIColor.red.cgColor,UIColor.green.cgColor,UIColor.blue.cgColor]
        //设置要进行渐变的临界位置 当红色渲染到1/5后开始向绿色进行渐变，绿色渲染到1/2后开始向蓝色进行渐变，当到达7/10距离后完成渐变过程，开始渲染为纯蓝色
        gradientLayer.locations = [NSNumber(value: 0.2),NSNumber(value: 0.5),NSNumber(value: 0.7)]
        //设置渐变的起始点与结束点 (0,0)左上角 (1,1)右下角
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        //添加视图
        self.view.layer.addSublayer(gradientLayer)
    }
}

结果：

Simulator Screen Shot - iPhone X - 2019-06-18 at 17.16.30.png

CAEAGLLayer类
可以通过OpenGL ES来进行界面的绘制
CAReplicatorLayer类
CAReplicatorLayer是一个图层容器，会对其中的子图层进行复制和属性偏移。可以用来创建类型倒影效果，也可以进行图层的变换复制

import UIKit
import ImageIO
class FourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        //创建拷贝图层
        let replicatorLayer = CAReplicatorLayer()
        replicatorLayer.position = CGPoint.zero
        //创建内容图层
        let subLayer = CALayer()
        subLayer.bounds = CGRect(x: 0, y: 0, width: 20, height: 20)
        subLayer.position = CGPoint(x: 30, y: 100)
        subLayer.backgroundColor = UIColor.red.cgColor
        replicatorLayer.addSublayer(subLayer)
        //设置每次拷贝将副本沿x轴平移30个单位
        replicatorLayer.instanceTransform = CATransform3DMakeTranslation(30, 0, 0)
        //设置拷贝副本的个数
        replicatorLayer.instanceCount = 10
        //添加视图
        self.view.layer.addSublayer(replicatorLayer)
    }
}
结果：
![Simulator Screen Shot - iPhone X - 2019-06-18 at 17.31.55.png](https://img.haomeiwen.com/i4057501/4b4cf8d2fdf01b01.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

CAScrollLayer类
可以让其管理的多个子层进行滑动，但是只能通过代码进行管理，不能进行用户点按触发
CAShapeLayer类
可以在图层上直接绘制出自定义的形状

import UIKit
import ImageIO
class FourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        //c创建图层
        let shapeLayer = CAShapeLayer()
        shapeLayer.position = CGPoint.zero
        //创建图形路径
        let path = CGMutablePath()
        //设置路径起点
        path.move(to: CGPoint(x: 100, y: 100))
        //进行画线
        path.addLine(to: CGPoint(x: 300, y: 100))
        path.addLine(to: CGPoint(x: 200, y: 200))
        path.addLine(to: CGPoint(x: 100, y: 100))
        //设置图层路径
        shapeLayer.path = path
        //设置图形边缘线条起点
        shapeLayer.strokeStart = 0
        //设置图形边缘线条终点
        shapeLayer.strokeEnd = 1
        //设置填充规则
        shapeLayer.fillRule = CAShapeLayerFillRule.evenOdd
        //设置填充颜色
        shapeLayer.fillColor = UIColor.red.cgColor
        //设置边缘线条颜色
        shapeLayer.strokeColor = UIColor.blue.cgColor
        //设置边缘线条宽度
        shapeLayer.lineWidth = 1
        self.view.layer.addSublayer(shapeLayer)
    }
}

Simulator Screen Shot - iPhone X - 2019-06-18 at 18.54.35.png

CATextLayer类
用于进行文字的绘制
CATiledLayer类
瓦片视图，可以分区域绘制，常用于在一张大的图片中分区域绘制
CATransformLayer类
用于构建一些图层变化效果，包括3D效果的图层变换

3、CoreAnimation框架中的属性动画

CAAnimation类是CoreAnimation子类，主要分为：CAPropertyAnimation(CABasicAnimation属性过渡动画、CAKeyframeAnimation关键帧属性过渡动画)、CATransition、CAAnimationGroup

CABasicAnimation属性过渡动画

import UIKit
import ImageIO
class FourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.orange
        //创建f动画实例，keyPath为要进行属性动画的属性路径 transform.rotation.z表示图形属性中以z轴为中心轴的旋转属性
        let basicAni = CABasicAnimation(keyPath: "transform.rotation.z")
        //从0度开始旋转
        basicAni.fromValue = NSNumber(value: 0)
        //旋转到180度
        basicAni.toValue = NSNumber(value: Double.pi)
        //设置动画播放的时长
        basicAni.duration = 2
        //将动画作用于当前界面的视图Layer层上
        self.view.layer.add(basicAni, forKey: nil)
    }
}

CAKeyframeAnimation关键帧动画

import UIKit
import ImageIO
class FourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.orange
        //创建f动画实例，keyPath为要进行属性动画的属性路径 transform.rotation.z表示图形属性中以z轴为中心轴的旋转属性
        let keyframeAni = CAKeyframeAnimation(keyPath: "transform.rotation.z")
        //从0度开始旋转
        keyframeAni.values = [NSNumber(value: 0),NSNumber(value: Double.pi/4),NSNumber(value: 0),NSNumber(value: Double.pi)]
        //设置动画播放的时长
        keyframeAni.duration = 3
        //将动画作用于当前界面的视图Layer层上
        self.view.layer.add(keyframeAni, forKey: "")
    }
}

CASpringAnimation类似弹簧的阻尼动画

import UIKit
import ImageIO
class FourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.orange
        //
        let springAni = CASpringAnimation(keyPath: "position.y")
        //模拟重物质量，必须大于0，默认为1，会影响惯性
        springAni.mass = 2
        //模拟弹簧劲度系数，必须大于0，这个值越大，则回弹越快
        springAni.stiffness = 5
        //设置阻尼系数，必须大于0，这个值越大，回弹的幅度越小
        springAni.damping = 2
        springAni.toValue = 300
        springAni.duration = 3
        //创建演示动画的Layer
        let layer = CALayer()
        layer.position = CGPoint(x: 100, y: 100)
        layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
        layer.backgroundColor = UIColor.red.cgColor
        self.view.layer.addSublayer(layer)
        layer.add(springAni, forKey: "")
    }
}

CATransition实现转场动画

import UIKit
import ImageIO
class FourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.orange
    }
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        //创建转场动画实例
        let transAni = CATransition()
        //设置转场动画类型
        transAni.type = CATransitionType.reveal
        //设置转场动画方向
        transAni.subtype = CATransitionSubtype.fromTop
        let layer = CALayer()
        layer.position = CGPoint(x: 100, y: 100)
        layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
        layer.backgroundColor = UIColor.red.cgColor
        layer.add(transAni, forKey: "")
        self.view.layer.addSublayer(layer)
    }
}

type转场动画属性

        //渐入效果
        transAni.type = CATransitionType.fade
        //移入效果
        transAni.type = CATransitionType.moveIn
        //压入效果
        transAni.type = CATransitionType.push
        //溶解效果
        transAni.type = CATransitionType.reveal

subtype属性

        //从右侧执行
        transAni.subtype = CATransitionSubtype.fromRight
        //从左侧执行
        transAni.subtype = CATransitionSubtype.fromLeft
        //从上侧执行
        transAni.subtype = CATransitionSubtype.fromTop
        //从下侧执行
        transAni.subtype = CATransitionSubtype.fromBottom

CAAnimationGroup组合动画

import UIKit
import ImageIO
class FourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.orange
    }
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        //创建背景色过渡动画
        let basicAni = CABasicAnimation(keyPath: "backgroundColor")
        basicAni.toValue = UIColor.green.cgColor
        //创建形变动画
        let basicAni2 = CABasicAnimation(keyPath: "transform.scale.x")
        basicAni2.toValue = NSNumber(value: 2)
        //i进行动画组合
        let groupAni = CAAnimationGroup()
        groupAni.animations = [basicAni,basicAni2]
        groupAni.duration = 3
        
        let layer = CALayer()
        layer.position = CGPoint(x: 100, y: 100)
        layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
        layer.backgroundColor = UIColor.red.cgColor
        layer.add(groupAni, forKey: "")
        self.view.layer.addSublayer(layer)
    }
}

Swift4.0 CoreAnimation核心动画

1、锚点的概念 x轴与y轴的取值在0~1之间

2、几种常用的CALayer子类

3、CoreAnimation框架中的属性动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读