วิธีสร้างแอนิเมชั่น“ Pulse effect” แบบเนทีฟบน UIButton - iOS


89

ฉันต้องการมีแอนิเมชั่นพัลส์บางประเภท (infinite loop "scale in - scale out") บน UIButton เพื่อให้ผู้ใช้ได้รับความสนใจทันที

ฉันเห็นลิงค์นี้วิธีสร้างเอฟเฟกต์พัลส์โดยใช้ -webkit-animation - วงแหวนด้านนอกแต่ฉันสงสัยว่ามีวิธีใดบ้างที่จะทำได้โดยใช้เนทีฟเฟรมเวิร์กเท่านั้น?

คำตอบ:


200
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")

ดูบทความ "Animating Layer Content"


1
ขอบคุณสำหรับคำตอบ! ฉันต้องบอกว่าฉันค่อนข้างติดขัด ฉันไม่คุ้นเคยกับ CALayer เลยและฉันไม่แน่ใจว่าจะเชื่อมโยงกับ UIButton ของฉันอย่างไร นอกจากนี้โค้ดของคุณดูเหมือนว่าจะเปลี่ยนความทึบไม่ใช่สเกล
Johann

8
ตกลง). 'Pulse animating' เป็นคำที่มักใช้กับเอฟเฟกต์การกะพริบตามที่กล่าวไว้ในลิงก์นั้น ตอนนี้ฉันอ่านคำถามของคุณอีกครั้งและเข้าใจว่าคุณต้องการอะไร ในตอนแรกทุกมุมมองจะมีเลเยอร์ของตัวเอง หากเฟรมเวิร์ก QartzCore ถูกเพิ่มในโปรเจ็กต์myView.layerให้พิมพ์เพื่อเข้าถึง คุณสามารถทำให้เลเยอร์เคลื่อนไหวได้ด้วย Core Animation สำหรับการแปลงขนาดคุณสามารถใช้แนวทางนี้: Key Path Support for Structure Fields
beryllium

7
สุดยอด! การใช้ @ "transform.scale" แทน @ "opacity" จะเป็นเหมือนเสน่ห์ ขอบคุณมาก!
Johann

2
หากคุณยังไม่มีคุณต้องเพิ่ม#import <QuartzCore/QuartzCore.h>เพื่อให้ได้คำจำกัดความทั้งหมดสำหรับ CALayers
progrmr

ฮึ! อย่าแก้ไขคำตอบ 3 ปีที่ล้าสมัยเว้นแต่คุณจะอัปเดตคำตอบจริงเป็นเวอร์ชันทันสมัยที่ถูกต้อง การเพิ่มช่องว่างไม่ได้อัปเดต โดยเฉพาะอย่างยิ่งไม่ให้ฟื้นคืนชีพหลังจาก 3 ปี
Fogmeister

31

นี่คือรหัสที่รวดเร็วสำหรับมัน;)

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

2
เกิดอะไรขึ้นกับเซมิโคลอนทั้งหมด? ;)
คริสเตียน

@ คริสเตียนเซมิโคลอนตั้งค่าประเภทของค่าคงที่ pulseAnimation ไม่จำเป็นต้องใช้ แต่มีแนวโน้มที่จะเพิ่มความชัดเจนของโค้ดเมื่อด้านขวามือของงานไม่ได้ระบุชัดเจนว่าจะกำหนดประเภทใด
Scott Chow

@ScottChow ฉันเดาว่าคุณกำลังพูดถึงลำไส้ใหญ่ ความคิดเห็นของฉันเป็นเรื่องตลกสำหรับคำตอบเดิมเนื่องจากไม่จำเป็นต้องใช้อัฒภาคกับ Swift เดาว่าตอนนี้คงไม่ชัดเจนนักเมื่อมีการแก้ไขคำตอบเป็นจำนวนมาก :)
Christian

อย่าลืมเพิ่ม fromValue
Kev Wats

9

รหัสที่รวดเร็วไม่มี a fromValueฉันต้องเพิ่มเพื่อให้มันใช้งานได้

pulseAnimation.fromValue = NSNumber(float: 0.0)

นอกจากนี้ยังforKeyควรจะกำหนดเป็นอย่างอื่นremoveAnimationไม่ได้ทำงาน

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

3
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)
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.