How to achieve baidu takeout APP personal center head "wave" up animation effect

As a hard-working SAO Nian who refuses to leave work at noon, ordering take-out has become an indispensable habit. One day instant found baidu takeout APP wave effect is very attractive. Compared with other takeout apps, the appearance level is slightly higher (Taobao also has a wave effect), so I thought about how to achieve this “wave” effect.

Results demonstrate

Baidu takeout wave effect picture:

What you need to know

Simply put, it’s a timer that essentially redraws a rendered page using brush frames as well as screen frequency. Its creation method:

CADisplayLink *timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(wave)];
[timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
Copy the code

CAShapeLayer

A subclass of CALayer, usually in combination with CGPath to draw graphics. Its creation method:

CAShapeLayer *Layer = [CAShapeLayer layer]; Layer.frame = self.bounds; Layer.fillColor = self.realWaveColor.CGColor; Layer... [self.view.layer addSublayer: layer];Copy the code

Its advantages

High rendering efficiency fast rendering. CAShapeLayer uses hardware acceleration to draw the same Graphics much faster than using Core Graphics.
Use memory efficiently. A CAShapeLayer doesn’t need to create a boarding graphic like a regular CALayer, so no matter how big it is, it doesn’t take up too much memory.
Will not be clipped by layer boundaries. A CAShapeLayer can be drawn outside the boundary. Your layer paths will not be clipped out like normal CALayer using Core Graphics.
There will be no pixelation. When you do a 3D transformation on a CAShapeLayer, it doesn’t become pixelated like a normal layer with a boarding image.