iOS开发之波浪动画效果

今天给大家讲述波浪效果的实现

直接上代码

#import 

@interface HCLWaveAnimationView : UIView

/**
 振幅A
 */
@property (nonatomic, assign) CGFloat alpha;

/**
 角速度ω
 */
@property (nonatomic, assign) CGFloat omega;

/**
 初相φ
 */
@property (nonatomic, assign) CGFloat phi;

/**
 偏距k
 */
@property (nonatomic, assign) CGFloat kappa;


/**
 移动速度
 */
@property (nonatomic, assign) CGFloat speed;

@end

#import "HCLWaveAnimationView.h"

@interface HCLWaveAnimationView ()

@property (nonatomic, strong) CADisplayLink *displayLink;

@end

@implementation HCLWaveAnimationView

#pragma mark - 生命周期

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor cyanColor];
        self.alpha = self.bounds.size.height * 0.1;
        self.omega = M_PI * 2 / self.bounds.size.width;
        self.phi = 0;
        self.kappa = self.bounds.size.height * 0.5;
        self.speed = 5;
        self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleDisplay)];
        [self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
    }
    return self;
}

#pragma mark - drawRect

- (void)drawRect:(CGRect)rect
{
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    //初始化运动路径
    CGMutablePathRef path = CGPathCreateMutable();
    //设置起始位置
    CGPathMoveToPoint(path, nil, 0, self.bounds.size.height);
    //正弦曲线公式为：y=Asin(ωx+φ)+k;
    for (CGFloat x = 0.0f; x <= self.bounds.size.width; x++) {
        CGFloat y = self.alpha * sinf(self.omega * x + self.phi) + self.kappa;
        CGPathAddLineToPoint(path, nil, x, y);
    }
    CGPathAddLineToPoint(path, nil, self.bounds.size.width, self.bounds.size.height);
    CGPathCloseSubpath(path);
    //绘制曲线
    CGContextSetFillColorWithColor(cxt, [UIColor orangeColor].CGColor);
    CGContextSetLineWidth(cxt, 0.5);
    CGContextAddPath(cxt, path);
    CGContextFillPath(cxt);
    CGPathRelease(path);
    
}

#pragma mark - 响应事件

- (void)handleDisplay
{
    if (!self.isHidden) {
        self.phi -= self.speed * self.omega;
        [self setNeedsDisplay];
    }
}

调用代码

    HCLWaveAnimationView *animationView = [[HCLWaveAnimationView alloc] initWithFrame:CGRectMake(20, 100, self.view.bounds.size.width-40, 500)];
    animationView.alpha = 15;
    animationView.kappa = 200;
    animationView.speed = 6;
    [self.view addSubview:animationView];

展示效果

 

demo的源码地址 https://github.com/hecanlin/WaveAnimation