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)
    }
}

我的结果：

Ajax

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

Answer 1

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

您将一个矩形mask添加到图层，这根本不会影响渲染。你永远不会改变它的框架，位置，形状或其他任何东西，所以它的目的不明确。
sublayer应该只在你的玻璃形状内可见，对吗？但是在代码中你将它定义为一个rectengular并且它是一个子视图，所以没有理由它会被你的玻璃图像的形状修剪。
请不要将view称为图层，对于正在阅读您的代码的人来说，这会让您感到困惑。如果它不是图层，请不要将其称为图层，这很简单。

让layer = UIImageView（图片：UIImage（名称：“LaunchIcon”））

如果您要打包一个CABasicAnimation

工作解决方案：

实际上你不需要在这里使用CoreAnimation，你可以用更高级别的UIKit来实现它。在这种情况下，您最好的朋友是UIView和 mask 方法的 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

实施细节：

视图的alpha通道决定了视图的内容和数量背景显示通过。完全或部分不透明的像素允许底层内容透过但完全透明的像素块显示那个内容。

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

用其他颜色动画填充UIImageView

1 个答案: