当前位置：文江博客话题详情

我可以在 iPhone 中制作径向渐变动画吗？

发布于 2024-09-05 17:12:45 字数 364 浏览 9 评论 0原文

我想制作一个径向渐变动画来缩小和增大内半径，就像它在脉动一样。

现在我正在使用 CGGradient 渲染渐变，但我不确定如何为其设置动画。我看过这个主题

你能在iPhone？

这解释了如何使用 CAGradientLayer 为线性渐变设置动画，但它似乎不会绘制径向渐变。

是否有一种简单的方法来制作 CGGradient 动画，或者创建径向渐变 CAGradientLayer 的某种方法？

任何想法表示赞赏。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦途 2024-09-12 17:12:45

如果手机上只有 Core Image，那么这将是微不足道的。您需要一个可动画过滤器。 ;-)

CAGradientLayer 确实允许对其属性进行动画处理，但是，它目前仅支持线性渐变。

如果您想使用核心动画进行动画制作，我唯一能想到的就是对要在其中绘制渐变的视图的变换进行动画制作。

您可以非常简单地为任何视图的变换设置动画。只需像您可能已经在做的那样在视图中绘制渐变，然后使用缩放对变换进行动画处理即可。使用显式动画，它会是这样的：

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

不幸的是，我认为这看起来像是扩张和收缩而不是脉冲（尽管我还没有尝试过）。

我认为，如果您希望此时的渐变具有真正的脉冲，您可能必须使用自己的计时器手动执行动画。只需定期重新绘制并更改内半径值即可。啊。我不确定这是唯一的方法，但我还没有在手机上看到具有您想要的渐变效果的引人注目的脉冲动画。

我想在某个时候尝试另一个想法。核心动画现在允许对任意属性/值进行动画处理。理论上，您可以使用您命名的任意键路径（例如，innerRadius）设置动画并覆盖 -drawLayerInContext 委托方法。然后，您可以在演示层处于飞行途中时从演示层获取当前值，并在那里重新绘制渐变。这只是理论上的，因为我还没有尝试过，但似乎值得研究一下。

此致。

If only Core Image was on the phone, this would be trivial. An animatable filter is what you need. ;-)

The CAGradientLayer does allow for animating its properties, however, it currently only supports linear gradients.

The only thing I can think of if you're wanting to animate using Core Animation is to animate the transform of the view into which you're drawing your gradient.

You can animate any view's transform pretty simply. Just draw your gradient in the view as you're probably already doing and then animate the transform using scaling. Using explicit animation, it would be something like:

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

Unfortunately this would look like expanding and contracting more than pulsing, I think (though I haven't tried it).

I think if you want a true pulsing with your gradient at this point, you probably have to do the animation manually using your own timer. Just re-draw periodically changing your inner radius value as you go. Ugh. I'm not absolutely sure that's the only way, but I have yet to see a compelling pulse animation on the phone with a gradient as you're wanting.

There is one other idea I would like to try at some point. Core Animation now allows animating arbitrary properties/values. You could theoretically set up an animation using some arbitrary keypath that you name (say innerRadius, for example) and override the -drawLayerInContext delegate method. Then you could grab the current value from the presentationLayer while it's in mid-flight and re-draw your gradient there instead. This is just theoretical as I haven't tried it, but it seems like it might be worth looking into.

Best regards.

回复收藏 0 原文

~没有更多了~