web-dev-qa-db-ja.com

繰り返す前のCAKeyframeAnimationの遅延

repeatCount = HUGE_VALFを使用して永遠に繰り返したいCAKeyframeAnimationアニメーションがあります。アニメーションの長さは2秒ですが、各サイクルの前に3秒休止したいと思います。

私がそれをすることを考えることができる唯一の2つの方法は次のとおりです：

  1. アニメーション全体を最後の5秒間にし、keyTimesと値を追加して、5sアニメーションの最後の3秒間に探している一時停止を取得します。これはちょっとハッキーな感じがします。

  2. アニメーションを1回だけ繰り返してから、performSelector:afterDelay:2のようなものを使用してアニメーションを再度実行し、以下同様に追加します。これも汚れた感じがします。また、5秒ごとにaddAnimation:を呼び出す必要があることを意味しますが、パフォーマンスの観点から最適かどうかはわかりません。

私が見逃しているかもしれない別のオプションはありますか？これらの2つの方法の1つは他よりも優れていますか？

iphoneioscore-animationcore-graphics
34
samvermette

AppleのMKUserLocationViewのアニメーションをダンプすることで、彼らがどのようにそれを行っているかを見ることができました。これがCAAnimationGroupの目的であることがわかりました。 2秒のアニメーションを5秒のアニメーショングループにカプセル化すると、2秒のアニメーションに続いて3秒の遅延が発生します。

CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 5;
animationGroup.repeatCount = INFINITY;

CAMediaTimingFunction *easeOut = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

CABasicAnimation *pulseAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
pulseAnimation.fromValue = @0.0;
pulseAnimation.toValue = @1.0;
pulseAnimation.duration = 2;
pulseAnimation.timingFunction = easeOut;

animationGroup.animations = @[pulseAnimation];

[ringImageView.layer addAnimation:animationGroup forKey:@"Pulse"];
125
samvermette

Swift 3：のsamvermetteの答え

let animationGroup = CAAnimationGroup()
animationGroup.duration = 5;
animationGroup.repeatCount = .infinity

let easeOut = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

let pulseAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
pulseAnimation.fromValue = 0
pulseAnimation.toValue = 1.0
pulseAnimation.duration = 2
pulseAnimation.timingFunction = easeOut

animationGroup.animations = [pulseAnimation]

ringImageView.layer.add(animationGroup, forKey: "Pulse")
8
Ivan Mir

テスト済みSwift 4.2

次の拡張機能を実装するだけで、任意のUIコンポーネントでNice PulseAnimationを取得できます

//MARK:- Pulse animation
extension UIView {

    func applyPulse(_ apply: Bool = true) {
        if apply {
            let animation = CABasicAnimation(keyPath: "transform.scale")
            animation.toValue = 1.5
            animation.duration = 0.8
            animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)
            animation.autoreverses = true
            animation.repeatCount = Float.infinity
            self.layer.add(animation, forKey: "pulsing")
        } else {
            self.layer.removeAnimation(forKey: "pulsing")
        }
    }
}

宇佐瀬：

  1. 始めること

    yourUiComponent.applyPulse（）

  2. 止まる

    yourUiComponent.applyPulse（false）

0
dip