Comment déplacer une vue le long d'un tracé courbe dans iOS

Question

Comment animer/déplacer la vue dans le chemin de la courbe, est-il possible d'utiliser UIAnimation. Comme pour déplacer une vue dans le chemin comme dans l'image.

Answer 1

Vous pouvez le faire en utilisant Core Animation et CAKeyFrameAnimation pour définir les points de la courbe. Consultez ce tutoriel: http://nachbaur.com/2011/01/07/core-animation-part-4/

Answer 2

Vous pouvez empiler des animations en les imbriquant dans la clause d'achèvement.

Answer 3

Au-dessus, on peut être achived par: -

i) CAKeyframeAnimation ii) Create Curve Path iii) Animate couche de vue personnalisée

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") 
    } 

} 

Demo Reference