美文网首页
View动画ii(沿椭圆轨迹运动)

View动画ii(沿椭圆轨迹运动)

作者: Dove_Q | 来源:发表于2016-08-24 17:06 被阅读43次
class ViewController: UIViewController {
    //CoreAnimation
    var shapeLayer: CAShapeLayer! //CATextLayer
    var redLayer: CALayer!
    var greenView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        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: 50, height: 50)
        redLayer.backgroundColor = UIColor.redColor().CGColor
        self.view.layer.addSublayer(redLayer)
        
        greenView = UIView(frame: redLayer.frame)
        greenView.backgroundColor = UIColor.greenColor()
//        self.view.addSubview(greenView)
    }

    @IBAction func didStartClicked(sender: UIButton) {
//        //A. 开始设置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
        
        //B. 属性动画
        //不会影响实际属性值
//        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")
        //C. 关键帧的位置(关键点)
//        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]
        
        //D. 创建坐标点
        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
    }

相关文章

网友评论

      本文标题:View动画ii(沿椭圆轨迹运动)

      本文链接:https://www.haomeiwen.com/subject/rtdosttx.html