扫描二维码- 动画实现
扫描二维码的动画是指“冲击波”,我们在使用微信、支付宝等扫描二维码时,会见到一道波从上往下扫去的效果。这就是二维码的动画。
扫描二维码- 动画实现(代码)
- 界面布局
- 添加二维码边框图片
- 增加“冲击波”图片,叠在背景图片上面
- 添加约束
-
冲击波超出背景图片的部分,没有被隐藏,需要设置maskToBounds为YES,或者在xib(storyboard)中勾选父控件(这里是backView)的Clip Subviews属性
- 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<UITouch>, 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()
}
```