DoubleWaves

A sine-and-cosine ripple diagram

Creating source

When shopping on Nov 11, I suddenly found a tiny animation effect on the top of Taobao, which felt very cool. And the way to do that is to add two views on top of one View: one is a sin graph, the other is a cosine graph

Method of use

DoubleWaves *doubleWaves = [[DoubleWaves alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 26)]; 

[self.view addSubview:doubleWaves];Copy the code

That’s the easiest way to create a view.

parameter

CGFloat waveA;// Water ripple amplitude
CGFloat waveW ;// Water cycle
CGFloat offsetX1; / / displacement
CGFloat currentK; // Current wave height Y
CGFloat offsetX2; / / displacement
CGFloat wavesSpeed;// Water pattern speed
CGFloat WavesWidth; // Water pattern widthCopy the code

According to their own project needs, to adjust the corresponding parameters, to achieve the corresponding effect.

rendering





DoubleWaves.gif

Github:github.com/cAibDe/Doub…