用其他颜色动画填充 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

您的代码存在一些问题：

你在图层上加了一个矩形mask，完全不影响渲染。你永远不会改变它的框架、位置、形状或其他任何东西，所以它的用途不明确。
sublayer 应该只在您的玻璃形状内可见，对吗？但是在代码中你将它定义为一个矩形并且它是一个子视图，所以没有理由它会被你的玻璃图像的形状修剪。
请不要将 views 称为 layer，这会让阅读您的代码的任何人感到困惑。如果不是一层就不要叫layer，就这么简单

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

如果您包装单个 CABasicAnimation

工作解决方案：

事实上你不需要在这里使用CoreAnimation，你可以用更高级的plain来实现它UIKit。在这种情况下你最好的朋友是 mask property of UIView and animateWithDuration method:

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 并且包含透明背景上的形状。

用其他颜色动画填充 UIImageView

Fill UIImageView with other color animated

core-animation

ios

swift3