Use drawRect and CAReplicatorLayer to draw Dynamic Water ripple and careplicatorlayer

Use drawRect and CAReplicatorLayer to draw Dynamic Water ripple and careplicatorlayer

Use drawRect and CAReplicatorLayer to draw Dynamic Water ripple

This greatly simplifies the difficulty of writing water ripple effects. You can assemble water ripple effects by yourself according to the example. This design is the result of combining several tools,DrawRectObject AndReplicatorLineAnimationView Can complete more complex functions independently.

 

Description

1. Use sine to calculate the Xuan Curve

2. Use CAReplicatorLayer to achieve repeated movement

 

Effect

 

Source code

DrawRectObject in https://github.com/YouXianMing/UI-Component-Collection

/// WaveView. h // DrawRectObject // Created by YouXianMing on 16/8/1. // Copyright©2016 YouXianMing. all rights reserved. // # import "CustomDrawingView. h "typedef enum: NSUInteger {kStrokeWave = 1 <2, kFillWave = 1 <3,} EWaveViewType; @ interface WaveView: CustomDrawingView/*** Wave type, default is kFillWave. */@ property (nonatomic) EWaveViewType;/*** Sine phase, default is 0. */@ property (nonatomic) CGFloat phase;/*** Wave crest height, Default is 10. */@ property (nonatomic) CGFloat waveCrest;/*** Full wave count, default is 1. */@ property (nonatomic) NSInteger waveCount;/*** The fill style. */@ property (nonatomic, strong) DrawingStyle * fillStyle;/*** The stroke style. * // @ property (nonatomic, strong) DrawingStyle * strokeStyle; @ end

/// WaveView. m // DrawRectObject // Created by YouXianMing on 16/8/1. // Copyright©2016 YouXianMing. all rights reserved. // # import "WaveView. h "@ implementation WaveView-(instancetype) initWithFrame :( CGRect) frame {if (self = [super initWithFrame: frame]) {self.wav eCrest = 10.f; self.wav eCount = 1; self. phase = 0.f; self. type = kFillWave; DrawingStyle * fillStyle = [DrawingStyle new]; fillStyle. fillColor = [DrawingColor colorWithUIColor: [[UIColor redColor] colorWithAlphaComponent: 0.5f]; self. fillStyle = fillStyle; DrawingStyle * strokeStyle = [DrawingStyle new]; strokeStyle. strokeColor = [DrawingColor colorWithUIColor: [UIColor redColor]; strokeStyle. lineWidth = 0.5f; self. strokeStyle = strokeStyle;} return self;}-(void) drawRect :( CGRect) rect {NSParameterAssert (self. fillStyle); NSParameterAssert (self. strokeStyle); [super drawRect: rect]; CGFloat width = self. frame. size. width; CGFloat height = self. frame. size. height; if (self. type & kFillWave) {[self. drawRectObject useDrawingStyle: _ fillStyle drawFillBlock: ^ (DrawRectObject * drawRectObject) {for (CGFloat x = 0; x <= width; x ++) {if (x = 0) {[drawRectObject moveToStartPoint: CGPointMake (x, _ waveCrest * sin (2 * M_PI) * _ waveCount/width * x + _ phase) + height/2.f)]; continue ;} else {[drawRectObject addLineToPoint: CGPointMake (x, _ waveCrest * sin (2 * M_PI) * _ waveCount/width * x + _ phase) + height/2.f)];} [drawRectObject addLineToPoint: CGPointMake (width, height)]; [drawRectObject addLineToPoint: CGPointMake (0, height)]; [drawRectObject addLineToPoint: CGPointMake (0, _ waveCrest * sin (2 * M_PI) * _ waveCount/width * 0 + _ phase) + height/2.f)] ;}] ;}if (self. type & kStrokeWave) {[self. drawRectObject useDrawingStyle: _ strokeStyle drawStrokeBlock: ^ (DrawRectObject * drawRectObject) {for (CGFloat x = 0; x <= width; x ++) {if (x = 0) {[drawRectObject moveToStartPoint: CGPointMake (x, _ waveCrest * sin (2 * M_PI) * _ waveCount/width * x + _ phase) + height/2.f)]; continue ;} else {[drawRectObject addLineToPoint: CGPointMake (x, _ waveCrest * sin (2 * M_PI) * _ waveCount/width * x + _ phase) + height/2.f)] ;}}] ;}}@ end

/// ViewController. m // DrawRectObject // Created by YouXianMing on 16/7/30. // Copyright©2016 YouXianMing. all rights reserved. // # import "ViewController. h "# import" WaveView. h "# import" ReplicatorLineAnimationView. h "# import" UIView + SetRect. h "@ interface ViewController () @ end @ implementation ViewController-(void) viewDidLoad {[super viewDidLoad]; // Wave 1 {WaveView * waveView = [[WaveView alloc] initWithFrame: CGRectMake (0, 0, Width, Height)]; waveView. phase = 0.f; waveView.wav eCrest = 5.f; waveView.wav eCount = 1; waveView. type = kStrokeWave | kFillWave; {DrawingStyle * fillStyle = [DrawingStyle new]; fillStyle. fillColor = [DrawingColor colorWithUIColor: [[UIColor redColor] colorWithAlphaComponent: 0.25f]; waveView. fillStyle = fillStyle; DrawingStyle * strokeStyle = [DrawingStyle new]; strokeStyle. strokeColor = [DrawingColor colorWithUIColor: [[UIColor redColor] colorWithAlphaComponent: 0.5f]; strokeStyle. lineWidth = 0.5f; waveView. strokeStyle = strokeStyle;} ReplicatorLineAnimationView * replicatorLineView = [[ReplicatorLineAnimationView alloc] initWithFrame: waveView. bounds]; replicatorLineView. direction = kReplicatorLeft; replicatorLineView. speed = 0.1f; replicatorLineView. contentView = waveView; [replicatorLineView startAnimation]; [self. view addSubview: replicatorLineView];} // Wave 2 {WaveView * waveView = [[WaveView alloc] initWithFrame: CGRectMake (0, 0, Width, Height)]; waveView. phase = 0.f; waveView.wav eCrest = 10.f; waveView.wav eCount = 1; waveView. type = kStrokeWave | kFillWave; {DrawingStyle * fillStyle = [DrawingStyle new]; fillStyle. fillColor = [DrawingColor colorWithUIColor: [[UIColor redColor] colorWithAlphaComponent: 0.5f]; waveView. fillStyle = fillStyle; DrawingStyle * strokeStyle = [DrawingStyle new]; strokeStyle. strokeColor = [DrawingColor colorWithUIColor: [UIColor redColor]; strokeStyle. lineWidth = 0.5f; waveView. strokeStyle = strokeStyle;} ReplicatorLineAnimationView * replicatorLineView = [[ReplicatorLineAnimationView alloc] initWithFrame: waveView. bounds]; replicatorLineView. direction = kReplicatorLeft; replicatorLineView. speed = 0.3f; replicatorLineView. contentView = waveView; [replicatorLineView startAnimation]; [self. view addSubview: replicatorLineView];} // Wave 3 {WaveView * waveView = [[WaveView alloc] initWithFrame: CGRectMake (0, 0, Width, Height)]; waveView. phase = 10.f; waveView.wav eCrest = 15.f; waveView.wav eCount = 1; waveView. type = kFillWave; {DrawingStyle * fillStyle = [DrawingStyle new]; fillStyle. fillColor = [DrawingColor colorWithUIColor: [UIColor redColor]; waveView. fillStyle = fillStyle;} ReplicatorLineAnimationView * replicatorLineView = [[ReplicatorLineAnimationView alloc] initWithFrame: waveView. bounds]; replicatorLineView. direction = kReplicatorLeft; replicatorLineView. speed = 0.5f; replicatorLineView. contentView = waveView; [replicatorLineView startAnimation]; [self. view addSubview: replicatorLineView] ;}}@ end