如何添加这样的动画按钮？

Question

如何创建像 video 这样的动画和阴影按钮 （一旦你点击按钮，它就会发光并摆动）

这是我的代码： （此代码实现了swing和shadow，但需要进行组织和安排，使其能够一键运行灯光和swing，并且按钮不会不必要地移动）

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var aBtn: ButtonWithShadow!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.
    }

    @IBAction func btnClick(_ sender: UIButton) {
        if sender.isSelected {
            sender.isSelected = false
            sender.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.50).cgColor
            sender.layer.shadowOffset = CGSize(width: 0, height: 3)
            sender.layer.shadowOpacity = 1.0
            sender.layer.shadowRadius = 10.0
            sender.layer.masksToBounds = false
        } else {
            sender.isSelected = true
            sender.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.0).cgColor

        }

        aBtn.layer.anchorPoint = CGPoint(x: 0.5, y: 0)
        aBtn.layer.transform = CATransform3DMakeRotation(-.pi / 15, 0, 0, 1)
        let needleAnim = CABasicAnimation(keyPath: "transform.rotation.z")
        needleAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        needleAnim.duration = 1.0 as? CFTimeInterval ?? CFTimeInterval()
        needleAnim.repeatCount = 5
        needleAnim.autoreverses = true
        // Setting fillMode means that, once the animation finishes, the needle stays in its end position.
        needleAnim.fillMode = kCAFillModeForwards
        needleAnim.isRemovedOnCompletion = true
        needleAnim.toValue = Double.pi / 15
        aBtn.layer.add(needleAnim, forKey: nil)
    }    
}

和

import UIKit

class ButtonWithShadow: UIButton {
    override func draw(_ rect: CGRect) {
        //updateLayerProperties()
    }
}

感谢您的宝贵时间

Answer 1

您的代码按照编写的方式工作，并在单击时提供一个摆动按钮。确保从按钮拖动到按钮定义的控制单击。

您需要向按钮添加两张图片，一张用于关闭状态，一张用于打开状态。

继续

这是添加设置图像的中间结果。

而更改图片的方法是将它们添加到资产目录中，然后使用：

if sender.isSelected {
        sender.isSelected = false
        sender.setImage(#imageLiteral(resourceName: "off"), for: .normal)
        sender.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.50).cgColor
        sender.layer.shadowOffset = CGSize(width: 0, height: 3)
        sender.layer.shadowOpacity = 1.0
        sender.layer.shadowRadius = 10.0
        sender.layer.masksToBounds = false
    } else {
        sender.isSelected = true
        sender.setImage(#imageLiteral(resourceName: "onbtn"), for: .normal)
        sender.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.0).cgColor

    }