【问题标题】:Animating CALayer border alpha动画 CALayer 边框 alpha
【发布时间】:2018-11-19 05:11:36
【问题描述】:

我有一个带边框的UIView(颜色:绿色,宽度:10)。

我正在尝试将边框的 alpha(在循环中)从 1.0 的值设置为 0.2 的值 - 然后返回 1.0 - 然后返回 0.2 等等...

但是CALayer 没有borderAlpha 的属性,所以我不知道该怎么做。

我试过这段代码,但没有用:

UIView.animate(withDuration: 1, delay: 0, options: [.repeat, .autoreverse], animations: {
    self.layer.borderColor = UIColor(cgColor: self.layer.borderColor!).withAlphaComponent(0.2).cgColor
}, completion: nil)

有人知道我该怎么做吗?

谢谢!

【问题讨论】:

  • 你应该在那里找到你的答案:stackoverflow.com/questions/28934948/…
  • @Aamir,我认为它们是不同的情况。这个是:A 动画到 B,B 动画到 A。您的链接:A 动画到 B,A 动画到 B 再次...

标签: ios iphone swift cocoa-touch calayer


【解决方案1】:

更新和简化。使用CALayer创建边框层,然后使用CABasicAnimation实现淡入淡出效果:

class BorderView: UIView {
    private var boarderLayer:CALayer?
    private let animationKey = "opacityAnimation"

    override public var frame: CGRect {
        didSet{
            self.updateBorder()
        }
    }

    func updateBorder() {
        if boarderLayer == nil {
            boarderLayer = CALayer()
            boarderLayer?.borderColor = UIColor.red.cgColor
            boarderLayer?.borderWidth = 5.0
            self.layer.addSublayer(boarderLayer!)
        }

        boarderLayer?.frame = self.bounds

        if (boarderLayer?.animation(forKey: animationKey) == nil) {
            self.addAnimiation(layer: boarderLayer!,increasing:true)
        }
    }

    func addAnimiation(layer:CALayer,increasing:Bool) {
        CATransaction.begin()

        CATransaction.setCompletionBlock{ [weak self] in
            self?.addAnimiation(layer: layer,increasing:!increasing)
        }

        let animation = CABasicAnimation(keyPath: "opacity")
        if increasing {
            layer.opacity = 0.2
            animation.fromValue = 1.0
            animation.toValue = 0.2
        }
        else{
            layer.opacity = 1.0
            animation.fromValue = 0.2
            animation.toValue = 1.0
        }
        animation.duration = 1.0
        layer.add(animation, forKey: animationKey)

        CATransaction.commit()
    }
}

结果:

【讨论】:

  • 我使用的是UIView 的子类,而不是UIViewController
【解决方案2】:

试试这个

class animateStack: UIViewController {

    @IBOutlet weak var animateView: UIView!{
        didSet{
            animateView.layer.borderColor = UIColor.black.cgColor
            animateView.layer.borderWidth = 10
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        animateBorderAlpha()
    }

    private func animateBorderAlpha(){
        /// First Animation
        let animation = CABasicAnimation(keyPath: "borderColor")
        animation.beginTime = 0
        animation.toValue = UIColor.black.withAlphaComponent(0.1).cgColor
        animation.fromValue = UIColor.black.cgColor
        animation.duration = 2

        /// Second Animation
        let animation1 = CABasicAnimation(keyPath: "borderColor")
        animation1.toValue = UIColor.black.cgColor
        animation1.fromValue = UIColor.black.withAlphaComponent(0.1).cgColor
        animation1.beginTime = animation.beginTime + animation.duration
        animation.duration = 4

        /// Animation Group
        let borderColorAnimation: CAAnimationGroup = CAAnimationGroup()
        borderColorAnimation.animations = [animation, animation1]
        borderColorAnimation.duration = animation.duration + animation1.duration
        borderColorAnimation.repeatCount = Float.greatestFiniteMagnitude
        self.animateView.layer.add(borderColorAnimation, forKey: "borderColor")
    }

}

更新

class animateViewClass: NSObject {
    class func animateBorderAlpha(_ view: UIView){
        /// First Animation
        let animation = CABasicAnimation(keyPath: "borderColor")
        animation.beginTime = 0
        animation.toValue = UIColor.black.withAlphaComponent(0.1).cgColor
        animation.fromValue = UIColor.black.cgColor
        animation.duration = 2

        /// Second Animation
        let animation1 = CABasicAnimation(keyPath: "borderColor")
        animation1.toValue = UIColor.black.cgColor
        animation1.fromValue = UIColor.black.withAlphaComponent(0.1).cgColor
        animation1.beginTime = animation.beginTime + animation.duration
        animation.duration = 4

        /// Animation Group
        let borderColorAnimation: CAAnimationGroup = CAAnimationGroup()
        borderColorAnimation.animations = [animation, animation1]
        borderColorAnimation.duration = animation.duration + animation1.duration
        borderColorAnimation.repeatCount = Float.greatestFiniteMagnitude
        view.layer.add(borderColorAnimation, forKey: "borderColor")
    }
}

用法

    animateViewClass.animateBorderAlpha(viewName)
    /// Case of Subclass UIView
    animateViewClass.animateBorderAlpha(self)

【讨论】:

  • 我使用的是UIView 的子类,而不是UIViewController
  • 你需要在UIView中添加这个动画,比如self.yourViewName.layer.add(borderColorAnimation, forKey: "borderColor")
  • /// 第二个动画 animation.duration = 4(可能是animation1?)
猜你喜欢
  • 2014-03-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多