ios - 用其他颜色动画填充 UIImageView

Question

我有一个 imageview，我希望该 imageview 用一种颜色进行动画处理。所以我的图像首先是绿色图像，然后我想将其设置为橙色图像。

这是我的代码:

class TestView: UIView {

    func startAnimate(){

        let size:CGSize = self.bounds.size

        let layer = UIImageView(image: UIImage(named: "LaunchIcon"))
        layer.frame = self.bounds

        let initialRect:CGRect = CGRect.init(x: 0, y: size.height, width: size.width, height: 0)
        let finalRect:CGRect = CGRect.init(x: 0, y: size.height, width: size.width, height: size.height)

        let sublayer = CALayer()
        sublayer.frame = initialRect
        sublayer.backgroundColor = UIColor.orange.cgColor
        sublayer.opacity = 0.5


        let mask:CAShapeLayer = CAShapeLayer()
        mask.frame = self.bounds
        mask.path = UIBezierPath(rect: self.bounds).cgPath
        mask.fillColor = UIColor.black.cgColor

        layer.layer.addSublayer(sublayer)
        layer.layer.mask = mask

        self.layer.addSublayer(layer.layer)

        let boundsAnim:CABasicAnimation  = CABasicAnimation(keyPath: "bounds")
        boundsAnim.toValue = NSValue.init(cgRect:finalRect)

        let animationGroup = CAAnimationGroup()
        animationGroup.animations = [boundsAnim]
        animationGroup.isRemovedOnCompletion = false
        animationGroup.duration = 2
        animationGroup.fillMode = kCAFillModeForwards

        sublayer.add(animationGroup, forKey: nil)
    }
}

我的结果:

第一个问题是橙色占据了整个画面，而不仅仅是我的图像。第二个问题是它没有填充到顶部。

Answer 1

您的代码存在的一些问题:

1. 您向图层添加一个矩形 mask ，这根本不会影响渲染。您永远不会更改它的框架、位置、形状或任何其他内容，因此它的用途不明确。

2. sublayer 应该只在您的玻璃形状内可见，对吧？但在代码中，您将其定义为矩形并且是 subview ，因此没有理由根据玻​​璃图像的形状对其进行修剪。

3. 请不要将 view 称为 layer，这会让阅读您代码的人感到困惑。如果它不是层，请不要将其称为层，就这么简单。

let layer = UIImageView(image: UIImage(named: "LaunchIcon"))

1. 如果您要包装单个 CABasicAnimation，则不需要 CAAnimationGroup

工作解决方案:

事实上你不需要在这里使用 CoreAnimation，你可以用更高级别的普通 UIKit 来实现它。在这种情况下，您最好的 friend 是 mask UIView 和 的 属性 animateWithDuration 方法:

class GlassView: UIView {

    let liquidView = UIView() //is going to be animated from bottom to top
    let shapeView = UIImageView() //is going to mask everything with alpha mask

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup() {
        self.backgroundColor = UIColor.darkGray
        self.liquidView.backgroundColor = UIColor.orange

        self.shapeView.contentMode = .scaleAspectFit
        self.shapeView.image = UIImage(named: "glass")

        self.addSubview(liquidView)
        self.mask = shapeView

        layoutIfNeeded()
        reset()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        liquidView.frame = self.bounds
        shapeView.frame = self.bounds            
    }

    func reset() {
        liquidView.frame.origin.y = bounds.height
    }

    func animate() {
        reset()
        UIView.animate(withDuration: 1) {
            self.liquidView.frame.origin.y = 0
        }
    }
}

输出:

used mask

实现细节:

The view’s alpha channel determines how much of the view’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.

确保您的蒙版图像是 .png 并且在透明背景上包含一个形状。