需要围绕按钮的发光动画

Posted 2023-03-11

【中文标题】需要围绕按钮的发光动画

【英文标题】：Need a Glowing Animation around a button

【发布时间】：2017-06-30 15:29:43

【问题描述】：

在我的应用程序中，我有一个大按钮。我希望它周围有一个发光的效果。 可以使用动画来完成吗？ 我曾尝试使用该图像，但它看起来并不干净和吸引人。

【问题讨论】：

superdevresources.com/css-button-glow-effect

Adding glow effect to UIButton - ios的可能重复

【参考方案1】：

我一直在处理您的问题，这是我的结果，我定义了 UIButton 的自定义子类，添加了 CABasicAnimation 动画 shadowRadius 属性，将 autoreverses 设置为 true 并将 repeatCount 设置为无穷大

代码

//
//  GlowingButton.swift
//  NavigationButtonRotateQuestion
//
//  Created by Reinier Melian on 01/07/2017.
//  Copyright © 2017 Pruebas. All rights reserved.
//

import UIKit

@IBDesignable
class GlowingButton: UIButton 

    @IBInspectable var animDuration : CGFloat = 3
    @IBInspectable var cornerRadius : CGFloat = 5
    @IBInspectable var maxGlowSize : CGFloat = 10
    @IBInspectable var minGlowSize : CGFloat = 0
    @IBInspectable var glowColor : UIColor = nil ?? UIColor.red
    @IBInspectable var animateAlways : Bool = false
    fileprivate var animating : Bool = false

    override init(frame: CGRect) 
        super.init(frame: frame)
    

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
    

    override func awakeFromNib() 
        super.awakeFromNib()
        self.contentScaleFactor = UIScreen.main.scale
        self.layer.masksToBounds = false

        if(self.animateAlways)
            self.setupButtonForContinueAnimation()
            self.startAnimation()
        else
            self.setupButton()
        
    

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) 

        if(!self.animateAlways)
            let layerAnimation = CABasicAnimation(keyPath: "shadowRadius")
            layerAnimation.fromValue = minGlowSize
            layerAnimation.toValue = maxGlowSize
            layerAnimation.isAdditive = false
            layerAnimation.duration = CFTimeInterval(animDuration/2)
            layerAnimation.fillMode = CAMediaTimingFillMode.forwards
            layerAnimation.isRemovedOnCompletion = false
            self.layer.add(layerAnimation, forKey: "addGlowing")
        
    

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) 

    

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) 

        if(!self.animateAlways)
            let layerAnimation = CABasicAnimation(keyPath: "shadowRadius")
            layerAnimation.fromValue = maxGlowSize
            layerAnimation.toValue = minGlowSize
            layerAnimation.isAdditive = false
            layerAnimation.duration = CFTimeInterval(animDuration/2)
            layerAnimation.fillMode = CAMediaTimingFillMode.forwards
            layerAnimation.isRemovedOnCompletion = false
            self.layer.add(layerAnimation, forKey: "removeGlowing")
        
    

    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) 

        if(!self.animateAlways)
            let layerAnimation = CABasicAnimation(keyPath: "shadowRadius")
            layerAnimation.fromValue = maxGlowSize
            layerAnimation.toValue = minGlowSize
            layerAnimation.isAdditive = false
            layerAnimation.duration = CFTimeInterval(animDuration/2)
            layerAnimation.fillMode = CAMediaTimingFillMode.forwards
            layerAnimation.isRemovedOnCompletion = false
            self.layer.add(layerAnimation, forKey: "removeGlowing")
        
    

    func setupButton()
    
        self.layer.cornerRadius = cornerRadius
        self.layer.shadowPath = CGPath(roundedRect: self.bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius, transform: nil)
        self.layer.shadowRadius = 0
        self.layer.shadowColor = self.glowColor.cgColor
        self.layer.shadowOffset = CGSize.zero
        self.layer.shadowOpacity = 1
    

    func setupButtonForContinueAnimation()
    
        self.setupButton()
        self.layer.shadowRadius = maxGlowSize
    

    func startAnimation()
    
        let layerAnimation = CABasicAnimation(keyPath: "shadowRadius")
        layerAnimation.fromValue = maxGlowSize
        layerAnimation.toValue = minGlowSize
        layerAnimation.autoreverses = true
        layerAnimation.isAdditive = false
        layerAnimation.duration = CFTimeInterval(animDuration/2)
        layerAnimation.fillMode = CAMediaTimingFillMode.forwards
        layerAnimation.isRemovedOnCompletion = false
        layerAnimation.repeatCount = .infinity
        self.layer.add(layerAnimation, forKey: "glowingAnimation")

    

    func stopAnimations() 
        self.layer.removeAllAnimations()
    

已编辑：添加了 Inspectable 属性以实现更好的自定义

已编辑：适配 swift4 并添加 func 停止动画

【讨论】：

谢谢雷尼尔。这正是我想要的。这很有帮助。

@Abhilasha 欢迎您，很高兴为您提供帮助，请接受我的回答，谢谢

如何停止动画？