UIView 发出与边框形状匹配的环

Posted 2023-03-13

【中文标题】UIView 发出与边框形状匹配的环

【英文标题】：UIView emanate rings matching shape of border

【发布时间】：2013-09-03 15:04:42

【问题描述】：

我一直在尝试在 ios 中创建一个自定义视图，该视图从其边框发出环。我使用 Core Graphics 绘制了一个椭圆，我希望它周期性地散发出来。

我一直在寻找同时使用 CAEmitterLayer 和 Core Animation 来实现这一点，但真的不知道如何实现我想要的效果。理想情况下，我希望椭圆从形状的边缘发出一个大约 10 像素厚的环，并随着它的增长和移动越来越远而逐渐消失。

在我最初的尝试中，我只是使用 Core Animation 让椭圆每 3 秒增长和褪色，但我真正想要的是让椭圆保持静止并有另一个动画层。

任何建议都会很棒。

我的代码从最初的尝试开始。但我的自动取款机是：

#import "ThumbView.h"

#import <QuartzCore/QuartzCore.h>

@implementation ThumbView

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx 

    [super drawLayer:layer inContext:ctx];

    // Create the emitter layer and make it the same size as the view.
    CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
    emitterLayer.frame = self.frame;

    // Apply some attributes to the emitter.
    emitterLayer.emitterShape = kCAEmitterLayerCircle;
    emitterLayer.renderMode = kCAEmitterLayerOutline;
    emitterLayer.emitterSize = CGSizeMake ( 4, 4 );

    // Create a scale animation that repeats every 3 seconds.
    CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.duration = 3.0f;
    scaleAnimation.repeatCount = HUGE_VAL;
    scaleAnimation.values = @[@1, @1.5f, @1.5f];
    scaleAnimation.keyTimes = @[@0, @0.5, @1];

    // Create a fade animation that repeats every 3 seconds.
    CAKeyframeAnimation *glowAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    glowAnimation.duration = 3.0f;
    glowAnimation.repeatCount = HUGE_VAL;
    glowAnimation.values = @[@1, @0, @0];
    glowAnimation.keyTimes = @[@0, @0.5, @1];

    [emitterLayer addAnimation:scaleAnimation forKey:@"scale"];
    [emitterLayer addAnimation:glowAnimation forKey:@"opacity"];

    if ( !self.pressed ) 
        [layer insertSublayer:emitterLayer above:layer];
     else 
        [emitterLayer removeFromSuperlayer];
    



// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect 

    // Drawing code. Draw an elipse here.
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor ( context, self.thumbColour.CGColor );
    CGContextFillEllipseInRect ( context, rect );




@end

所以我一直在尝试做的是在 drawLayer:inContext: 委托方法中创建发射器层；对其应用动画；并将其作为子层添加到视图层。

【问题讨论】：

您能否添加您尝试过的代码，以便更容易提供帮助

您是否考虑只使用 .gif 并使用 blog.stijnspijker.nl/2009/07/… 之类的东西来允许 gif 工作？我认为它可以为您省去很多麻烦。

我认为你可能是对的。这会省去很多悲伤。我不反对使用 gif。我只是想通过代码更有效地做到这一点，但这可能比它的价值更麻烦。做了更多的研究后，我认为使用emitterLayer 将是矫枉过正。

很高兴我找到了解决方案 :)

【参考方案1】：

我建议使用一个或多个 CAShapeLayer 对象，并为形状层中安装的 CGPath 的比例设置动画。

默认情况下，形状图层会对其路径进行动画更改。

您应该能够创建一组形状图层来描边您要绘制的椭圆，并更改这些路径的比例设置以获得您想要的效果。

【讨论】：

您建议将 - (CALayer *)layer 返回的内容更改为 CAShapeLayer；在这一层创建椭圆；添加描边椭圆的其他子图层并为描边图层的路径设置动画以进行缩放？听起来很明智

更改从-(CALayer *)layer 返回的内容是什么意思？你的意思是创建一个自定义的 UIView 子类，实现类方法 + (Class)layerClass 以使支持层成为形状层？是的，你可以这样做。然后，您的视图的主层可以是一个形状层，您可以添加其他形状层，使您的视图发出从主形状延伸出来的同心形状。

这就是我的意思。我输入了错误的方法。得到它的工作一种享受。谢谢