CABasicAnimation 不随视图的其余部分一起滚动

发布于 2024-09-02 10:39:40 字数 2597 浏览 1 评论 0原文

所有,我正在努力重现地图用来显示您自己位置的脉动蓝色圆圈效果...
我将 UIView 分层放在 MKMapView 上。 UIView 包含脉冲动画。

我最终使用了从 stackoverflow 上的众多答案中收集到的以下代码:

    CABasicAnimation* pulseAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
pulseAnimation.toValue = [NSNumber numberWithFloat: 0.0];
pulseAnimation.duration = 1.0;
pulseAnimation.repeatCount = HUGE_VALF;
pulseAnimation.autoreverses = YES;
pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:pulseAnimation forKey:@"pulseAnimation"];

CABasicAnimation* resizeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
resizeAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.0f, 0.0f)];
resizeAnimation.fillMode = kCAFillModeBoth;
resizeAnimation.duration = 1.0;
resizeAnimation.repeatCount = HUGE_VALF;
resizeAnimation.autoreverses = YES;
resizeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:resizeAnimation forKey:@"resizeAnimation"];

我在 UIView 中绘制的圆圈进行了可接受的脉冲/淡入工作:

        CGContextRef context = UIGraphicsGetCurrentContext(); 

    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 0.4);
    // And draw with a blue fill color
    CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 0.1);
    // Draw them with a 2.0 stroke width so they are a bit more visible.
    CGContextSetLineWidth(context, 2.0);

    CGContextAddEllipseInRect(context, CGRectMake(x-30, y-30, 60.0, 60.0));
    CGContextDrawPath(context, kCGPathFillStroke);

这对 底层地图到另一个位置动画搞砸了...... 虽然我想要突出显示的位置在屏幕上居中,但动画工作正常,一旦我拖动了该位置,使其不再居中,动画现在会从屏幕中心开始脉冲,放大到拖动偏离中心的位置的中心,然后再回来... 幽默又酷的效果,但不是我想要的。

我意识到我可能在几个方面都很幸运。 我不确定我误解了什么。 我认为动画正在缩放整个图层,而我的圆圈恰好画在它的中间。所以它在居中时有效,但在偏离中心时无效。

当我开始这个问题时,我尝试了从 stackoverflow 建议的问题之一中收集到的以下内容:

        CABasicAnimation* translateAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    translateAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(oldx, oldy )];
    translateAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(x, y )];

//translateAnimation.fillMode = kCAFillModeBoth; 翻译动画.持续时间= 1.0; translateAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [self.layer addAnimation:translateAnimation forKey:@"translateAnimation"];

但这并没有多大帮助,当我玩它时,有时看起来好像有一次在我将其偏离中心后它会在正确的位置进行动画处理,但随后它会切换回从中心点到新位置的动画。

Sooo,有什么建议吗?或者我需要提供更多信息吗?

All, I'm working on reproducing the pulsing Blue circle effect that the map uses to show your own location...
I layered a UIView over a MKMapView. The UIView contains the pulsing animation.

I ended up using the following code gleaned from numerous answers here on stackoverflow:

    CABasicAnimation* pulseAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
pulseAnimation.toValue = [NSNumber numberWithFloat: 0.0];
pulseAnimation.duration = 1.0;
pulseAnimation.repeatCount = HUGE_VALF;
pulseAnimation.autoreverses = YES;
pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:pulseAnimation forKey:@"pulseAnimation"];

CABasicAnimation* resizeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
resizeAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.0f, 0.0f)];
resizeAnimation.fillMode = kCAFillModeBoth;
resizeAnimation.duration = 1.0;
resizeAnimation.repeatCount = HUGE_VALF;
resizeAnimation.autoreverses = YES;
resizeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:resizeAnimation forKey:@"resizeAnimation"];

This does an acceptable job of pulsing/fading a circle I drew in the UIView using:

        CGContextRef context = UIGraphicsGetCurrentContext(); 

    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 0.4);
    // And draw with a blue fill color
    CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 0.1);
    // Draw them with a 2.0 stroke width so they are a bit more visible.
    CGContextSetLineWidth(context, 2.0);

    CGContextAddEllipseInRect(context, CGRectMake(x-30, y-30, 60.0, 60.0));
    CGContextDrawPath(context, kCGPathFillStroke);

But I soon found that while this appears to work, as soon as I drag the underlying map to another position the animation screws up...
While the position I want highlighted is centered on the screen the animation works ok, once I've dragged the position so it's no longer centered the animation now pulses starting at the center of the screen scaling up to center on the position dragged off center, and back again...
A humorous and cool effect, but not what I was looking for.

I realize I may have been lucky on several fronts.
I'm not sure what I misunderstood.
I think the animation is scaling the entire layer which just happens to have my circle drawn in the middle of it. So it works when centered but not when off center.

I tried the following gleaned from one of the questions suggested by stackoverflow when I started this question:

        CABasicAnimation* translateAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    translateAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(oldx, oldy )];
    translateAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(x, y )];

// translateAnimation.fillMode = kCAFillModeBoth;
translateAnimation.duration = 1.0;
translateAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:translateAnimation forKey:@"translateAnimation"];

But it doesn't help much, when I play with it sometimes it looks like once time it animates in the correct spot after I've moved it offcenter, but then it switches back to the animating from the center point to the new location.

Sooo, any suggestions or do I need to provide additional information.

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

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文