天天看点

iOS 动画Animation-2-2: 动画基础:核心动画

首先说明:这是一系列文章,参考本专题下其他的文章有助于你对本文的理解。

上一篇已经简单的介绍过核心动画了,这次就针对实力详细介绍一下Animation 核心动画。

Demo在Github地址,可以下载下来跟着敲一下

CALayer动画

  • 前面也说了,核心动画是作用在layer层的动画。所以也先简单的介入一下CALayer动画,CALayer动画主要有两个属性anchorPoint和position。

    1.锚点 anchorPoint 锚点决定layer层上的那个点是position点 锚点默认是(0.5,0.5)跟视图的中心点重合

    2.基准点 position 决定当前视图的layer在父视图上得位置,他以父视图的坐标系为准,

    3.视图创建出来的时候锚点,中心点,基准点是重合的,

func layerAnimation(){
        animationView.layer.anchorPoint = CGPointMake(, )
        animationView.transform = CGAffineTransformRotate(self.animationView.transform, CGFloat(M_PI_4))
        animationView.layer.position = CGPointMake(, )
    }
           

这样做就会使animationView围绕着设定的那个点旋转。

CABasicAnimation 基础动画

CA动画是根据KVC的原理去修改layer层的属性,以达到做动画的效果

keypath一般为”position”和”transform”,以及他们等点出来的属性

func basicAnimation(){

        let basic = CABasicAnimation(keyPath: "position.x")
        basic.duration = 
        basic.repeatCount = 
        basic.fromValue = -
        basic.toValue = 
        animationView.layer.addAnimation(basic, forKey: nil)
   }
           

关键帧动画

func keyFrameAnimation(){
        /*
        let keyFrame = CAKeyframeAnimation(keyPath: "position.x")
        keyFrame.duration = 
        keyFrame.repeatCount = 
        let center = animationView.center
        keyFrame.values = [center.x - , center.x, center.x + ]
        animationView.layer.addAnimation(keyFrame, forKey: nil)
        */
        /*
        let keyFrame = CAKeyframeAnimation(keyPath: "position")
        keyFrame.duration = 
        keyFrame.repeatCount = 
        //节点位置
        let point1 = animationView.center
        let point2 = CGPoint(x: , y: )
        let point3 = CGPoint(x: , y: point1.y)
        let point4 = CGPoint(x: , y: point1.y)
        let value1 = NSValue(CGPoint: point1)
        let value2 = NSValue(CGPoint: point2)
        let value3 = NSValue(CGPoint: point3)
        let value4 = NSValue(CGPoint: point4)
        //将节点位置加入到values中
        keyFrame.values = [value1, value4, value2, value3, value1]
        self.animationView.layer.addAnimation(keyFrame, forKey: nil)
        */

        let keyFrame = CAKeyframeAnimation(keyPath: "transform.rotation")
        keyFrame.duration = 
        keyFrame.values = [-/*M_PI, /*M_PI, -/*M_PI]
        keyFrame.repeatCount = 
        animationView.layer.addAnimation(keyFrame, forKey:
 nil)

    }
           

CALayer过度动画

let transiton = CATransition()
        transiton.duration = 
        transiton.repeatCount = 
        transiton.type = "rippleEffect"
        self.view.layer.addAnimation(transiton, forKey: nil)
}
           

其他常见的API

/*

* 各种动画效果 其中除了’fade’,

moveIn',

push’ , `reveal’ ,其他属于私有的API(我是这么认为的,可以点进去看下注释).

*  ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用.

    *  @"cube"                     立方体翻滚效果

    *  @"moveIn"                   新视图移到旧视图上面

    *  @"reveal"                   显露效果(将旧视图移开,显示下面的新视图)

    *  @"fade"                     交叉淡化过渡(不支持过渡方向)             (默认为此效果)

    *  @"pageCurl"                 向上翻一页

    *  @"pageUnCurl"               向下翻一页

    *  @"suckEffect"               收缩效果,类似系统最小化窗口时的神奇效果(不支持过渡方向)

    *  @"rippleEffect"             滴水效果,(不支持过渡方向)

    *  @"oglFlip"                  上下左右翻转效果

    *  @"rotate"                   旋转效果

    *  @"push"

    *  @"cameraIrisHollowOpen"     相机镜头打开效果(不支持过渡方向)

    *  @"cameraIrisHollowClose"    相机镜头关上效果(不支持过渡方向)

    */
           

CAAnimationGroup分组动画

func animationGroup(){
        //创建第一个关键帧动画,给热气球提供一个运动轨迹,
        let keyFramePath = CAKeyframeAnimation(keyPath: "position")
        //贝赛尔曲线
        //1.指定贝塞尔曲线的半径
        //CGFloat radius = kScreenHeight;
        //01.圆心
        //02.半径
        //03.开始角度
        //04.结束角度
        //05.旋转方向,YES是顺时针,NO是逆时针
        let path = UIBezierPath(arcCenter: CGPoint(x: -, y: ), radius: , startAngle: CGFloat(-M_PI_2), endAngle: CGFloat(M_PI_2), clockwise: true)
        keyFramePath.path = path.CGPath
        //2设置动画执行完毕后,不删除动画
        keyFramePath.removedOnCompletion = false
        //3设置保存动画的最新状态
        keyFramePath.fillMode = kCAFillModeForwards
        //4.代理,有一个start和一个stop方法
        keyFramePath.delegate = self

        //4设置动画的节奏
        keyFramePath.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        //创建第二个关键帧动画,让热气球运动的时候由小-->大-->小
        let keyFrameScale = CAKeyframeAnimation(keyPath: "transform.scale")
        keyFrameScale.values = [,,,,,,,,]
        let group = CAAnimationGroup()
        group.duration = 
        group.repeatCount = 
        //将两个动画效果添加到分组动画中
        group.animations = [keyFramePath, keyFrameScale]
        balloon.layer.addAnimation(group, forKey: nil)

    }
           

当然,这些并不全面,这里只起到一个抛砖引玉的作用。