如何在 UIButton 上制作原生“脉冲效果”动画 - iOS

Posted 2023-02-18

【中文标题】如何在 UIButton 上制作原生“脉冲效果”动画 - iOS

【英文标题】：How to do a native "Pulse effect" animation on a UIButton - iOS

【发布时间】：2011-12-26 08:33:32

【问题描述】：

我想在 UIButton 上制作某种脉冲动画（无限循环“缩小 - 缩小”），以便立即引起用户的注意。

我看到了这个链接How to create a pulse effect using -webkit-animation - outward rings，但我想知道是否有任何方法可以只使用本机框架来做到这一点？

【参考方案1】：

这是它的快速代码；）

let pulseAnimation = CABasicAnimation(keyPath: "transform.scale")
pulseAnimation.duration = 1.0
pulseAnimation.fromValue = NSNumber(value: 0.0)
pulseAnimation.toValue = NSNumber(value: 1.0)
pulseAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
pulseAnimation.autoreverses = true
pulseAnimation.repeatCount = .greatestFiniteMagnitude
self.view.layer.add(pulseAnimation, forKey: nil)

【讨论】：

所有的分号是怎么回事？ ;)

@Christian 分号设置 pulseAnimation 常量的类型。它没有必要使用，但当赋值的右侧没有明确它将分配什么类型时，它确实会增加代码的清晰度。

@ScottChow 我猜你说的是冒号。我的评论是对原始答案的一个玩笑，因为 Swift 不需要分号。当答案被大量编辑时，猜猜现在不是那么明显了:)

确保添加 fromValue

【参考方案2】：

swift 代码缺少fromValue，我必须添加它才能使其正常工作。

pulseAnimation.fromValue = NSNumber(value: 0.0)

还应设置forKey，否则removeAnimation 不起作用。

self.view.layer.addAnimation(pulseAnimation, forKey: "layerAnimation")

【参考方案3】：

CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];
theAnimation.duration=1.0;
theAnimation.repeatCount=HUGE_VALF;
theAnimation.autoreverses=YES;
theAnimation.fromValue=[NSNumber numberWithFloat:1.0];
theAnimation.toValue=[NSNumber numberWithFloat:0.0];
[theLayer addAnimation:theAnimation forKey:@"animateOpacity"]; //myButton.layer instead of

斯威夫特

let pulseAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))
pulseAnimation.duration = 1
pulseAnimation.fromValue = 0
pulseAnimation.toValue = 1
pulseAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
pulseAnimation.autoreverses = true
pulseAnimation.repeatCount = .greatestFiniteMagnitude
view.layer.add(pulseAnimation, forKey: "animateOpacity")

See the article "Animating Layer Content"

【讨论】：

感谢您的回答！我不得不说我有点卡住了。我对 CALayer 一点也不熟悉，也不知道如何将它与我的 UIButton 链接起来。另外，您的代码看起来正在改变不透明度，而不是缩放。

好的）。 “脉冲动画”是一个通常用于闪烁效果的术语 - 如该链接中的示例所述。现在我重新阅读您的问题并了解您想要什么。起初，每个视图都有自己的层。如果将 QartzCore 框架添加到项目中，则只需键入 myView.layer 即可访问它。您可以使用 Core Animation 为图层设置动画。对于比例转换，您可以使用这种方法：Key Path Support for Structure Fields

太棒了！使用 @"transform.scale" 而不是 @"opacity" 就像一个魅力。非常感谢！

如果您还没有，您需要添加#import <QuartzCore/QuartzCore.h> 以获取CALayers 的所有定义。

哎呀！除非您将实际答案更新为正确的现代版本，否则请勿编辑已过时的 3 年答案。添加空格不会更新它。尤其是三年后不要复活。

【参考方案4】：

func animationScaleEffect(view:UIView,animationTime:Float)

    UIView.animateWithDuration(NSTimeInterval(animationTime), animations: 

        view.transform = CGAffineTransformMakeScale(0.6, 0.6)

        ,completion:completion in
            UIView.animateWithDuration(NSTimeInterval(animationTime), animations:  () -> Void in

                view.transform = CGAffineTransformMakeScale(1, 1)
            )
    )




@IBOutlet weak var perform: UIButton!

@IBAction func prefo(sender: AnyObject) 
    self.animationScaleEffect(perform, animationTime: 0.7)