¿Cómo puedo crear un CABasicAnimation para múltiples propiedades?

Tengo este código para animar un CALayer elemento.

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];

Mi pregunta es, ahora todo funciona bien, me gustaría otro atributo del mismo elemento al mismo tiempo. He visto que usted puede hacer aditivo animaciones y esas cosas.

Mi pregunta es:

  • Es el aditivo atributo de la mejor y única manera de hacer eso? (animación a la vez varias propiedades de un mismo objeto a la vez )

Gracias!

  • ¿Qué hace el radio de la ruta de la clave de hacer? ¿Qué tipo de capa que se va a añadir esta animación? No sé de un radio de propiedad en cualquier CA objetos de la capa.
  • Me extendió la CALayer clase para hacer un custom objeto redondo. Funciona muy bien gracias a tus respuestas 🙂
InformationsquelleAutor Mc- | 2012-06-07

3 Kommentare

  1. 65

    Puede crear un CAAnimationGroup y personalizar la duración y la función de temporización en él. A continuación, puede crear todos sus CABasicAnimations, fijar su valor y agregarlos al grupo de animación. Por último, agregar el grupo de animación a la capa que se está animando.

    Aquí un ejemplo:

    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"];
    • Tenga en cuenta que todas las animaciones en un grupo debe realizar cambios a la misma capa. He descubierto la manera difícil, que no se puede grupo de animaciones aplicadas a las diferentes capas con CAAnimationGroup.
    • Por CIERTO, ¿qué hace el radio de la ruta de la clave de hacer? ¿Qué tipo de capa que se va a añadir esta animación?
    • Lo siento… me tomó del código de la OP. Probablemente debe ser cornerRadius. También, el OP está pidiendo cómo animar «múltiples propiedades del mismo objeto»
    • En cuanto al radio de la ruta de la clave, yo debería haber publicado mi comentario sobre la OPs’ post, no el tuyo. No estoy seguro de que el código funciona, ya que la ruta de la clave que utiliza para crear la animación en realidad determina que la propiedad de la capa de destino que usted está animando.
    • Si quieres lograr algún tipo de agrupación, pero cada animación anima a una capa diferente (CAAnimationGroup no funciona en este caso), el uso de CATransaction lugar.
    • se realizan los tres al mismo tiempo, hay una manera de hacerlos secuencial?
    • Ha habido varias preguntas sobre secuencial, encadenados, insertar al azar sinónimo aquí, etc. las animaciones de Desbordamiento de Pila. Usted debe ser capaz de encontrar mediante la búsqueda de una de esas palabras.
    • Gracias, pensé que esta respuesta se acerca encadenado animaciones por qué me estaba haciendo la pregunta. Mi error.
    • Qué necesitamos para establecer el «grupo» de duración? Lo que si quiero que cada animación tiene su propia duración?
    • ¿Alguien sabe si se tiene que importar CoreAnimation marco para que esto funcione?

  2. 6
    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)

    Esto es para la nueva actualización de swift (swift 3). El código debe incluir un objeto en la final, es decir, UIButton, UILabel, algo que puede animar. En mi código era el loginButton (que era el título o nombre).

  3. 2

    En Swift-3 podemos utilizar CAAnimationGroup de la siguiente manera :-

            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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea