# Recreating the Profile Avatar Wave Animation in Baidu Waimai

Language: en
Canonical: [Recreating the Profile Avatar Wave Animation in Baidu Waimai](<https://allluckly.cn/en/journal/2016-09-09-recreating-the-profile-avatar-wave-animation-in-baidu-waimai/>)
中文：[中文 HTML](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tougao58>)
English: [English HTML](<https://allluckly.cn/en/journal/2016-09-09-recreating-the-profile-avatar-wave-animation-in-baidu-waimai/>)
Published: 2016-09-09T00:00:00+08:00
Modified: 2026-10-23T10:34:15+08:00
Author: 乔同X

Breaks down the waves around a profile avatar: CADisplayLink drives updates, trigonometric functions generate the curves, and CAShapeLayer draws them. It explains the components needed for a continuous wave animation.

Originally credited to 乔同X; edited and archived by Bison.

[Source listed in the original](<http://qiaotongxin.cc/2016/08/22/20160822/>)

English translation of the [Chinese original](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tougao58>), translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

**Before you read** This technical note dates from 2015–2017. The examples have not been rerun as part of this archive update. Read API, dependency and tool details in the context of the original publication date.

As a diligent young developer who refuses to leave his desk during lunch, ordering food is an essential habit. One day, I noticed the appealing wave effect in the Baidu Waimai APP. It looked better than other delivery apps; Taobao also has a wave effect. That prompted me to work out how to create this kind of “wave”.

Editor: [Bison](<https://allluckly.cn/en/>)  
 Source: [乔同X's blog](<http://qiaotongxin.cc/2016/08/22/20160822/>)

## Demonstration

Baidu Waimai wave effect:

![1](<https://allluckly.cn/images/blog/tuogao/tougao58/1.gif>)

## What you need to know

## CADisplayLink

Simply put, it is a timer that redraws the interface at the screen's refresh rate. Create it as follows:

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

## CAShapeLayer

A CALayer subclass commonly used with CGPath to draw shapes.

Create it as follows:

```
CAShapeLayer *Layer = [CAShapeLayer layer];
Layer.frame =  self.bounds;
Layer.fillColor = self.realWaveColor.CGColor;
Layer...等属性
[self.view.layer addSublayer:Layer];
```

### Advantages

- Fast, efficient rendering: CAShapeLayer uses hardware acceleration and draws the same shape much faster than Core Graphics.
- Efficient memory usage: unlike a regular CALayer, CAShapeLayer does not require a backing image, so it uses relatively little memory regardless of size.
- It is not clipped to the layer's bounds. CAShapeLayer can draw outside them; its path is not clipped like that of a regular CALayer drawn with Core Graphics.
- It does not become pixelated. Applying a 3D transform to CAShapeLayer does not pixelate it like a regular layer with a backing image.

## Trigonometric functions

![1](<https://allluckly.cn/images/blog/tuogao/tougao58/2.png>)

![1](<https://allluckly.cn/images/blog/tuogao/tougao58/3.png>)

## Implementation approach

```
UIView –> 2个CAShapeLayer –> imageView.frame.orgin.y调整
```

## Main implementation

### Properties and methods

![1](<https://allluckly.cn/images/blog/tuogao/tougao58/4.png>)

### Implement

![1](<https://allluckly.cn/images/blog/tuogao/tougao58/5.png>)

### Call

![1](<https://allluckly.cn/images/blog/tuogao/tougao58/6.png>)

### End

Final result:

![1](<https://allluckly.cn/images/blog/tuogao/tougao58/7.gif>)

[Demo URL](<https://github.com/Josin22/JSWave>)

---

Recommended reading: [Implement an iOS launch-screen advertisement in minutes](<https://allluckly.cn/en/journal/2016-06-12-adding-a-launch-advertisement-to-an-ios-app/>)