• Core Animation 动画


    Core Animation框架

    Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果。Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑,不会加重CPU的负担而影响程序的运行速度。

    Core Animation 结构:

     

    类作用:

    CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间、速度的控制,本身实现了CAMediaTiming协议。 

    CAPropertyAnimation:属性动画的基类(通过属性进行动画设置,注意是可动画属性),不能直接使用。

    CAAnimationGroup:动画组,动画组是一种组合模式设计,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行。

    CATransition:转场动画,主要通过滤镜进行动画效果设置。

    CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态。可以设定keyPath的起点,终点的值 延定点轨迹变化

    CAKeyframeAnimation:关键帧动画,同样是通过属性进行动画参数控制,但是同基础动画不同的是它可以有多个状态控制。可以设定keyPath起点、中间关键点(不止一个)、终点的值,每一帧所对应的时间,动画会沿着设定点进行移动。

    keyPath :指定动画属性

    duration : 动画的持续时间
    beginTime : 动画的开始时间
    repeatCount : 动画的重复次数
    autoreverses : 执行的动画按照原动画返回执行
    timingFunction (控制动画的显示节奏):
      kCAMediaTimingFunctionLinear 线性动画
      kCAMediaTimingFunctionEaseIn 先慢后快
      kCAMediaTimingFunctionEaseOut 先快后慢
      kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
      kCAMediaTimingFunctionDefault 默认,也属于中间比较快
    fillMode(决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后):

      kCAFillModeRemoved 默认值,当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态

      kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态

      kCAFillModeBackwards 当在动画开始前,你只要把layer加入到一个动画中,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,延迟3秒让动画开始,只要动画被加入了layer,layer便处于动画初始状态
    beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间

    delegate : 动画代理。能够检测动画的执行和结束。

    keyPath:属性值其实就是CALayer 的属性

    transform.scale = 比例转换

    transform.rotation = 旋转

    opacity = 透明度

    margin = 边距

    position = 位移

    backgroundColor = 背景颜色

    cornerRadius = 圆角

    borderWidth = 边框宽度

    bounds = 位置,体积

    contents = 内容

    contentsRect = 面积


    frame = 位置,体积

    hidden = 是否隐藏

    mask = 任务

    masksToBounds

    shadowColor = 阴影颜色

    shadowOffset = 阴影偏移

    shadowOpacity = 阴影透明

    shadowRadius = 阴影半径

    如:基础动画

      let baseAnimation = CABasicAnimation()
            baseAnimation.keyPath = "transform.rotation.z"
            baseAnimation.toValue = M_PI
            baseAnimation.isCumulative = true
            baseAnimation.duration = 3.0
            
            baseAnimation.repeatCount = MAXFLOAT;
            imgView.layer.add(baseAnimation, forKey: "transform")

     关键帧动画:

      

    let coreKeyAnimation = CAKeyframeAnimation(keyPath: "transform.rotation.z")
            coreKeyAnimation.values = [0.2,-0.2]
            //coreKeyAnimation.keyTimes = [0.5, 0.5]
            coreKeyAnimation.duration = 0.25
            coreKeyAnimation.repeatCount = 2
            
            imgView.layer.add(coreKeyAnimation, forKey: "transform")

    组动画:

            let scaleBaseAnimation = CABasicAnimation()
            scaleBaseAnimation.keyPath = "transform.scale"
            scaleBaseAnimation.fromValue = 0
            scaleBaseAnimation.toValue = 1
            
            
            let baseAnimation = CABasicAnimation()
            baseAnimation.keyPath = "transform.rotation.z"
            baseAnimation.toValue = M_PI
            baseAnimation.isCumulative = true
            baseAnimation.duration = 3.0
            baseAnimation.repeatCount = MAXFLOAT;
            
            let keyAnimation = CAKeyframeAnimation(keyPath: "position")
    
             keyAnimation.values = [NSValue(cgPoint: CGPoint(x: 290, y: 16)),
                                    NSValue(cgPoint: CGPoint(x: 290, y: 200)),
                                    NSValue(cgPoint: CGPoint(x: 160, y: 150)),
                                    NSValue(cgPoint: CGPoint(x: 150, y: 150))]
            let groupAnimation = CAAnimationGroup()
            groupAnimation.animations = [scaleBaseAnimation,baseAnimation,keyAnimation]
            groupAnimation.duration = 15
            imgView.layer.add(groupAnimation, forKey: "transform")

    过渡动画:

      

    let transitioningLayer = CATextLayer()
        override func viewDidLoad() {
            super.viewDidLoad()
            
            
            // Do any additional setup after loading the view.
            let backBtn = UIButton().then_Any { (sender) in
                sender.frame = CGRect(x: 20, y: 20,  100, height: 100)
                sender.setTitle("返回", for: .normal)
                sender.addTarget(self, action: #selector(toParentView(_:)), for: .touchUpInside)
            }
            
           
            transitioningLayer.frame = CGRect(x: 60, y: 200,
                                               320, height: 160)
            
            view.layer.addSublayer(transitioningLayer)
    
            transitioningLayer.backgroundColor = UIColor.red.cgColor
            transitioningLayer.string = "Red"
            
            
            let beginBtn = UIButton().then_Any { (sender) in
                sender.frame = CGRect(x: 260, y: 16,  100, height: 100)
                
                sender.setTitle("过渡", for: .normal)
                sender.addTarget(self, action: #selector(runTransition), for: .touchUpInside)
            }
            self.view.addSubview(beginBtn)
            self.view.addSubview(backBtn)
        }
        func runTransition() {
            let transition = CATransition()
            transition.duration = 2
            
            transition.type = kCATransitionPush
            
            transitioningLayer.add(transition,
                                   forKey: "transition")
            
            // Transition to "blue" state
            transitioningLayer.backgroundColor = UIColor.blue.cgColor
            transitioningLayer.string = "Blue"
        }
     

     

  • 相关阅读:
    PageAdmin Cms系统如何修改点击数(浏览数)
    最简js深浅拷贝说明
    实用的前端网址
    js的一些编码问题
    自己写一个文字过长显示省略号的函数
    垂直居中 和 水平居中
    js原码工具集
    url 、src 、href 的区别
    transform对定位元素的影响
    css实现一色多变化
  • 原文地址:https://www.cnblogs.com/air-liyan/p/6544445.html
Copyright © 2020-2023  润新知