如何使按钮闪烁或闪烁?

时间:2016-01-07 22:13:49

标签: ios swift uibutton

我正在尝试将按钮的颜色(只是闪烁/闪烁)更改为绿色,扫描正确时为红色,当出现问题时为红色。我可以用这样的视图来做到这一点

func flashBG(){
    UIView.animateWithDuration(0.7, animations: {
        self.view.backgroundColor = UIColor.greenColor()

    })
}

但是按钮会保持绿色

func flashBtn(){
    UIButton.animateWithDuration(0.5, animations: {
        self.buttonScan.backgroundColor = UIColor.greenColor()
    })
}

我已经按代码

创建了按钮
func setupScanButton() {
    let X_Co = (self.view.frame.size.width - 100)/2
    let Y_Co = (self.viewForLayer.frame.size.height + 36/2)

    buttonScan.frame = CGRectMake(X_Co,Y_Co,100,100)
    buttonScan.layer.borderColor = UIColor.whiteColor().CGColor
    buttonScan.layer.borderWidth = 2
    buttonScan.layer.cornerRadius = 50
    buttonScan.setTitle("Scan", forState: .Normal)
    buttonScan.backgroundColor = UIColor.blueColor()
    buttonScan.addTarget(self, action: "buttonScanAction", forControlEvents: .TouchUpInside)
    buttonScan.setTitleColor(UIColor(red:255/255, green: 255/255, blue:255/255, alpha: 1), forState: UIControlState.Normal)

    self.view.addSubview(buttonScan)
}

我应该再次调用setupScanButton()吗?

11 个答案:

答案 0 :(得分:20)

这应该适用于Swift 4

extension UIView{
     func blink() {
         self.alpha = 0.2
         UIView.animate(withDuration: 1, delay: 0.0, options: [.curveLinear, .repeat, .autoreverse], animations: {self.alpha = 1.0}, completion: nil)
     }
}

答案 1 :(得分:15)

这将启动和停止闪烁按钮onClick,如果您只想立即使用第一个声明来闪烁按钮。

var flashing = false

@IBAction func btnFlash_Clicked(sender: AnyObject) {
        if !flashing{
            self.buttonScan.alpha = 1.0
            UIView.animateWithDuration(0.5, delay: 0.0, options: [.CurveEaseInOut, .Repeat, .Autoreverse, .AllowUserInteraction], animations: {() -> Void in
                self.buttonScan.alpha = 0.0
                }, completion: {(finished: Bool) -> Void in
            })

            flashing = true
        }
    else{
        UIView.animateWithDuration(0.1, delay: 0.0, options: [.CurveEaseInOut, .BeginFromCurrentState], animations: {() -> Void in
            self.buttonScan.alpha = 1.0
            }, completion: {(finished: Bool) -> Void in
        })
    }
}

答案 2 :(得分:7)

您可以尝试这样的事情:

extension UIView {
    func blink() {
        UIView.animateWithDuration(0.5, //Time duration you want,
            delay: 0.0,
            options: [.CurveEaseInOut, .Autoreverse, .Repeat],
            animations: { [weak self] in self?.alpha = 0.0 },
            completion: { [weak self] _ in self?.alpha = 1.0 })
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW,Int64(2 * NSEC_PER_SEC)),dispatch_get_main_queue()){
            [weak self] in
            self?.layer.removeAllAnimations()
        }
    }
}

答案 3 :(得分:7)

Swift 4

我通过一些有用的选项制作了扩展程序:

extension UIButton {
    open override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        return self.bounds.contains(point) ? self : nil
    }
    func blink(enabled: Bool = true, duration: CFTimeInterval = 1.0, stopAfter: CFTimeInterval = 0.0 ) {
        enabled ? (UIView.animate(withDuration: duration, //Time duration you want,
            delay: 0.0,
            options: [.curveEaseInOut, .autoreverse, .repeat],
            animations: { [weak self] in self?.alpha = 0.0 },
            completion: { [weak self] _ in self?.alpha = 1.0 })) : self.layer.removeAllAnimations()
        if !stopAfter.isEqual(to: 0.0) && enabled {
            DispatchQueue.main.asyncAfter(deadline: .now() + stopAfter) { [weak self] in
                self?.layer.removeAllAnimations()
            }
        }
    }
}

首先,当按钮的hittest等于<时,我已将alpha功能改为启用 触摸动画期间强> 0.0 (透明)。

然后,所有输入变量都有默认值,因此您可以启动不带参数的blink()方法

我还引入了enabled参数来启动或停止按钮上的动画。

最后,如果您想要,您可以使用stopAfter参数在特定时间后停止动画

用法:

yourButton.blink() // infinite blink effect with the default duration of 1 second

yourButton.blink(enabled:false) // stop the animation

yourButton.blink(duration: 2.0) // slowly the animation to 2 seconds

yourButton.blink(stopAfter:5.0) // the animation stops after 5 seconds.

典型用途:

yourButton.blink(duration: 1.5, stopAfter:10.0)
// your code..
yourButton.blink()
// other code..
yourButton.blink(enabled:false)

答案 4 :(得分:5)

我希望这能解决你的问题。

UIView.animateWithDuration(1.0, delay: 1.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {

    buttonScan.alpha = 0.0

    }, completion: nil)   

答案 5 :(得分:2)

Swift 3.0

func btnFlash_Clicked(sender: AnyObject) {

    if !flashing{
        callButton.alpha = 1.0
        UIView.animate(withDuration: 0.5, delay: 0.0, options: [.allowUserInteraction], animations: {() -> Void in
            callButton.alpha = 0.5
        }, completion: {(finished: Bool) -> Void in
        })

        flashing = true
    }
    else{
        flashing = false
        callButton.alpha = 0.5
        UIView.animate(withDuration: 0.5, delay: 0.0, options: [.allowUserInteraction], animations: {() -> Void in
            callButton.alpha = 1.0
        }, completion: {(finished: Bool) -> Void in
        })
    }
}

答案 6 :(得分:1)

UIView扩展名“闪烁”视图并更改背景颜色:

/**
 Blinks a view with a given duration and optional color.

 - Parameter duration: The duration of the blink.
 - Parameter color: The color of the blink.
 */
public func blink(withDuration duration: Double = 0.25, color: UIColor? = nil) {

    alpha = 0.2
    UIView.animate(withDuration: duration, delay: 0.0, options: [.curveEaseInOut], animations: {
        self.alpha = 1.0
    })

    guard let newBackgroundColor = color else { return }
    let oldBackgroundColor = backgroundColor

    UIView.animate(withDuration: duration, delay: 0.0, options: [.curveEaseInOut], animations: {
        self.backgroundColor = newBackgroundColor
        self.backgroundColor = oldBackgroundColor
    })

}

然后您将使用以下方式:

buttonScan.blink(color: .green)

答案 7 :(得分:0)

myButton.alpha = 0.7

UIView.animateWithDuration(0.3, 
                    delay: 1.0, 
                  options: [UIViewAnimationOptions.CurveLinear,
                            UIViewAnimationOptions.Repeat,
                            UIViewAnimationOptions.Autoreverse],
                animations: { myButton.alpha = 1.0 }, 
                completion: nil)

答案 8 :(得分:0)

//MARK : Usage 

yourButton.flash()

extension UIButton {

    func flash() {

        let flash = CABasicAnimation(keyPath: "opacity")
        flash.duration = 0.5
        flash.fromValue = 1
        flash.toValue = 0.1
        flash.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
        flash.autoreverses = true
        flash.repeatCount = 3

        layer.add(flash, forKey: nil)
    }
}

答案 9 :(得分:0)

使用 UIViewPropertyAnimator Swift 5

UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 1, delay: 0, options: [.curveLinear,.repeat], animations: {
       UIView.setAnimationRepeatCount(3000)
       self.buttonScan.alpha = 0.0
 }, completion: {_ in   })

答案 10 :(得分:0)

另一个适用于Swift 5的平滑动画版本:

 public extension UIView {
  func blink(duration: TimeInterval) {
    let initialAlpha: CGFloat = 1
    let finalAlpha: CGFloat = 0.2
    
    alpha = initialAlpha
    
    UIView.animateKeyframes(withDuration: duration, delay: 0, options: .beginFromCurrentState) {
      UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5) {
        self.alpha = finalAlpha
      }
      
      UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
        self.alpha = initialAlpha
      }
    }
  }
}