Cách tạo hoạt ảnh "Hiệu ứng xung" gốc trên UIButton - iOS


89

Tôi muốn có một số loại hoạt ảnh xung (vòng lặp vô hạn "scale in - scale out") trên UIButton để nó thu hút sự chú ý của người dùng ngay lập tức.

Tôi đã thấy liên kết này Làm thế nào để tạo hiệu ứng xung bằng cách sử dụng -webkit-animation - vòng ra ngoài nhưng tôi tự hỏi liệu có cách nào để thực hiện việc này chỉ bằng cách sử dụng native framework không?

Câu trả lời:


198
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

Nhanh

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

Xem bài viết "Animating Layer Content"


1
Cảm ơn câu trả lời của bạn! Tôi phải nói rằng tôi có một chút bế tắc. Tôi hoàn toàn không quen thuộc với CALayer và tôi không chắc về cách liên kết nó với UIButton của mình. Thêm vào đó, mã của bạn có vẻ như nó đang thay đổi độ mờ chứ không phải tỷ lệ.
Johann

8
Được chứ). 'Tạo hoạt ảnh xung' là một thuật ngữ thường được áp dụng cho hiệu ứng nhấp nháy - như đã nói trong ví dụ trong liên kết đó. Bây giờ tôi đọc lại câu hỏi của bạn và hiểu những gì bạn muốn. Lúc đầu, mọi khung nhìn đều có lớp riêng. Nếu khung QartzCore được thêm vào dự án thì chỉ cần nhập myView.layerđể truy cập nó. Bạn có thể tạo hoạt ảnh cho các lớp bằng Core Animation. Đối với chuyển đổi quy mô, bạn có thể sử dụng phương pháp này: Hỗ trợ con đường chính cho Cơ cấu Fields
berili

7
Tuyệt diệu! Sử dụng @ "biến đổi.scale" thay vì @ "độ mờ" hoạt động giống như một sự quyến rũ. Cảm ơn rất nhiều!
Johann

2
Nếu bạn chưa có, bạn cần thêm #import <QuartzCore/QuartzCore.h>để có được tất cả các định nghĩa cho CALayers.
progrmr

UGH! Không chỉnh sửa các câu trả lời cũ đã lỗi thời trừ khi bạn đang cập nhật câu trả lời thực tế lên phiên bản hiện đại chính xác. Thêm dấu cách không cập nhật nó. Đặc biệt không để nó sống lại sau 3 năm.
Fogmeister

30

Đây là mã nhanh cho nó;)

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
Có gì với tất cả các dấu chấm phẩy? ;)
Christian

@Christian dấu chấm phẩy đặt loại của hằng số XungAnimation. Nó không cần thiết để sử dụng nhưng nó có xu hướng tăng độ rõ ràng của mã khi phía bên phải của một phép gán không cho biết rõ nó sẽ gán kiểu gì.
Scott Chow

@ScottChow Tôi đoán bạn đang nói về dấu hai chấm. Nhận xét của tôi là một trò đùa với câu trả lời ban đầu, vì không cần dấu chấm phẩy với Swift. Đoán nó đã không còn rõ ràng bây giờ khi câu trả lời đã được chỉnh sửa rất nhiều :)
Christian

9

Mã nhanh bị thiếu a fromValue, tôi đã phải thêm nó để làm cho nó hoạt động.

pulseAnimation.fromValue = NSNumber(float: 0.0)

Cũng forKeynên được thiết lập, nếu removeAnimationkhông sẽ không hoạt động.

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)
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.