Comment Avez-Vous CAKeyframeAnimation Échelle?

Je veux créer une animation avec plusieurs images clés. Je veux que ma Couche (un bouton dans ce cas)
à l'échelle jusqu'à 1,5 puis vers le bas à 0,5, alors jusqu'à 1,2 puis vers le bas à 0,8 ensuite 1.0.

Je tiens également à Vitessedébut et Vitessefin de chaque image-clé.

Comme vous pouvez l'imaginer, cela va créer un Élastique/Bounce effet sur le spot.

Dans d'autres parties de mon application j'ai été en utilisant CAKeyframeAnimation comme ceci (voir code ci-dessous).
Cela crée un semblable élastique de l'animation, mais pour la position x et y.

Puis-je adapter le code ci-dessous à sur l'échelle au lieu de la position?

Vous en remercie d'avance!

- (CAAnimation*)monInAnimation {
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path,NULL,113,320);
CGPathAddLineToPoint(path, NULL, 113.5, 283);
CGPathAddLineToPoint(path, NULL, 113.5, 179);
CGPathAddLineToPoint(path, NULL, 113.5, 207);  
CGPathAddLineToPoint(path, NULL, 113.5, 187);
CGPathAddLineToPoint(path, NULL, 113.5, 199);
CGPathAddLineToPoint(path, NULL, 113.5, 193);
CGPathAddLineToPoint(path, NULL, 113.5, 195);
CGPathAddLineToPoint(path, NULL, 113.5, 194);
CAKeyframeAnimation *
animation = [CAKeyframeAnimation 
animationWithKeyPath:@"position"];
[animation setPath:path];
[animation setDuration:1.5];
[animation setCalculationMode:kCAAnimationLinear];
NSArray *arr = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], 
[NSNumber numberWithFloat:0.12], 
[NSNumber numberWithFloat:0.24], 
[NSNumber numberWithFloat:0.36], 
[NSNumber numberWithFloat:0.48],
[NSNumber numberWithFloat:0.60],
[NSNumber numberWithFloat:0.72],
[NSNumber numberWithFloat:0.84],
[NSNumber numberWithFloat:1.0],nil];
[animation setKeyTimes:arr];
[animation setTimingFunctions:[NSArray arrayWithObjects:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], nil]];
//[animation setAutoreverses:YES];
CFRelease(path);
return animation;

}

- (void)monBtnIn {
[monButton.layer setPosition:CGPointMake(113.5,194)];
[monButton.layer addAnimation:[self monInAnimation] 
forKey:@"position"];

}

OriginalL'auteur Jonathan | 2010-01-04

  1. 27

    Deux solutions pour vous:

    Tout d'abord, Vous pouvez également animer la transformation de la propriété.

    À l'aide de Brad code, mais à l'aide de @"transformer" pour le chemin d'accès clé. Le principal avantage étant que vous n'avez pas à calculer le cadre réel, mais au lieu de fournir un simple facteur d'échelle:

    Objective-C:

    CAKeyframeAnimation *boundsOvershootAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
CATransform3D startingScale = CATransform3DScale (layer.transform, 0, 0, 0);
CATransform3D overshootScale = CATransform3DScale (layer.transform, 1.2, 1.2, 1.0);
CATransform3D undershootScale = CATransform3DScale (layer.transform, 0.9, 0.9, 1.0);
CATransform3D endingScale = layer.transform; 
NSArray *boundsValues = [NSArray arrayWithObjects:[NSValue valueWithCATransform3D:startingScale],
[NSValue valueWithCATransform3D:overshootScale],
[NSValue valueWithCATransform3D:undershootScale],
[NSValue valueWithCATransform3D:endingScale], nil];
[boundsOvershootAnimation setValues:boundsValues];
NSArray *times = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:0.5f],
[NSNumber numberWithFloat:0.9f],
[NSNumber numberWithFloat:1.0f], nil];    
[boundsOvershootAnimation setKeyTimes:times];
NSArray *timingFunctions = [NSArray arrayWithObjects:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], 
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
nil];
[boundsOvershootAnimation setTimingFunctions:timingFunctions];
boundsOvershootAnimation.fillMode = kCAFillModeForwards;
boundsOvershootAnimation.removedOnCompletion = NO;

    Swift 4:

    let boundsOvershootAnimation = CAKeyframeAnimation(keyPath: "transform")
let startingScale = CATransform3DScale(layer.transform, 0, 0, 0)
let overshootScale = CATransform3DScale(layer.transform, 1.2, 1.2, 1.0)
let undershootScale = CATransform3DScale(layer.transform, 0.9, 0.9, 1.0)
let endingScale = layer.transform
boundsOvershootAnimation.values = [startingScale, overshootScale, undershootScale, endingScale]
boundsOvershootAnimation.keyTimes = [0.0, 0.5, 0.9, 1.0].map { NSNumber(value: $0) }
boundsOvershootAnimation.timingFunctions = [
CAMediaTimingFunction(name:kCAMediaTimingFunctionEaseOut),
CAMediaTimingFunction(name:kCAMediaTimingFunctionEaseInEaseOut),
CAMediaTimingFunction(name:kCAMediaTimingFunctionEaseInEaseOut)
]
boundsOvershootAnimation.fillMode = kCAFillModeForwards
boundsOvershootAnimation.isRemovedOnCompletion = false

    Deuxième, et probablement plus facile, est à l'aide de FTUtils, open source wrapper de base de l'animation. Il comprend un stock "élastique" de l'animation.

    Vous pouvez l'obtenir:
    http://github.com/neror/ftutils

    Cela fonctionne très bien... Merci. J'ai ajouté un .la durée de toi. Je vais vérifier FTUtilis - Grâce.
    Vous pouvez simplement utiliser des nombres en utilisant chemin d'accès clé comme "transformer les.l'échelle". N'est-ce pas ?

    OriginalL'auteur Corey Floyd

  2. 12

    transform.scale, n'importe qui?

    let anim = CAKeyframeAnimation(keyPath: "transform.scale")
anim.values = [0, 1, 0, 1, 0, 1, 0]
anim.duration = 4.0
smallView.layer.addAnimation(anim, forKey: "what")

    Totalement indépendants, si tu vas utiliser des flotteurs dans les valeurs de tableau, vous devez les ajouter en tant que NSNumbers, sinon on venait de finir comme 0s!

    anim.values = [0.0, 1.2, 0.9, 1.0].map { NSNumber(double: $0) }
    J'ai été à l'aide de "transformer", mais qui a provoqué des problèmes avec rotationMode = kCAAnimationRotateAuto. À l'aide de "transformer.l'échelle" des valeurs de la déclaration de plus simple ainsi. Merci beaucoup.

    OriginalL'auteur Mazyod

  3. 8

    Plutôt que de définir le chemin d'accès de votre CAKeyframeAnimation, vous devrez définir les images elles-mêmes. J'ai créé un "pop-in" effet avant par l'animation de la taille de l'limites d'un calque:

    CAKeyframeAnimation *boundsOvershootAnimation = [CAKeyframeAnimation animationWithKeyPath:@"bounds.size"];
CGSize startingSize = CGSizeZero;
CGSize overshootSize = CGSizeMake(targetSize.width * (1.0f + POPINOVERSHOOTPERCENTAGE), targetSize.height * (1.0f + POPINOVERSHOOTPERCENTAGE));
CGSize undershootSize = CGSizeMake(targetSize.width * (1.0f - POPINOVERSHOOTPERCENTAGE), targetSize.height * (1.0f - POPINOVERSHOOTPERCENTAGE));
NSArray *boundsValues = [NSArray arrayWithObjects:[NSValue valueWithCGSize:startingSize],
[NSValue valueWithCGSize:overshootSize],
[NSValue valueWithCGSize:undershootSize],
[NSValue valueWithCGSize:targetSize], nil];
[boundsOvershootAnimation setValues:boundsValues];
NSArray *times = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:0.5f],
[NSNumber numberWithFloat:0.9f],
[NSNumber numberWithFloat:1.0f], nil];    
[boundsOvershootAnimation setKeyTimes:times];
NSArray *timingFunctions = [NSArray arrayWithObjects:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], 
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
nil];
[boundsOvershootAnimation setTimingFunctions:timingFunctions];
boundsOvershootAnimation.fillMode = kCAFillModeForwards;
boundsOvershootAnimation.removedOnCompletion = NO;

    où POPINOVERSHOOTPERCENTAGE est la fraction par laquelle je voulais un dépassement de la cible de la taille de la couche.

    Merci Brad. C'est exactement le type de contrôle que j'était après.

    OriginalL'auteur Brad Larson

  4. 4

    Je ne sais pas si vous pouvez utiliser un CAKeyframeAnimation pour animer l'échelle d'une UIView, mais vous pouvez le faire avec un CABasicAnimation et le réglage de la fromValue et toValue propriétés, et en les utilisant pour animer la propriété transform:

    - (CAAnimation*)monInAnimation 
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(3.0, 3.0, 3.0)];
[animation setDuration:1.5];
[animation setAutoreverses:YES];
return animation;
}
- (IBAction)monBtnIn 
{
[monButton.layer addAnimation:[self monInAnimation] forKey:@"transform"];
}
    Merci akosma! J'ai essayé ce mode de mise à l'échelle, mais je ne peux pas comprendre comment ajouter plus de 2 images clés. Avec "setAutoreverses' "il va de A à B puis à A. je veux aller de A à B à C à D. savez-vous si vous pouvez ajouter plus de "fromValues" et "ToValues'? Merci
    Jetez un oeil à la CAAnimationGroup classe. Il hérite de CAAnimation, et avec elle, vous pouvez "chaîne" personne CABasicAnimations, chacune avec sa propre fromValue et toValue. Cela pourrait-il être ce que vous recherchez?
    Scratch, j'ai vérifié les docs et il semble que des animations dans une CAAnimationGroup sont exécutées simultanément, et non pas l'un après l'autre. La poisse. Vous devez définir des délégués pour vos animations, et le début d'une nouvelle animation lorsque le précédent est terminé.

    OriginalL'auteur Adrian Kosmaczewski