美文网首页
iOS虚化效果/毛玻璃效果:UIViewPropertyAnim

iOS虚化效果/毛玻璃效果:UIViewPropertyAnim

作者: Hanfank | 来源:发表于2019-04-07 15:25 被阅读0次
    效果

    虚化效果主要代码部分

    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)

    相关文章

      网友评论

          本文标题:iOS虚化效果/毛玻璃效果:UIViewPropertyAnim

          本文链接:https://www.haomeiwen.com/subject/pflsiqtx.html