CABasicAnimation для эмуляции анимации с «импульсным» эффектом на фигуре некруглой формы - PullRequest
Новая
       105

CABasicAnimation для эмуляции анимации с «импульсным» эффектом на фигуре некруглой формы

0 голосов
/ 01 мая 2020

Я использую CBasicAnimation для создания пульсирующего эффекта на кнопке. Эффект вытесняет форму UIView, только с рамкой.

Хотя анимация работает должным образом, я не получаю желаемого эффекта при использовании CABasicAnimation(keyPath: "transform.scale").

Я использую группу анимации с 3 анимациями: borderWidth, transform.scale и opacity. 

class Pulsing: CALayer {

var animationGroup = CAAnimationGroup()

var initialPulseScale:Float = 1
var nextPulseAfter:TimeInterval = 0
var animationDuration:TimeInterval = 1.5
var numberOfPulses:Float = Float.infinity


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

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}


init (numberOfPulses:Float = Float.infinity, position:CGPoint, pulseFromView:UIView, rounded: CGFloat) {
    super.init()


    self.borderColor = UIColor.black.cgColor



    self.contentsScale = UIScreen.main.scale
    self.opacity = 1
    self.numberOfPulses = numberOfPulses
    self.position = position

    self.bounds = CGRect(x: 0, y: 0, width: pulseFromView.frame.width, height: pulseFromView.frame.height)
    self.cornerRadius = rounded


    DispatchQueue.global(qos: DispatchQoS.QoSClass.default).async {
        self.setupAnimationGroup(view: pulseFromView)

        DispatchQueue.main.async {
             self.add(self.animationGroup, forKey: "pulse")
        }
    }



}

func borderWidthAnimation() -> CABasicAnimation {
    let widthAnimation = CABasicAnimation(keyPath: "borderWidth")
    widthAnimation.fromValue = 2
    widthAnimation.toValue = 0.5
    widthAnimation.duration = animationDuration

    return widthAnimation
}


func createScaleAnimation (view:UIView) -> CABasicAnimation {
    let scale = CABasicAnimation(keyPath: "transform.scale")
    DispatchQueue.main.async {
            scale.fromValue = view.layer.value(forKeyPath: "transform.scale")
    }

    scale.toValue = NSNumber(value: 1.1)
    scale.duration = 1.0
    scale.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

    return scale
}

func createOpacityAnimation() -> CABasicAnimation {
    let opacityAnimation = CABasicAnimation(keyPath: "opacity")
    opacityAnimation.duration = animationDuration
    opacityAnimation.fromValue = 1
    opacityAnimation.toValue = 0
    opacityAnimation.fillMode = .removed

    return opacityAnimation
}

func setupAnimationGroup(view:UIView) {
    self.animationGroup = CAAnimationGroup()
    self.animationGroup.duration = animationDuration + nextPulseAfter
    self.animationGroup.repeatCount = numberOfPulses


    self.animationGroup.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.default)

    self.animationGroup.animations = [createScaleAnimation(view: view), borderWidthAnimation(), createOpacityAnimation()]
}



}



class ViewController: UIViewController {


@IBOutlet weak var pulsingView: UIView!

let roundd:CGFloat = 20

override func viewDidLoad() {
    super.viewDidLoad()
    pulsingView.layer.cornerRadius = roundd
    let pulse = Pulsing(
        numberOfPulses: .greatestFiniteMagnitude,
        position: CGPoint(x: pulsingView.frame.width/2,
                          y: pulsingView.frame.height/2)
        , pulseFromView: pulsingView, rounded: roundd)

    pulse.zPosition = -10
    self.pulsingView.layer.insertSublayer(pulse, at: 0)
}




}

Моя проблема заключается в том, что transform.scale поддерживает соотношение сторон UIView, из которого он пульсирует во время анимации.

Как я могу заставить пульс расти, чтобы было одинаковое расстояние как по высоте, так и по ширине? Смотрите скриншот.

Scaling of button

1 Ответ

1 голос
/ 04 мая 2020

Масштабирование ширины и высоты одним и тем же фактором приведет к неравному расстоянию по краям. Вам нужно увеличить ширину и высоту слоя на одно и то же значение. Это операция сложения, а не умножения. Теперь для этого пульсирующего эффекта вам нужно анимировать границы слоя.

Если вы хотите, чтобы расстояние между краями было динамическим c, выберите масштабный коэффициент и примените его к одному измерению. Выбираете ли вы ширину или высоту, значения не имеют, пока они применяются только к одному. Допустим, вы выбираете ширину для увеличения в 1,1 раза. Вычислите свою целевую ширину, затем вычислите дельту. 

let scaleFactor: CGFloat = 1.1
let targetWidth = view.bounds.size.width * scaleFactor
let delta = targetWidth - view.bounds.size.width

Получив дельту, примените ее к границам слоя в измерениях x и y. Воспользуйтесь методом insetBy(dx:) для вычисления полученного прямоугольника. 

let targetBounds = self.bounds.insetBy(dx: -delta / 2, dy: -delta / 2)

Для ясности я переименовал ваш метод createScaleAnimation(view:) в createExpansionAnimation(view:). Связав все это вместе, мы имеем: 

func createExpansionAnimation(view: UIView) -> CABasicAnimation {

    let anim = CABasicAnimation(keyPath: "bounds")

    DispatchQueue.main.async {

        let scaleFactor: CGFloat = 1.1
        let targetWidth = view.bounds.size.width * scaleFactor
        let delta = targetWidth - view.bounds.size.width

        let targetBounds = self.bounds.insetBy(dx: -delta / 2, dy: -delta / 2)

        anim.duration = 1.0
        anim.fromValue = NSValue(cgRect: self.bounds)
        anim.toValue = NSValue(cgRect: targetBounds)
    }

    return anim
}
...