Bagaimana melakukan animasi "Pulse effect" asli pada UIButton

89

Saya ingin memiliki semacam animasi pulsa (loop tak terbatas "skala dalam skala keluar") pada UIButton sehingga mendapat perhatian pengguna dengan segera.

Saya melihat tautan ini Bagaimana cara membuat efek pulsa menggunakan -webkit-animasi - cincin luar tetapi saya bertanya-tanya apakah ada cara untuk melakukan ini hanya dengan menggunakan kerangka kerja asli?

— Johann
sumber

199

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

Cepat

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

Lihat artikel "Menganimasikan Konten Lapisan"

— berilium
sumber

1

Terima kasih atas jawaban anda! Saya harus mengatakan saya agak mandek. Saya sama sekali tidak familiar dengan CALayer dan saya tidak yakin bagaimana menghubungkannya dengan UIButton saya. Selain itu, kode Anda terlihat seperti mengubah opasitas, bukan skala.

— Johann

8

baik). 'Pulse animating' adalah istilah yang biasanya diterapkan untuk efek flicker - seperti yang dikatakan dalam contoh di tautan itu. Sekarang saya membaca kembali pertanyaan Anda dan memahami apa yang Anda inginkan. Pada awalnya, setiap tampilan memiliki lapisannya sendiri. Jika kerangka kerja QartzCore ditambahkan ke proyek, cukup ketik myView.layeruntuk mengaksesnya. Anda dapat menganimasikan lapisan dengan Animasi Inti. Untuk transformasi skala, Anda dapat menggunakan pendekatan ini: Dukungan Jalur Kunci untuk Bidang Struktur

— berilium

7

Fantastis! Menggunakan @ "transform.scale" daripada @ "opacity" berfungsi seperti pesona. Terima kasih banyak!

— Johann

2

Jika Anda belum memilikinya, Anda perlu menambahkan #import <QuartzCore/QuartzCore.h>untuk mendapatkan semua definisi untuk CALayers.

— progrmr

UGH! Jangan edit jawaban lama 3 tahun yang kedaluwarsa kecuali Anda memperbarui jawaban sebenarnya ke versi modern yang benar. Menambahkan spasi tidak memperbaruinya. Terutama untuk tidak menghidupkannya kembali setelah 3 tahun.

— Fogmeister

31

Ini adalah kode cepat untuk itu;)

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)

— Ravi Sharma
sumber

2

Ada apa dengan semua titik koma? ;)

— Christian

@Christian titik koma menetapkan jenis konstanta pulseAnimation. Ini tidak perlu digunakan tetapi cenderung meningkatkan kejelasan kode ketika sisi kanan tugas tidak menjelaskan jenis tugas yang akan ditetapkan.

— Scott Chow

@ScottChow Saya rasa Anda berbicara tentang titik dua. Komentar saya adalah lelucon untuk jawaban asli, karena tidak perlu titik koma dengan Swift. Kurasa tidak begitu jelas sekarang ketika jawabannya telah banyak diedit :)

— Christian

pastikan untuk menambahkan fromValue

— Kev Wats

9

Kode swift tidak ada fromValue, saya harus menambahkannya untuk membuatnya berfungsi.

pulseAnimation.fromValue = NSNumber(float: 0.0)

Juga forKeyharus diatur, jika removeAnimationtidak tidak berfungsi.

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

— Bassebus
sumber

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)
}

— Ahmad ELkhwaga
sumber

Bagaimana melakukan animasi "Pulse effect" asli pada UIButton - iOS