如何为多个属性创建 CABasicAnimation？

Posted 2023-02-23

【中文标题】如何为多个属性创建 CABasicAnimation？

【英文标题】：How can I create an CABasicAnimation for multiple properties?

【发布时间】：2012-06-07 19:03:11

【问题描述】：

我有这段代码来为 CALayer 元素设置动画。

CABasicAnimation *makeBiggerAnim=[CABasicAnimation animationWithKeyPath:@"radius"];
makeBiggerAnim.duration=0.2;
makeBiggerAnim.fromValue=[NSNumber numberWithDouble:20.0];
makeBiggerAnim.toValue=[NSNumber numberWithDouble:40.0];
makeBiggerAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

我的问题是，现在一切正常，我想同时使用同一元素的另一个属性。我看到你可以做附加动画之类的东西。

我的问题是：

附加属性是最好的/唯一的方法吗？ （一次动画同一对象的多个属性）

谢谢！

【问题讨论】：

半径键路径有什么作用？您要将此动画添加到哪种图层？我不知道任何 CA 图层对象的半径属性。

我扩展了 CALayer 类来做一个自定义的圆形对象。感谢您的回答，它非常有效:)

【参考方案1】：

您可以创建一个CAAnimationGroup 并在其上自定义持续时间和计时功能。然后创建所有CABasicAnimations，将它们设置为值并将它们添加到动画组中。最后，将动画组添加到您正在制作动画的图层中。

这里是一个例子：

CABasicAnimation *makeBiggerAnim=[CABasicAnimation animationWithKeyPath:@"cornerRadius"];
makeBiggerAnim.fromValue=[NSNumber numberWithDouble:20.0];
makeBiggerAnim.toValue=[NSNumber numberWithDouble:40.0];

CABasicAnimation *fadeAnim=[CABasicAnimation animationWithKeyPath:@"opacity"];
fadeAnim.fromValue=[NSNumber numberWithDouble:1.0];
fadeAnim.toValue=[NSNumber numberWithDouble:0.0];

CABasicAnimation *rotateAnim=[CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
rotateAnim.fromValue=[NSNumber numberWithDouble:0.0];
rotateAnim.toValue=[NSNumber numberWithDouble:M_PI_4];

// Customizing the group with duration etc, will apply to all the
// animations in the group
CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration = 0.2;
group.repeatCount = 3;
group.autoreverses = YES;
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.animations = @[makeBiggerAnim, fadeAnim, rotateAnim];

[myLayer addAnimation:group forKey:@"allMyAnimations"];

【讨论】：

请注意，组中的所有动画都必须对同一图层进行更改。我发现你不能用 CAAnimationGroup 对应用于不同层的动画进行分组。

顺便说一句，半径键路径有什么作用？您要将此动画添加到哪种图层？

@DuncanC 对不起...我从 OP 的代码中获取了它。它可能应该是cornerRadius。此外，OP 正在询问如何为“同一对象的多个属性”设置动画

如果你想实现某种分组但每个动画动画不同的层（CAAnimationGroup 在这种情况下不起作用），请改用 CATransaction。

我们需要设置“组”的持续时间吗？如果我希望每个动画都有自己的持续时间怎么办？

【参考方案2】：

let groupAnimation = CAAnimationGroup()
groupAnimation.beginTime = CACurrentMediaTime() + 0.5
groupAnimation.duration = 0.5


let scaleDown = CABasicAnimation(keyPath: "transform.scale")
scaleDown.fromValue = 3.5
scaleDown.toValue = 1.0
let rotate = CABasicAnimation(keyPath: "transform.rotation")
rotate.fromValue = .pi/10.0
rotate.toValue = 0.0
let fade = CABasicAnimation(keyPath: "opacity")
fade.fromValue = 0.0
fade.toValue = 1.0

groupAnimation.animations = [scaleDown,rotate,fade]
loginButton.layer.add(groupAnimation, forKey: nil)

这是 swift (swift 3) 的最新更新。您的代码应在末尾包含一个对象，即 UIButton、UILabel，您可以制作动画。在我的代码中，它是 loginButton（即标题或名称）。

【参考方案3】：

在 Swift-3 中，我们可以使用 CAAnimationGroup 如下：-

        let position = CAKeyframeAnimation(keyPath: "position")
        position.values = [ NSValue.init(cgPoint: .zero) , NSValue.init(cgPoint: CGPoint(x: 0, y: -20))  ,  NSValue.init(cgPoint: .zero) ]
        position.timingFunctions = [ CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut),  CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)  ]
        position.isAdditive = true
        position.duration = 1.2

        let rotation = CAKeyframeAnimation(keyPath: "transform.rotation")
        rotation.values = [ 0, 0.14, 0 ]
        rotation.duration = 1.2
        rotation.timingFunctions = [ CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut),  CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)  ]

        let fadeAndScale = CAAnimationGroup()
        fadeAndScale.animations = [ position, rotation]
        fadeAndScale.duration = 1