8.24 Animation2 简单动画2

import UIKit

class ViewController: UIViewController {
    //CoreAnimation
    var shapeLayer: CAShapeLayer! //CATextLayer
    var redLayer: CALayer!
    var greenView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //可以显示图片
        let imageLayer = CALayer()
        imageLayer.frame = CGRect(x: 200, y: 350, width: 200, height: 200)
        imageLayer.contents = UIImage(named: "showcode.jpeg")?.CGImage
        self.view.layer.addSublayer(imageLayer)
        
        //可以显示文字
        let textLayer = CATextLayer()
        textLayer.string = "这里是CATextLayer"
        textLayer.foregroundColor = UIColor.redColor().CGColor
        textLayer.frame = CGRect(x: 0, y: 200, width: 300, height: 50)
        self.view.layer.addSublayer(textLayer)
        
        //可以绘制图形
        shapeLayer = CAShapeLayer()
        shapeLayer.frame = self.view.bounds
        shapeLayer.strokeColor = UIColor.blackColor().CGColor
        shapeLayer.fillColor = UIColor.clearColor().CGColor
        self.view.layer.addSublayer(shapeLayer)
        
        redLayer = CALayer()
        redLayer.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
        redLayer.backgroundColor = UIColor.blueColor().CGColor
        redLayer.cornerRadius = 5
        self.view.layer.addSublayer(redLayer)
        
        greenView = UIView(frame: redLayer.frame)
        greenView.backgroundColor = UIColor.greenColor()
//        self.view.addSubview(greenView)
    }

    @IBAction func didStartClicked(sender: UIButton) {
//        //开始设置CALayer动画的属性
//        CATransaction.begin()
//        CATransaction.setAnimationDuration(5)
//        CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn))
//        
//        //1. CALayer属性改变时，默认会有动画
//        redLayer.frame = CGRect(x: 200, y: 200, width: 50, height: 50)
//        redLayer.cornerRadius = 25
//        redLayer.borderWidth = 10
//        
//        CATransaction.commit()
//        
//        
//        greenView.frame = redLayer.frame
        
        //属性动画
        //不会影响实际属性值
//        let ani01 = CABasicAnimation(keyPath: "backgroundColor")
//        ani01.duration = 5
////        ani01.fromValue = NSValue(CGPoint: CGPoint(x: 200, y: 0))
////        ani01.toValue = NSValue(CGPoint: CGPoint(x: 200, y: 200))
////        ani01.byValue = NSValue(CGPoint: CGPoint(x: 200, y: 100))
//        ani01.toValue = UIColor.purpleColor().CGColor
//        redLayer.addAnimation(ani01, forKey: "ani01")
        
        let ani02 = CAKeyframeAnimation(keyPath: "position")
        //关键帧的位置（关键点）
//        ani02.values = [
//            NSValue(CGPoint: CGPoint(x: 0, y: 0)),
//            NSValue(CGPoint: CGPoint(x: 200, y: 0)),
//            NSValue(CGPoint: CGPoint(x: 200, y: 200)),
//            NSValue(CGPoint: CGPoint(x: 0, y: 200))
//        ]
//        //到达关键帧（关键点的时刻，0-1）
//        ani02.keyTimes = [0, 0.8, 0.9, 1]
        
        //创建坐标点
        let path = CGPathCreateMutable()
        //添加一个椭圆的轨迹
        CGPathAddEllipseInRect(path, nil, CGRect(x: 0, y: 0, width: 200, height: 200))
        ani02.path = path
        
        ani02.duration = 10
        redLayer.addAnimation(ani02, forKey: "ani02")
        
        shapeLayer.path = path
        
        //CAAnimationGroup
    }
}

编译运行，可以看到左上角蓝色的小点，随轨迹移动

Paste_Image.png Paste_Image.png