How do I find correct position of UIButton on swift?

Question

Hi, I try to apply a pulse effection to button in swift.

But everytime I apply it, a pulse effection is always above the button.

@IBAction func btnAction(_ sender: UIButton) {
    var position = sender.center

    let pulse = PulseAnimation(numberOfPulses: Float.infinity, radius: 100, position: position) }

How can I find Real CGPoint of UIButton? Thanks.

PulseAnimation.swift

class PulseAnimation: CALayer {

var animationGroup = CAAnimationGroup()
var animationDuration: TimeInterval = 1.5
var radius: CGFloat = 200
var numberOfPulses: Float = 10

override init(layer: Any) {
    super.init(layer: layer)
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

init(numberOfPulses: Float = 10, radius: CGFloat, position: CGPoint) {
    super.init()
    self.backgroundColor = UIColor.black.cgColor
    self.contentsScale = UIScreen.main.scale
    self.opacity = 0
    self.radius = radius
    self.numberOfPulses = numberOfPulses
    self.position = position

    self.bounds = CGRect(x: 0, y: 0, width: radius*2, height: radius*2)
    self.cornerRadius = radius

    DispatchQueue.global(qos: DispatchQoS.QoSClass.default).async {
        self.setupAnimationGroup()
        DispatchQueue.main.async {
            self.add(self.animationGroup, forKey: "pulse")
        }
    }
}

func scaleAnimation() -> CABasicAnimation {
    let scaleAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
    scaleAnimation.fromValue = NSNumber(value: 0)
    scaleAnimation.toValue = NSNumber(value: 1)
    scaleAnimation.duration = animationDuration
    return scaleAnimation
}

func createOpacityAnimation() -> CAKeyframeAnimation {
    let opacityAnimation = CAKeyframeAnimation(keyPath: "opacity")
    opacityAnimation.duration = animationDuration
    opacityAnimation.keyTimes = [0, 0.3, 1]
    opacityAnimation.values = [0.4, 0.8, 0]
    return opacityAnimation
}
func setupAnimationGroup() {
    self.animationGroup.duration = animationDuration
    self.animationGroup.repeatCount = numberOfPulses
    let defaultCurve = CAMediaTimingFunction(name: .default)
    self.animationGroup.timingFunction = defaultCurve
    self.animationGroup.animations = [scaleAnimation(), createOpacityAnimation()]
}
}

It is a class for applying pulse effection. It uses CGPoint for animating it and just use position to self.position. I dunno why the position is incorrect. Thanks to answer.

Use of unresolved identifier 'PulseAnimation' what is that PulseAnimation? Is that a library you are using? please specify — JBarros35, Feb 13 '20 at 11:37
What view is your button in, and what view are you adding the pulse to? The button centre will be relative to its superview. — James P, Feb 13 '20 at 12:01
The button is in StackView. And I wanna overlap the pulse animation to the button in stackview. — user12849232, Feb 13 '20 at 12:06

OKMIN · Accepted Answer · 2020-02-13T12:23:44.040

1

Real CGPoint what you want to know is a CGPoint that has x range 0~sender.frame.width and y range 0~sender.height Try this. :)

    @IBAction func buttonAction(_ sender: UIButton) {
        let position = CGPoint(x: sender.frame.width * 0.5, y: sender.frame.height * 0.5)

        let pulse = PulseAnimation(numberOfPulses: Float.infinity, radius: 100, position: position)
        sender.layer.addSublayer(pulse)

    }

edited Feb 13 '20 at 12:23

answered Feb 13 '20 at 12:04

OKMIN

97
5

Sorry, it isn't working to me. I placed the button in the stack view. But this code places the pulse animation to upper left corner. – user12849232 Feb 13 '20 at 12:12
And the button isn't placed on center. – user12849232 Feb 13 '20 at 12:13
It doesn't matter. I added other screenshot. its ViewController had 5 buttons in a horizontalStackView with same code. Check it// – OKMIN Feb 13 '20 at 12:24
It's working! Thanks to answer :) Maybe I missed some codes – user12849232 Feb 13 '20 at 12:33
Good for you :) – OKMIN Feb 13 '20 at 12:46

score 0 · Answer 2 · answered Feb 13 '20 at 11:47

I don't know what the class PulseAnimation does but with a search I could find a topic about it and applied to my code for testing the expected effect.

  @IBAction func numberHit(_ sender: UIButton) {
        let pulseAnimation = CABasicAnimation(keyPath: "opacity")
        pulseAnimation.duration = 30
        pulseAnimation.fromValue = 0
        pulseAnimation.toValue = 1
        pulseAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        pulseAnimation.autoreverses = true
        pulseAnimation.repeatCount = .greatestFiniteMagnitude
        sender.layer.add(pulseAnimation, forKey: nil)
}

Please checkout this: Swift Pulse Animation

How do I find correct position of UIButton on swift?

2 Answers2