扫描二维码- 动画实现

扫描二维码- 动画实现

扫描二维码的动画是指“冲击波”，我们在使用微信、支付宝等扫描二维码时，会见到一道波从上往下扫去的效果。这就是二维码的动画。

扫描二维码- 动画实现（代码）

1. 界面布局
   1. 添加二维码边框图片
   2. 增加“冲击波”图片，叠在背景图片上面
   3. 添加约束

   4. 冲击波超出背景图片的部分,没有被隐藏，需要设置maskToBounds为YES，或者在xib（storyboard）中勾选父控件（这里是backView）的Clip Subviews属性

      
      
      

      扫描二维码动画.png

2. swift

   @IBOutlet weak var chongjibo: UIImageView!
   @IBOutlet weak var backView: UIView!
   @IBOutlet weak var toBottom: NSLayoutConstraint! // 冲击波控件底部约束
   
   override func viewDidAppear(animated: Bool) {
       super.viewDidAppear(animated)
   
       // 开启动画效果
       beginScanAnimation()
   }
   
   override func touchesBegan(touches: Set, withEvent event: UIEvent?) {
   

// endAniamtion()
}

// 冲击波动画
func beginScanAnimation() -> () {

    // 1. 设置约束，将冲击波的底部上移至二维码边框顶部
    toBottom.constant = backView.frame.size.height
    view.layoutIfNeeded()

    // 2. 设置约束，将冲击波的底部下移至二维码边框底部
    toBottom.constant = -backView.frame.size.height

    // 3. 动画效果：使冲击波沿着二维码边框从上至下平移，实现“往下扫”的视觉效果
    UIView.animateWithDuration(2) {

        // 重复的次数
        UIView.setAnimationRepeatCount(MAXFLOAT)

        // 实现动画
        self.view.layoutIfNeeded()
    }
}

// 移除动画
func endAniamtion() -> () {
    chongjibo.layer.removeAllAnimations()
}
```