Objective-C - CABasicAnimation application des modifications après l'animation?

Lorsque vous ajouter une animation à un calque, l'animation ne change pas les propriétés de la couche. Au lieu de cela, le système crée une copie de la couche. Le calque d'origine est appelé le modèle de la couche, et la copie est appelée la couche de présentation. La couche de présentation de la modification des propriétés au fil de l'animation, mais le modèle de la couche des propriétés restent inchangées.

Lorsque vous retirez l'animation, le système détruit la couche de présentation, ne laissant que la couche du modèle, et le modèle de la couche des propriétés de contrôler la manière dont la couche est dessiné. Donc, si le modèle de la couche propriétés ne correspondent pas à la finale, animée des valeurs de la couche de présentation des propriétés, la couche de réinitialiser instantanément à son apparence avant de l'animation.

Pour résoudre ce problème, vous devez définir le modèle de la couche des propriétés pour les valeurs finales de l'animation, et puis ajouter à l'animation de la couche. Vous voulez le faire dans cet ordre, car la modification d'une propriété de calque pouvez ajouter un implicite animation de la propriété, ce qui serait en conflit avec l'animation que vous souhaitez ajouter explicitement. Vous voulez vous assurer que votre explicite animation remplace l'implicite de l'animation.

Alors, comment faites-vous tout cela? La recette de base ressemble à ceci:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:myLayer.position];
layer.position = newPosition; //HERE I UPDATE THE MODEL LAYER'S PROPERTY
animation.toValue = [NSValue valueWithCGPoint:myLayer.position];
animation.duration = .5;
[myLayer addAnimation:animation forKey:animation.keyPath];

Je n'ai pas utilisé une animation de groupe, donc je ne sais pas exactement ce que vous pourriez avoir besoin de changer. Je viens de l'ajouter à chaque animation séparément à la couche.

Je trouve aussi qu'il est plus facile d'utiliser le +[CATransaction setCompletionBlock:] méthode pour définir un gestionnaire d'achèvement pour une ou plusieurs animations, au lieu d'essayer d'utiliser une animation du délégué. Vous définissez l'opération d'achèvement du bloc, puis ajouter les animations:

[CATransaction begin]; {
    [CATransaction setCompletionBlock:^{
        [self.imageView removeFromSuperview];
    }];
    [self addPositionAnimation];
    [self addScaleAnimation];
    [self addOpacityAnimation];
} [CATransaction commit];

Heres un exemple rapide qui peut aider quelqu'un

C'est une animation sur un calque de dégradé. C'est l'animation de la .locations propriété.

Le point le plus critique en tant que @robMayoff réponse explique entièrement, c'est que:

Étonnamment, lorsque vous faites un calque d'animation, de mettre la valeur finale, tout d'abord, avant de commencer l'animation!

Ce qui suit est un bon exemple parce que l'animation se répète à l'infini.

Lorsque l'animation se répète à l'infini, vous aurez l'occasion d'apercevoir un "flash" entre les animations, si vous faites une erreur classique de "l'oubli pour définir la valeur avant de l'animer!"

var previousLocations: [NSNumber] = []
...

func flexTheColors() { //"flex" the color bands randomly

    let oldValues = previousTargetLocations
    let newValues = randomLocations()
    previousTargetLocations = newValues

    //IN FACT, ACTUALLY "SET THE VALUES, BEFORE ANIMATING!"
    theLayer.locations = newValues

    //AND NOW ANIMATE:
    CATransaction.begin()

    //and by the way, this is how you endlessly animate:
    CATransaction.setCompletionBlock{ [weak self] in
        if self == nil { return }
        self?.animeFlexColorsEndless()
    }

    let a = CABasicAnimation(keyPath: "locations")
    a.isCumulative = false
    a.autoreverses = false
    a.isRemovedOnCompletion = true
    a.repeatCount = 0

    a.fromValue = oldValues
    a.toValue = newValues

    a.duration = (2.0...4.0).random()

    theLayer.add(a, forKey: nil)
    CATransaction.commit()
}

Suivantes peuvent aider à clarifier quelque chose pour les nouveaux programmeurs. Notez que dans mon code je fais ceci:

    //IN FACT, ACTUALLY "SET THE VALUES, BEFORE ANIMATING!"
    theLayer.locations = newValues

    //AND NOW ANIMATE:
    CATransaction.begin()
    ...set up the animation...
    CATransaction.commit()

cependant, dans l'exemple de code dans l'autre réponse, c'est comme ça:

    CATransaction.begin()
    ...set up the animation...
    //IN FACT, ACTUALLY "SET THE VALUES, BEFORE ANIMATING!"
    theLayer.locations = newValues
    CATransaction.commit()

Quant à la position de la ligne de code où vous "définir les valeurs, avant d'animer!" ..

C'est en fait tout à fait normal d'avoir cette ligne en fait "à l'intérieur" le début de validation des lignes de code. Aussi longtemps que vous le faites avant le .commit().

Je le mentionne seulement qu'il peut confondre les nouveaux animateurs.