我一直在尝试在 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: 委托方法中创建发射器层;对其应用动画;并将其作为子层添加到视图层。