swift-motion

实现swift动画的轨迹绘制

import UIKit
 
class ViewController: UIViewController {
    //动画播放时间
    var duration:CFTimeInterval = 3
     
    //运动的方块
    var square:UIView!
     
    //绘制路线的图层
    var pathLayer:CAShapeLayer!

    override func viewDidLoad() {
        super.viewDidLoad()
         
        //初始化方块
        square = UIView(frame:CGRect(x:0, y:0, width:20, height:20))
        square.backgroundColor = UIColor.orange

        let centerX = view.bounds.size.width/2
        let transform = CGAffineTransform(translationX: centerX, y: 50)

        let path =  CGMutablePath()
        path.move(to: CGPoint(x:0 ,y:0), transform: transform)
        path.addLine(to: CGPoint(x:0 ,y:75), transform: transform)
        path.addLine(to: CGPoint(x:75 ,y:75), transform: transform)
        path.addArc(center: CGPoint(x:0 ,y:75), radius: 75, startAngle: 0,
                    endAngle: CGFloat(1.5 * .pi), clockwise: false, transform: transform)

        //给方块添加移动动画
        let orbit = CAKeyframeAnimation(keyPath:"position")
        orbit.duration = duration
        orbit.path = path
        orbit.calculationMode = kCAAnimationPaced
        orbit.isRemovedOnCompletion = false
        orbit.fillMode = kCAFillModeForwards
        square.layer.add(orbit,forKey:"Move")

        //绘制运动轨迹
        pathLayer = CAShapeLayer()
        pathLayer.frame = self.view.bounds
        pathLayer.path = path
        pathLayer.fillColor = nil
        pathLayer.lineWidth = 1
        pathLayer.strokeColor = UIColor.black.cgColor

        //给运动轨迹添加动画
        let pathAnimation = CABasicAnimation.init(keyPath: "strokeEnd")
        pathAnimation.duration = duration
        pathAnimation.fromValue = 0
        pathAnimation.toValue = 1
        pathLayer.add(pathAnimation , forKey: "strokeEnd")

        //将轨道添加到视图层中
        self.view.layer.addSublayer(pathLayer)
        //将方块添加到视图中
        self.view.addSubview(square)
    }    
}

注意到move和addLine都是以transform为基础

赏

谢谢你请我吃糖果