iOS 图片遮罩动画,图片逐渐显示


class AnimationController: UIViewController {

    /// 背景图
    private lazy var bgView: UIImageView = {
        let view = UIImageView(image: UIImage(named: "img1"))
        return view
    }()
    
    /// 动画显示图片
    lazy var animateView: UIImageView = {
        let view = UIImageView(image: UIImage(named: "img"))
        return view
    }()
    
    /// 遮罩动画 layer
    private var animateLayer: CAShapeLayer?

    var timer: Timer?
    
    var tmpH: CGFloat = 0.1
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(bgView)
        view.addSubview(animateView)
        bgView.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.width.equalTo(200)
            make.height.equalTo(500)
        }
        animateView.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.width.equalTo(200)
            make.height.equalTo(500)
        }
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        startAnimationTimer()
    }
}


extension AnimationController {
    
    private func startAnimationTimer() {
        destroyAnimationTimer()
        timer = Timer(timeInterval: 0.001, repeats: true, block: { [weak self]_ in
            guard let weakSelf = self else { return
            }
            weakSelf.tmpH += 0.1
            weakSelf.addMaskLayer(progress: Float(weakSelf.tmpH))
        })
        RunLoop.current.add(timer!, forMode: .common)
        timer?.fire()
    }
    
    private func destroyAnimationTimer() {
        timer?.invalidate()
        timer = nil
    }
}


extension AnimationController {
    
    private func addMaskLayer(progress: Float) {
        let viewWidth = animateView.frame.width
        let viewHeight = animateView.frame.height
        let tmpHeight = CGFloat(progress)

        animateLayer?.removeFromSuperlayer()
        animateLayer = nil
        let point1 = CGPoint(x: 0, y: 0)
        let point2 = CGPoint(x: viewWidth, y: 0)
        let point3 = CGPoint(x: viewWidth, y: tmpHeight)
        let point4 = CGPoint(x: 0, y: tmpHeight)
        let path = UIBezierPath()
        path.move(to: point1)
        path.addLine(to: point2)
        path.addLine(to: point3)
        path.addLine(to: point4)
        path.close()
        animateLayer = CAShapeLayer()
        animateLayer?.path = path.cgPath
        animateView.layer.mask = animateLayer
    }
}

iOS中layer之mask 详解 - 简书

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值