2010-06-11 4 views
3

Je voudrais animer un gradient radial pour rétrécir et développer le rayon interne, comme s'il pulsait.Puis-je animer un dégradé radial dans l'iPhone?

En ce moment je rends le dégradé avec CGGradient, mais je ne suis pas sûr de savoir comment l'animer. Je l'ai vu ce sujet

Can you animate gradients using Quartz in an iPhone?

Ce qui explique comment animer un gradient linéaire avec CAGradientLayer, mais il ne semble pas que cela va dessiner un dégradé radial.

Existe-t-il un moyen facile d'animer un CGGradient ou un moyen de créer un dégradé radial CAGradientLayer?

Toutes les pensées sont appréciées.

+0

Afficher le calque sur une minuterie? –

Répondre

2

Si seulement Core Image était sur le téléphone, ce serait trivial. Un filtre animable est ce dont vous avez besoin. ;-)

CAGradientLayer permet d'animer ses propriétés, mais il ne prend actuellement en charge que les dégradés linéaires. La seule chose à laquelle je peux penser si vous voulez animer avec Core Animation est d'animer la transformation de la vue dans laquelle vous dessinez votre dégradé.

Vous pouvez facilement animer la transformation de n'importe quelle vue. Dessinez simplement votre dégradé dans la vue comme vous le faites déjà, puis animez la transformation en utilisant la mise à l'échelle. En utilisant des films d'animation, ce serait quelque chose comme:

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"]; 
[anim setFromValue:[NSValue valueWithCATransform3D:CATransform3DIdentity]]; 
// Scale x and y up 
[anim setToValue:[NSValue valueWithCATransform3D: 
       CATransform3DMakeScale (1.0f, 1.0f,0.0f)]]; 
[anim setAutoreverses:YES]; 
[anim setRepeatCount:HUGE_VALF]; 

[[gradientView layer] addAnimation:anim]; 

Malheureusement, cela ressemblerait à étendre et contracter plus de pulser, je pense (même si je ne l'ai pas essayé).

Je pense que si vous voulez une véritable pulsation avec votre dégradé à ce stade, vous devez probablement faire l'animation manuellement en utilisant votre propre minuterie. Il suffit de re-dessiner périodiquement en changeant votre valeur de rayon interne au fur et à mesure. Pouah. Je ne suis pas absolument sûr que ce soit la seule façon, mais je n'ai pas encore vu une animation d'impulsion convaincante sur le téléphone avec un gradient que vous voulez.

Il y a une autre idée que j'aimerais essayer à un moment donné. Core Animation permet maintenant d'animer des propriétés/valeurs arbitraires. Vous pouvez théoriquement configurer une animation en utilisant un mot de passe arbitraire que vous nommez (par exemple, innerRadius) et remplacez la méthode de délégué -drawLayerInContext. Ensuite, vous pouvez récupérer la valeur actuelle de la couche de présentation pendant qu'elle est en plein vol et y retoucher votre dégradé. C'est juste théorique car je ne l'ai pas essayé, mais il semble que cela pourrait valoir la peine d'être examiné.

Cordialement.

+0

Votre deuxième suggestion m'a intrigué, à propos de l'animation d'une transformation. Le dégradé dont j'ai besoin est vert à l'extérieur et devient transparent à l'intérieur. Est-il possible d'avoir un cercle à plumes transparent qui masquerait tout ce qui est en dessous? Si ce cercle transparent était animé pour pulser sur un grand cercle vert, je crois que cela créerait le genre d'effet que je recherche. –

+0

Le masquage est un peu difficile avec Core Animation. Les calques ont une propriété * mask * que vous pouvez définir et qui peut être animée. Puisque vous utilisez une couche pour la propriété mask, vous pouvez également animer ses propriétés. –