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)

上一篇下一篇

猜你喜欢

热点阅读