swift动画 —— 表情弹窗（一）

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

效果：

首先创建一个长按手势，并创建响应方法，在响应方法里面添加一个print方法，这样打开模拟器后就可以查看是否添加成功。

  func setupLongPressGesture() {
        view.addGestureRecognizer(UILongPressGestureRecognizer(target: self, action: #selector(handleLongPress)))
    }
    
    @objc func handleLongPress(gesture:UILongPressGestureRecognizer) {
        print("Long Press")
    }

接下来声明一个containerView用来当作弹窗view。

    let iconsContainerView:UIView = {
        let view = UIView()
        view.backgroundColor = .red
        view.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
        return view
    }()

在长按手势的响应方法中判断手势的状态，如果是began就把弹窗view添加为视图的子view，如果是结束状态则移除弹窗view。

 @objc func handleLongPress(gesture:UILongPressGestureRecognizer) {
        if gesture.state == .began {
            view.addSubview(iconsContainerView)
        } else if gesture.state == .ended {
            iconsContainerView.removeFromSuperview()
        }

    }

接下来要把弹窗的位置根据每次长按位置的变化。用gesture.location得到长按点击的位置，然后根据长按的位置算出中间的X值和弹窗的Y值，将iconsContainerView的位置设置为算出来的X和Y值。

    let pressedLocation = gesture.location(in: view)
            let centeredX = (view.frame.width -  iconsContainerView.frame.width) / 2
            iconsContainerView.transform = CGAffineTransform(translationX: centeredX, y: pressedLocation.y - iconsContainerView.frame.height)

接下来在为弹窗View添加一个alpha 和位置变化的animation,UIView.animate的参数：

• duration：表示动画执行时间。

• delay：动画延迟时间。

• usingSpringWithDamping: 参数的范围为0.0f到1.0f，数值越小「弹簧」的振动效果越明显。可以视为弹簧的劲度系数

• initialSpringVelocity: 表示动画的初始速度，数值越大一开始移动越快。

• options：可选项，一些可选的动画效果，包括重复等。

• animations：表示执行的动画内容，包括透明度的渐变，移动，缩放。

• completion：表示执行完动画后执行的内容。

  iconsContainerView.transform = CGAffineTransform(translationX: centeredX, y: pressedLocation.y )
            iconsContainerView.alpha = 0
            UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut) {
                self.iconsContainerView.alpha = 1
                self.iconsContainerView.transform = CGAffineTransform(translationX: centeredX, y: pressedLocation.y - self.iconsContainerView.frame.height)

            }

began里面的操作太长了，可以把began里面的操作分离出来作为一个方法来调用。

func handleBegan(_ gesture: UILongPressGestureRecognizer) {
        view.addSubview(iconsContainerView)
        let pressedLocation = gesture.location(in: view)
        let centeredX = (view.frame.width -  iconsContainerView.frame.width) / 2
        iconsContainerView.transform = CGAffineTransform(translationX: centeredX, y: pressedLocation.y )
        iconsContainerView.alpha = 0
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut) {
            self.iconsContainerView.alpha = 1
            self.iconsContainerView.transform = CGAffineTransform(translationX: centeredX, y: pressedLocation.y - self.iconsContainerView.frame.height)
            
        }
    }

完整代码如下：

class ViewController: UIViewController {
    
    let iconsContainerView:UIView = {
        let view = UIView()
        view.backgroundColor = .red
        view.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setupLongPressGesture()
    }
    
    func setupLongPressGesture() {
        view.addGestureRecognizer(UILongPressGestureRecognizer(target: self, action: #selector(handleLongPress)))
    }
    
    fileprivate func handleBegan(_ gesture: UILongPressGestureRecognizer) {
        view.addSubview(iconsContainerView)
        let pressedLocation = gesture.location(in: view)
        let centeredX = (view.frame.width -  iconsContainerView.frame.width) / 2
        iconsContainerView.transform = CGAffineTransform(translationX: centeredX, y: pressedLocation.y )
        iconsContainerView.alpha = 0
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut) {
            self.iconsContainerView.alpha = 1
            self.iconsContainerView.transform = CGAffineTransform(translationX: centeredX, y: pressedLocation.y - self.iconsContainerView.frame.height)
            
        }
    }
    
    @objc func handleLongPress(gesture:UILongPressGestureRecognizer) {
        if gesture.state == .began {
            handleBegan(gesture)
        } else if gesture.state == .ended {
            iconsContainerView.removeFromSuperview()
        }
    }
}

下一篇文章将会用UIStackview 和 HitTesting来进行表情的处理。