Question

我试图在一个小框架中制作正弦波动画，我在SO和网络上搜索了很多，但是我能够达到它的唯一目标是绘制一个从一侧转换的静态正弦波到另一边，但不想要翻译我想要一个动画画的正弦波，在帧中重复动画。有人可以帮帮我吗？这就是我现在所做的：

Wave.h

@interface Wave : UIView

@end

Wave.m

@implementation Wave

- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
    // Initialization code
    self.backgroundColor = [UIColor clearColor];
}
return self;
}

- (void)drawRect:(CGRect)rect
{
[[UIColor colorWithRed:0 green:192/255.0 blue:255/255.0 alpha:1] set];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 1);
CGContextSetLineJoin(context, kCGLineJoinRound);
float width = rect.size.width;
const CGFloat amplitude = 30 / 4;
for(CGFloat x = 0; x < width; x += 0.5)
{
    CGFloat y = amplitude * sinf(2 * M_PI * (x / width) * 5) + 30;

    if(x == 0)
        CGContextMoveToPoint(context, x, y);
    else
        CGContextAddLineToPoint(context, x, y);
}

CGContextStrokePath(context);
}

然后在UIViewController中我这样做：

- (void)viewDidLoad
{
self.wave = [[Wave alloc] initWithFrame:CGRectMake(self.view.frame.size.width/2-58, 205, 90, 200)];
[self.view addSubview:self.wave];

[self animateWave];
}

- (void)animateWave {
[UIView animateWithDuration:2.5 delay:0.0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveLinear animations:^{
    self.wave.transform = CGAffineTransformMakeTranslation(+self.wave.frame.size.width/2, 0);
} completion:^(BOOL finished) {
    self.wave.transform = CGAffineTransformMakeTranslation(0, 0);
}];
}

但我不想要翻译，我想要一个连续的绘画动画。

修改

我使用评论中的CADisplayLink建议编辑了我的问题：

// MainView.h

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#import "AnimationLayer.h"

@interface MainView : UIView
{
AnimationLayer *alayer;
}

@end

// MainView.m

#import "MainView.h"

@implementation MainView

- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
    // Initialization code
    [self setBackgroundColor:[UIColor clearColor]];

}
return self;
}

- (void)didMoveToSuperview
{
if ([self superview])
{

    alayer = [[AnimationLayer alloc] init];
    alayer.frame = self.frame;
    [self.layer addSublayer:alayer];

}
}

@end

//  AnimationLayer.h

#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>

@interface AnimationLayer : CALayer
{
CADisplayLink *displayLink;
}

@end

// AnimationLayer.m

#import "AnimationLayer.h"

static bool _running;

@implementation AnimationLayer

- (id)init
{
self = [super init];
if (self)
{
    displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
    [self setNeedsDisplayOnBoundsChange:YES];
}

return self;
}

static CGPoint lastPoint = {0, 0};

- (void)drawInContext:(CGContextRef)ctx
{
if (!_running)
{
    [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    _running = YES;
    return;
}

CGContextSetStrokeColorWithColor(ctx, [[UIColor blackColor] CGColor]);
CGRect rect = CGContextGetClipBoundingBox(ctx);
CGContextSetLineWidth(ctx, 2);
CGContextSetLineJoin(ctx, kCGLineJoinRound);
float width = rect.size.width;
const CGFloat amplitude = 30 / 4;

CGContextMoveToPoint(ctx, lastPoint.x, lastPoint.y);
lastPoint.x += 0.5;
lastPoint.y = amplitude * sinf(2 * M_PI * (lastPoint.x / width) * 5) + 30;
CGContextAddLineToPoint(ctx, lastPoint.x, lastPoint.y);

CGContextStrokePath(ctx);

if (lastPoint.x == rect.size.width)
{
    [displayLink invalidate];
    _running = NO;
}
}

@end

并以这种方式在uiviecontroller中使用它：

MainView *view = [[MainView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
[self.view addSubview:view];

现在我的问题是绘图代码只绘制了一个在正弦波中移动的小段，但是没有画线，只有这个小段，这是我的所有代码，所以你可以尝试看看问题，我怎么能解决它？

Answer 1

创建一个可动画的phase属性（通过声明@dynamic），drawRect:方法依赖于此属性;然后使用无限phase为CABasicAnimation设置动画。

Here是自定义动画属性的绝佳起点。

动画正弦波

1 个答案: