相信很多人見過app個人中心的波浪動畫效果吧，是不是覺得很酷？
接下來家夺，我會給大家分享一個實現(xiàn)的思路。
先上圖佣蓉，看看效果披摄。
忽略掉這個晃眼的紅色（畢竟只是用來做示例），這個波浪效果很帶感吧勇凭。
簡單原理疚膊，CAShapeLayer 結(jié)合CGPath繪制圖形。
動畫操作的是CAShapeLayer（CALayer的子類）層虾标，而非直接操作UIView寓盗。
CAShapeLayer在渲染速度，顯示效果璧函，內(nèi)存占用傀蚌，資源消耗上均有不小優(yōu)勢。對于CALayer和UIView的區(qū)別以及CAShapeLayer不是很了解的讀者蘸吓，可以閱讀我在文章結(jié)尾附上的相關(guān)知識鏈接善炫。
看代碼實現(xiàn)部分
<pre><code>
@interface ZSWave : UIView
@property (nonatomic, assign) CGFloat waveSpeed;//浪彎曲度
@property (nonatomic, assign) CGFloat speed;//浪速
@property (nonatomic, assign) CGFloat waveHeight;//浪高
@property (nonatomic, strong) UIColor *realWaveColor;//實浪顏色
@property (nonatomic, strong) UIColor *maskWaveColor;//遮罩浪顏色
@property (nonatomic, strong) UIView *headerImageWallView;//頭像父視圖
- (void)stopWaveAnimation;
- (void)startWaveAnimation;
@end
</pre></code>
<pre><code>
@interface ZSWave ()
@property (nonatomic, strong) CADisplayLink *timer;//刷屏器
@property (nonatomic, strong) CAShapeLayer *realWaveLayer;//真實浪
@property (nonatomic, strong) CAShapeLayer *maskWaveLayer;//遮罩浪
@property (nonatomic, assign) CGFloat offset;
@end
</pre></code>
<pre><code>
- (instancetype)initWithFrame:(CGRect)frame
{
if ([super initWithFrame:frame]) {
[self initData];
}
return self;
}
- (void)initData{
[self.layer addSublayer:self.realWaveLayer];
[self.layer addSublayer:self.maskWaveLayer];
[self addSubview:self.headerImageWallView];
[self startWaveAnimation];
}
- (void)startWaveAnimation{
self.timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(wave)];
[self.timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
}
- (void)stopWaveAnimation{
[self.timer invalidate];
self.timer = nil;
}
</pre></code>
核心代碼
<pre><code>
- (void)wave{
[self layoutIfNeeded];
self.offset += self.speed;
CGFloat width = CGRectGetWidth(self.frame);
CGFloat height = CGRectGetHeight(self.frame);
//真實浪
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, height );
CGFloat y = 0.f;
for (CGFloat x = 0.f; x <= width ; x++) {
y = height * sinf(0.01 * self.waveSpeed * x + self.offset * 0.045);
CGPathAddLineToPoint(path, NULL, x, y);
}
CGFloat centX = self.center.x;
CGFloat CentY = height * sinf(0.01 * self.waveSpeed *centX + self.offset * 0.045);
CGRect iconFrame = [self.headerImageWallView frame];
iconFrame.origin.y = CentY - iconFrame.size.height;
self.headerImageWallView.frame =iconFrame; //調(diào)整頭像位置，隨波浪運動
CGPathAddLineToPoint(path, NULL, width, height);
CGPathAddLineToPoint(path, NULL, 0, height);
CGPathCloseSubpath(path);
self.realWaveLayer.path = path;
self.realWaveLayer.fillColor = self.realWaveColor.CGColor;
CGPathRelease(path);
//遮罩浪
CGMutablePathRef maskpath = CGPathCreateMutable();
CGPathMoveToPoint(maskpath, NULL, 0, height);
CGFloat maskY = 0.f;
for (CGFloat x = 0.f; x <= width ; x++) {
maskY = height * cosf(0.01 * self.waveSpeed * x + self.offset * 0.045);
CGPathAddLineToPoint(maskpath, NULL, x, maskY);
}
CGPathAddLineToPoint(maskpath, NULL, width, height);
CGPathAddLineToPoint(maskpath, NULL, 0, height);
CGPathCloseSubpath(maskpath);
self.maskWaveLayer.path = maskpath;
self.maskWaveLayer.fillColor = self.maskWaveColor.CGColor;
CGPathRelease(maskpath);
}
</pre></code>
默認屬性設(shè)置及初始化
<pre><code>
#pragma mark - Initialize parameter
- (CGFloat)waveSpeed {
if (!_waveSpeed) {
_waveSpeed = 1.5;
}
return _waveSpeed;
}
- (CGFloat)speed {
if (!_speed) {
_speed = 0.7;
}
return _speed;
}
- (CGFloat)waveHeight {
if (!_waveHeight) {
_waveHeight = 5;
}
return _waveHeight;
}
- (UIColor *)realWaveColor {
if (!_realWaveColor) {
_realWaveColor = [UIColor whiteColor];
}
return _realWaveColor;
}
- (UIColor *)maskWaveColor {
if (!_maskWaveColor) {
_maskWaveColor = [[UIColor whiteColor]colorWithAlphaComponent:0.3];
}
return _maskWaveColor;
}
#pragma mark - lazy loading
- (CAShapeLayer *)realWaveLayer{
if (!_realWaveLayer) {
_realWaveLayer = [CAShapeLayer layer];
_realWaveLayer.frame = self.bounds;
_realWaveLayer.fillColor = self.realWaveColor.CGColor;
}
return _realWaveLayer;
}
- (CAShapeLayer *)maskWaveLayer{
if (!_maskWaveLayer) {
_maskWaveLayer = [CAShapeLayer layer];
_maskWaveLayer.frame = self.bounds;
_maskWaveLayer.fillColor = self.maskWaveColor.CGColor;
}
return _maskWaveLayer;
}
- (UIView *)headerImageWallView {
if (!_headerImageWallView) {
_headerImageWallView = [[UIView alloc]initWithFrame:CGRectMake(self.center.x - 30, -60, 60, 60)];
_headerImageWallView.layer.borderColor = [UIColor whiteColor].CGColor;
_headerImageWallView.layer.borderWidth = 2;
_headerImageWallView.layer.cornerRadius = 20;
}
return _headerImageWallView;
}
</pre></code>
最后一定記得重寫dealloc库继，把定時器注銷箩艺。
<pre><code>
- (void)dealloc{
[self stopWaveAnimation];
}
</pre></code>
參考資料CADisplayLink， CALayer和UIView的區(qū)別
