ios add panGesture to a view, change view frame, but not fluency

Question

I add a view to self.view, and add a UIPangestureRecognizer to the view, move the view, but not fluency, I can feel not fluency, this my code, thanks you help me

var redView:UIView = UIView();
var redFrame:CGRect = CGRect();
override func viewDidLoad() {
    super.viewDidLoad()
    redView = UIView.init(frame: CGRect.init(x: 0, y: 100, width: KWidth, height: 40))
    redView.backgroundColor = UIColor.red
    self.redFrame = redView.frame;
    self.view.addSubview(redView);
    let pan:UIPanGestureRecognizer = UIPanGestureRecognizer.init(target: self, action: #selector(moveFunction(pan:)))
    self.redView.addGestureRecognizer(pan)
}
func moveFunction(pan:UIPanGestureRecognizer) {
    let point:CGPoint = pan.translation(in: self.view)
    pan.setTranslation(CGPoint.zero, in: self.view)
    if  pan.state == .changed{
        print(point)
        let redY:CGFloat = redView.frame.origin.y + point.y
        redView.frame = CGRect.init(x: 0, y: Int(redY), width: KWidth, height: 40)
    }
}

Answer 1

Use UIView animation on set frame with 0.05 of animation duration.

class func animate(withDuration duration: TimeInterval, animations: @escaping () -> Void)

Answer 2

I would not recommend to reallocate the frame of the view every time the state is .changed. Only update the center property of the gesture recognizer's view.

On the other hand, if you think about real life, when everything starts or stops to move, they do not use the same speed, they speed up, and slow down before stopping eventually.

Therefore i would recommend to wrap the center positioning in a UIView's animation block, with .curveEaseInOut option.

private var originalX: CGFloat = 0.0
private var originalY: CGFloat = 0.0

func handlePanGestureRecognizer(_ pan: UIPanGestureRecognizer) {

    guard let panView = pan.view else {
        return
    }

    // Make sure, the gastureRecognizer's view the topmost view
    self.view.bringSubview(toFront: panView) 

    // Find coordinates of the gesture recognizer event on the screen 
    var translatedPoint = pan.translation(in: self.view)

    // The dragging has just started, lets remember the inital positions
    if pan.state == .began {
        originalX = panView.center.x
        originalY = panView.center.y
    }

    // increase the coordinates of the gesturerecognizers view by the dragging movement's y coordinate
    translatedPoint = CGPoint(x: originalX, y: originalY + translatedPoint.y)

    UIView.animate(withDuration: 0.1, delay: 0, options: [.curveEaseInOut], animations: {
        pan.view?.center = translatedPoint
    } , completion: nil)
} 

Add this method as the action of your UIPanGestureRecognizer, and it should give a much smoother experience.

Answer 3

May be this code help you. I am changing a view (panView) height constraint with pan gesture.

@IBOutlet weak var h: NSLayoutConstraint!
@IBOutlet weak var panView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    let gesture = UIPanGestureRecognizer(target: self, action: #selector(self.pan(_:)))
    panView.addGestureRecognizer(gesture)
}

@objc func pan(_ pan: UIPanGestureRecognizer) {

    let translation = pan.translation(in: panView)

    if pan.state == .began {
    } else if pan.state == .changed {
        h.constant = h.constant - translation.y
        pan.setTranslation(CGPoint.zero, in: panView)
    } else if pan.state == .ended {
        // You can handle this how you want.
    }
}