美文网首页
双波浪线

双波浪线

作者: DDY | 来源:发表于2017-09-18 10:45 被阅读115次
WaveView.png WaveView.gif

请关注,防止你用了,我改了,有问题连个商量的人都找不到...

DDYProxy.h

#import <Foundation/Foundation.h>

@interface DDYProxy : NSProxy

@property (nonatomic, weak, readonly) id target;

+ (instancetype)proxyWithTarget:(id)target;

@end

DDYProxy.m

#import "DDYProxy.h"

@implementation DDYProxy

+ (instancetype)proxyWithTarget:(id)target {
    return [[self alloc] initWithTarget:target];
}

- (instancetype)initWithTarget:(id)target {
    _target = target;
    return self;
}

#pragma mark 获得目标对象的方法签名
- (NSMethodSignature *)methodSignatureForSelector:(SEL)sel {
    return [_target methodSignatureForSelector:sel];
}

#pragma mark 转发给目标对象
- (void)forwardInvocation:(NSInvocation *)invocation {
    if ([_target respondsToSelector:[invocation selector]]) {
        [invocation invokeWithTarget:_target];
    }
}
@end

DDYWaveView.h

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, DDYWaveDirection){
    DDYWaveDirectionLeftToRight = -1,   // 从左到右
    DDYWaveDirectionRightToLeft = +1    // 从右到左
};

@interface DDYWaveView : UIView

/** 前置波浪线颜色 默认白色 */
@property (nonatomic, strong) UIColor *frontColor;
/** 后置波浪线颜色 默认浅灰 */
@property (nonatomic, strong) UIColor *insideColor;
/** 前置波浪线速度 默认0.02 */
@property (nonatomic, assign) CGFloat frontSpeed;
/** 前置波浪线速度 默认0.02 */
@property (nonatomic, assign) CGFloat insideSpeed;
/** 两层波浪初相差 默认M_PI */
@property (nonatomic, assign) CGFloat phaseOffset;
/** 波浪的移动方向 默认从左到右 */
@property (nonatomic, assign) DDYWaveDirection direction;

/** 中间位置波浪线高度回调 */
@property (nonatomic, copy) void (^callBack)(CGFloat frontY, CGFloat insideY);

@end

DDYWaveView.m

/*
 *  y = Asin(ωx+φ)+k
 *  A : 振幅,使用这个变量来调整波浪的高度
 *  ω : 频率,使用这个变量来调整波浪密集度
 *  φ : 初相,使用这个变量来调整波浪初始位置
 *  k : 高度,使用这个变量来调整波浪在屏幕中y轴的位置。
 *
 *  NSProxy : 一个消息转发的基类(抽象类,虚类),不继承自NSObject,遵循NSObject协议,提供了消息转发的通用接口
 */

#import "DDYWaveView.h"
#import "DDYProxy.h"

@interface DDYWaveView ()

/** A 振幅 视图高度/2.0 */
@property (nonatomic, assign) CGFloat waveA;
/** W 频率 (M_PI * 2 / width) / 1.2 */
@property (nonatomic, assign) CGFloat waveW;
/** φ 初相 前置波浪线初相从0开始 */
@property (nonatomic, assign) CGFloat frontPhase;
/** φ 初相 后置波浪线初相=前置波浪线初相+初相差phaseOffset */
@property (nonatomic, assign) CGFloat insidePhase;
/** k 高度 波浪线横轴相对偏移 */
@property (nonatomic, assign) CGFloat currentK;

/** 和屏幕刷新率相同的频率将内容画到屏幕上的定时器 */
@property (nonatomic, strong) CADisplayLink *displayLink;
/** 前置波浪线 */
@property (nonatomic, strong) CAShapeLayer *frontLayer;
/** 后置波浪线 */
@property (nonatomic, strong) CAShapeLayer *insideLayer;
/** 消息转发 */
@property (nonatomic, strong) DDYProxy *proxy;

@end

@implementation DDYWaveView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self prepare];
        [self createWaves];
    }
    return self;
}

- (void)prepare {
    _proxy       = [DDYProxy proxyWithTarget:self];
    _frontColor  = [UIColor whiteColor];
    _insideColor = [UIColor colorWithRed:0.4 green:0.78 blue:0.68 alpha:1];
    //[UIColor colorWithRed:0.25 green:0.7 blue:0.54 alpha:1]
    _frontSpeed  = 0.025;
    _insideSpeed = 0.025;
    _phaseOffset = M_PI;
    _direction   = DDYWaveDirectionLeftToRight;

    _frontPhase  = 0;
    _insidePhase = _frontPhase + _phaseOffset;
}

- (void)createWaves {
    
    _frontLayer = [CAShapeLayer layer];
    _frontLayer.fillColor = _frontColor.CGColor;
    [self.layer addSublayer:_frontLayer];
    
    _insideLayer = [CAShapeLayer layer];
    _insideLayer.fillColor = _insideColor.CGColor;
    [self.layer insertSublayer:_insideLayer below:_frontLayer];
    
    _displayLink = [CADisplayLink displayLinkWithTarget:_proxy selector:@selector(refreshWave)];
    [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)refreshWave
{
    _waveA       = self.ddy_h/2.0;
    _waveW       = (M_PI * 2 / self.ddy_w) / 1.2;
    _currentK    = self.ddy_h/2.0;
    
    _frontPhase  += _frontSpeed  * _direction;
    _insidePhase += _insideSpeed * _direction;

    CGMutablePathRef frontPath  = CGPathCreateMutable();
    CGPathMoveToPoint(frontPath, nil, 0, _currentK);

    CGMutablePathRef insidePath  = CGPathCreateMutable();
    CGPathMoveToPoint(insidePath, nil, 0, _currentK);
    
    for (int i = 0; i <= self.ddy_w; i++) {
        CGPathAddLineToPoint(frontPath,  nil, i, _waveA * sin(_waveW * i + _frontPhase)  + _currentK);
        CGPathAddLineToPoint(insidePath, nil, i, _waveA * sin(_waveW * i + _insidePhase) + _currentK);
    }
    
    // 变化的中间Y值
    CGFloat CentFrontY  = _waveA * sin(_waveW * self.ddy_w/2 + _frontPhase)  + _currentK;
    CGFloat CentIndideY = _waveA * sin(_waveW * self.ddy_w/2 + _insidePhase) + _currentK;
    if (self.callBack) {
        self.callBack(CentFrontY, CentIndideY);
    }
    
    CGPathAddLineToPoint(frontPath, nil, self.ddy_w, self.ddy_h);
    CGPathAddLineToPoint(frontPath, nil, 0, self.ddy_h);
    CGPathCloseSubpath(frontPath);
    _frontLayer.path = frontPath;
    _frontLayer.fillColor = _frontColor.CGColor;
    CGPathRelease(frontPath);
    
    CGPathAddLineToPoint(insidePath, nil, self.ddy_w, self.ddy_h);
    CGPathAddLineToPoint(insidePath, nil, 0, self.ddy_h);
    CGPathCloseSubpath(insidePath);
    _insideLayer.path = insidePath;
    _insideLayer.fillColor = _insideColor.CGColor;
    CGPathRelease(insidePath);
}

- (void)dealloc {
    [_displayLink invalidate];
    _displayLink = nil;
}

- (void)setPhaseOffset:(CGFloat)phaseOffset {
    _phaseOffset = phaseOffset;
    _insidePhase = _frontPhase + _phaseOffset;
}

@end

相关文章

  • 双波浪线

    请关注,防止你用了,我改了,有问题连个商量的人都找不到... DDYProxy.h DDYProxy.m DDYW...

  • 波浪线

    相对身边的大多数人我算起的早,即使假日也不会比平时多睡。放假在家,如无意外,八点左右自然醒,却不常不短的玩手...

  • 波浪线

    上帝随手一挥 便是一条连绵起伏的波浪线 一座小山看到了 心中深感好奇 并走入这条波浪线下 没想到 这却成为了他最后...

  • 波浪线

    有人曾在领奖时说过一段话,说“以前上学的时候写作文,老师会在我们写的好的句子下面画上美丽的波浪线。今天我的到了这个...

  • 学习中的波浪线

    波浪线在Word文档中有红色波浪线和绿色波浪线,它们的意思分别如下。 红色波浪线:word的系统认为该处可能存在单...

  • office

    一、Word 线条 三个减号(-)是直线,三个星号(*)是虚线,三个小波浪(~)是波浪线,三个等号(=)是双直线,...

  • vue 引入less公共文件

    正确引入方式 注意:波浪线跟波浪线是有区别的 ~这样会报错 ~这样才可以 (其实就是英文波浪线,注意别错了)

  • Class2 Homework

    ① 用笔(线条练习) ✦ 短直线,长直线,大波浪线,小波浪线,三角波浪线,飞线等 ✦ 取任意两点连接直线(两点之间...

  • 波浪线‖生命

    接龙客栈悬赏第十三期【03】波浪线故事 文/清风自来

  • 人生波浪线

    人生不存在绝处和终点。 人生成波浪线前进,有低谷、有顶峰,每一次的低谷都是为奔向顶峰、走向正常做准备。 人生是无限...

网友评论

      本文标题:双波浪线

      本文链接:https://www.haomeiwen.com/subject/lwpvsxtx.html