當按鈕有動畫和漸變遮罩時，點擊手勢不起作用

Question

我想為按鈕標題添加漸變，並且按鈕應該具有閃爍/閃爍等動畫。 通過添加這個，點擊手勢不起作用

我創建了一個名為“maskingView”的視圖，按鈕位於使用故事板的名為“btnGradient”的視圖中

    let gradient = CAGradientLayer()
    gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradient.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 30)
    maskingView = btnGradient

    // function for animation
    blinkAnimation()

    let tap = UITapGestureRecognizer(target: self, action: #selector(self.goToOtherView(gesture:)))
    tap.delegate = self
    tap.numberOfTapsRequired = 1
    self. maskingView.isUserInteractionEnabled = true
    self. maskingView.addGestureRecognizer(tap)
    maskingView.layer.insertSublayer(gradient, at: 0)


    func blinkAnimation(){
    maskingView.alpha = 1.0
    UIView.animate(withDuration: 0.5, delay: 0.0, options: [.repeat, .autoreverse, .allowUserInteraction], animations: {
        self.maskingView.alpha = 0.0
    }, completion: nil)
    }

Answer 1

這不起作用，因為您正在設置self.maskingView.alpha = 0.0 。 如果您將 alpha 設置為0則系統會將其視為隱藏視圖！ 一旦嘗試通過設置類似 alpha 的方式，

self.maskingView.alpha = 0.1

示例代碼：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var maskingView: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()

        let gradient = CAGradientLayer()
        gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradient.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 30)

        // function for animation
        blinkAnimation()

        let tap = UITapGestureRecognizer(target: self, action: #selector(self.goToOtherView(gesture:)))
        tap.numberOfTapsRequired = 1
        self.maskingView.isUserInteractionEnabled = true
        self.maskingView.addGestureRecognizer(tap)
        maskingView.layer.insertSublayer(gradient, at: 0)

        // Do any additional setup after loading the view.
    }

    func blinkAnimation(){
        maskingView.alpha = 1.0
        UIView.animate(withDuration: 0.5, delay: 0.0, options: [.repeat, .autoreverse, .allowUserInteraction], animations: {
            self.maskingView.alpha = 0.1
        }, completion: nil)
    }

    @objc func goToOtherView(gesture:Any) {
        print("tap")
    }
}

Answer 2

蘋果在它的動畫文檔中描述：

“在 iOS 中，動畫被廣泛用於重新定位視圖、更改其大小、從視圖層次結構中刪除它們以及隱藏它們。”

查看編程指南 - Apple

本文繼續非常強調使用 Core Animations 而不是 UIView Animations 來獲得更詳細的動畫。

“在你想要執行更復雜的動畫，或者 UIView 類不支持的動畫的地方，你可以使用 Core Animation 和視圖的底層來創建動畫。因為視圖和圖層對象錯綜復雜地鏈接在一起，改變視圖的層影響視圖本身。”

所以基本上說，你操縱視圖的層來改變視圖。 當為此目的存在核心動畫時，我認為直接操作視圖是不明智的。 因此，您不能（並且可能不應該）使用 UIAnimations 對 UIView 執行您可以使用核心動畫對圖層執行的操作。

你必須用CoreAnimation做動畫。 因此你的blinkAnimation()方法將是，

func blinkAnimation(){
    let fadein = CABasicAnimation(keyPath: "opacity")
    fadein.fromValue = 1.0
    fadein.toValue = 0.0
    fadein.duration = 0.5
    fadein.autoreverses = true
    fadein.repeatCount = HUGE
    maskingView.layer.add(fadein, forKey: "opacity")
}

這是完整的代碼，

    let gradient = CAGradientLayer()
    gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradient.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 30)
    maskingView = btnGradient

    // function for animation
    blinkAnimation()

    let tap = UITapGestureRecognizer(target: self, action: #selector(self.goToOtherView(gesture:)))
    tap.delegate = self as! UIGestureRecognizerDelegate
    tap.numberOfTapsRequired = 1
    self.maskingView.isUserInteractionEnabled = true
    self.maskingView.addGestureRecognizer(tap)
    maskingView.layer.insertSublayer(gradient, at: 0)

點擊手勢選擇器方法是，

@objc func goToOtherView(gesture: UITapGestureRecognizer) {
        print("tap gesture selector called")
    }

Answer 3

遮罩、動畫和點擊手勢/按鈕點擊（touchUpInside）不能同時工作

所以為了添加漸變使用

btnGradient.setTitleColor(UIColor(patternImage: UIImage(named: "gradientImage")!), for: .normal)

現在添加動畫並在按鈕上使用 touchUpInside 事件