UIView发出符合边框形状的戒指

时间:2013-09-03 15:04:42

标签: ios objective-c uiview core-graphics core-animation

我一直在尝试在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:delegate方法;应用动画;并将其作为子图层添加到视图层。

1 个答案:

答案 0 :(得分:2)

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

默认情况下,Shape图层会为其路径设置动画。

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