当前位置: > > > Swift - 拖动回弹效果的实现(拖放后自动归位)

Swift - 拖动回弹效果的实现(拖放后自动归位)

下面通过一个 UIView 来演示如何实现拖动回弹的效果,为了让效果看的更加明显,这里将 UIView 的背景设置为橙色。

1,效果图

方块可以向上或者向下拖动,松开后会自动恢复到原先位置,同时具有动画效果。

2,实现步骤

(1)在StoryBoard 中添加一个 View,设置橙色背景,并添加好相关约束。

(2)拖动一个 UIPanGestureRecognizer 到这个 View 上。

(3)切换到双向视图,将这个 UIPanGestureRecognizer、橙色的 View、以及该 View Top Layout Contraint 拖动到 ViewController 中绑定。

(4)下面是完整代码:
import UIKit

class ViewController: UIViewController {
    //拖动的view
    @IBOutlet weak var myView: UIView!
    //拖动view的上约束
    @IBOutlet weak var myViewTopLayoutConstraint: NSLayoutConstraint!
    //拖动手势
    @IBOutlet var panGesture: UIPanGestureRecognizer!
    
    //保存初始时拖动view上约束的值
    var myViewTopLayoutConstant: CGFloat!
    //保存初始时拖动view的y坐标值
    var myViewOriginY: CGFloat!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //添加拖动手势响应
        panGesture.addTarget(self, action: #selector(ViewController.pan))
        //保存初始时拖动view上约束的值(用于后面还原)
        myViewTopLayoutConstant = myViewTopLayoutConstraint.constant
    }
    
    //拖动手势
    func pan() {
        //拖动开始
        if panGesture.state == .began {
            myViewOriginY = myView.frame.origin.y
        }
            
        //拖动过程
        else if panGesture.state == .changed {
            let y = panGesture.translation(in: self.view).y
            myViewTopLayoutConstraint.constant = myViewTopLayoutConstant + y
        }
          
        //拖动结束
        else if panGesture.state == .ended {
            //回弹
            UIView.animate(withDuration: 0.4, delay: 0, options: .curveEaseInOut, animations: {
                () -> Void in
                self.myView.frame.origin.y = self.myViewOriginY
                }, completion: { (success) -> Void in
                    if success {
                        //回弹动画结束后恢复默认约束值
                        self.myViewTopLayoutConstraint.constant = self.myViewTopLayoutConstant
                    }
            })
            return
        }
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
评论0