iOS虚化效果/毛玻璃效果:UIViewPropertyAnim
2019-04-07 本文已影响0人
Hanfank
效果
虚化效果主要代码部分
1、主要是通过动画控制图层类 UIViewPropertyAnimator
进行操作。
2、UIViewPropertyAnimator
类具有控制动画状态机控制动画开始、暂停、停止等操作。
例如:
开始方法:func animator.startAnimation()
暂停方法:func pauseAnimation()
停止方法:func stopAnimation(withoutFinishing: Bool)
完成方法:func finishAnimation(at: UIViewAnimatingPosition)
过程属性: var fractionComplete:CGFloat
// 不需要执行开始方法,设置这个比例值就可以显示动画的其中的一个过程
整个动画控制过程是这样的:
开始->暂停->停止->完成
3、虚化效果通过UIBlurEffect
类完成。就是一个虚化类,没了
class HeaderView: UICollectionReusableView {
let imageView:UIImageView = {
let iv = UIImageView(image: #imageLiteral(resourceName: "bibi"))
iv.contentMode = .scaleAspectFill
return iv
}()
let cimageView:UIImageView = {
let iv = UIImageView(image: #imageLiteral(resourceName: "ic_wechat_customer"))
iv.contentMode = .scaleAspectFill
return iv
}()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .blue
translatesAutoresizingMaskIntoConstraints = false
addSubview(imageView)
imageView.fillSuperview()
setupVisualEffectBlur()
addSubview(cimageView)
cimageView.center = center
}
var animator:UIViewPropertyAnimator!
private func setupVisualEffectBlur(){
animator = UIViewPropertyAnimator(duration: 3.0, curve: .easeInOut, animations: {
// 最终动画的结果状态
let blurEffect = UIBlurEffect(style: .regular) // 虚化效果
let visualEffectView = UIVisualEffectView(effect: blurEffect)
self.addSubview(visualEffectView)
visualEffectView.fillSuperview()
// 缩放
self.cimageView.transform = CGAffineTransform.init(scaleX: 3, y: 3)
})
animator.fractionComplete = 0
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
演示代码地址:https://github.com/biostome/Stretchy
文献:
快速入门指南:使用 UIViewPropertyAnimator 做动画
Advanced Animations: UIViewPropertyAnimator Blur Effect (Ep 1)