iphone - 如何在 iOS 中沿曲线路径移动视图

Question

如何动画/移动曲线路径中的视图，是否可以使用 UIAnimation.

就像在图像中移动路径中的视图一样。

Answer 1

您可以使用 Core Animation 和 CAKeyFrameAnimation 来定义曲线点。请参阅本教程： http: //nachbaur.com/2011/01/07/core-animation-part-4/

Answer 2

以上一项可以通过以下方式实现：-

i) CAKeyframeAnimation ii)创建曲线路径 iii) 自定义视图的动画层

import UIKit
import CoreGraphics
class ViewController: UIViewController {

    var moveAlongPath:CAAnimation!

    override func viewDidLoad() {
        super.viewDidLoad()

        addAnimation()
        initiateAnimation()
    }

    func curevedPath() -> UIBezierPath {

        let path = createCurvePath()

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.strokeColor = UIColor.blue.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineWidth = 1.0
        self.view.layer.addSublayer(shapeLayer)
        return path
    }


    func addAnimation() {
        let moveAlongPath = CAKeyframeAnimation(keyPath: "position")
        moveAlongPath.path = curevedPath().cgPath
        moveAlongPath.duration = 5
        moveAlongPath.repeatCount = HUGE
        moveAlongPath.calculationMode = kCAAnimationPaced
        moveAlongPath.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)]
        self.moveAlongPath = moveAlongPath
    }

    func initiateAnimation() {
        let layer = createLayer()
        layer.add(moveAlongPath, forKey: "animate along Path")
    }

    //MARK:- Custom View Path
    func createLayer() -> CALayer {
        let customView  = CustomView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
        self.view.addSubview(customView)
        let customlayer = customView.layer
        customlayer.bounds = CGRect(x: 0, y: 0, width: 50, height: 50)
        customlayer.position = CGPoint(x: 25, y: 25)
        return customlayer
      }

    //MARK:- Custom Curve Path
    func createCurvePath() -> UIBezierPath {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 10, y: 200))
        path.addQuadCurve(to: CGPoint(x: 300, y: 200), controlPoint: CGPoint(x: 150, y: 10) )
        return path
    }

}


class CustomView:UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUpView()
    }

    func setUpView() {
        let image = UIImage(named: "Go.png")
        let imageView = UIImageView(image: image)
        imageView.frame = CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height)
        addSubview(imageView)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

演示参考

Answer 3

您可以通过将动画嵌套在完成子句中来堆叠动画。