[周小鱼]& iOS——CFWaterWave水波效果工具

周小鱼のCODE_HOME

技术宅 iOS开发 JAVA开发 萌妹子

• 
  首页
• 
  分类
• 
  关于
• 
  归档
• 
  标签

iOS——CFWaterWave水波效果工具

发表于 2016-04-28 | 分类于 iOS |

由于 CF 有 Core Foundation 歧义，更名前缀为 ZLY

最近通过前辈，学着做了一个水波效果工具共享出来，github连接

简介

ZLYWaterWave是一个简单好用的iOS水波效果工具，可以让你的APP更加好看有趣

原理简介

ZLYWaterWave的原理很简单，我们用Example里的工程做简介。(这里首先要感谢@hy，我敬爱的前辈，最初是从他这里学习的水波效果原理)

1. 首先准备两张图片
2. 将两张图放在重叠的位置
3. 将其中一张图片加上波浪形的遮盖
4. 如果波浪形的遮盖是动态再变化的的，就可以形成动态的波浪
5. ZLYWaterWave就是为你提供好了动态波浪的Path，你只需要在回调中加入遮盖即可
6. 如果你还是晕晕的，那就直接看Example吧，相信你瞬间就会明白的

安装

直接拽入ZLYWaterWave.h和ZLYWaterWave.m文件

使用ZLYWaterWave

1. 创建ZLYWaterWave对象

- (ZLYWaterWave *)waterWave {
    if (_waterWave == nil) {
        // 给定的frame和你的图片frame一致即可
        _waterWave = [[ZLYWaterWave alloc] initWithFrame:self.pic_red.frame];
        _waterWave.delegate = self;
    }
    return _waterWave;
}

2. 实现好代理，在代理中给你想要实现水波纹的图片加上贝塞尔路径生成的遮盖

- (void)waterWave:(ZLYWaterWave *)waterWave wavePath:(UIBezierPath *)path {
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.path = path.CGPath;
    // 添加遮盖
    self.pic_red.layer.mask = maskLayer;
}

用例

1. Exmaple中的示例

2. 最近做的一个小APP——『番茄』的效果展示

---

有什么问题都可以在博文后面留言，或者微博上私信我，或者邮件我 coderfish@163.com。

博主是 iOS 妹子一枚。

希望大家一起进步。

我的微博：小鱼周凌宇

欢迎订阅我的个人公众号~╮(╯▽╰)╭

坚持原创技术分享，支持萌妹子，您的支持将鼓励我继续创作！

 

 

# iOS

iOS——抢鲜来体验一下FBMemoryProfiler

iOS——教你如何使用ReactiveCocoa和MVVM为代码解耦构建清爽APP

 

 

 

• 文章目录
• 站点概览

1. 1. 最近通过前辈，学着做了一个水波效果工具共享出来，github连接

• 简介
• 原理简介
• 安装
• 使用ZLYWaterWave
• 用例

© 2019 周小鱼

由 Hexo 强力驱动

主题 - NexT.Muse

 

 

 

 

demo中的path生成代码

@interface ZLYWaterWave : NSObject

- (id)initWithFrame:(CGRect)frame;

/** 水深占比，0 to 1; */
@property(nonatomic, assign)CGFloat waterDepth;

/** 波浪速度，默认 0.05f */
@property (nonatomic, assign) CGFloat speed;

/** 波浪幅度 */
@property (nonatomic, assign) CGFloat amplitude;

/** 波浪紧凑程度（角速度），默认 1.0 */
@property (nonatomic, assign) CGFloat angularVelocity;

/**
 开始波动
 */
- (void)startAnimation;

/**
 停止波动
 */
- (void)stopAnimation;

/** 代理 */
@property (nonatomic, weak) id<ZLYWaterWaveDelegate> delegate;

@end


/**
 *  创建path回调给代理
 */
- (void)createPath {
    UIBezierPath * path = [[UIBezierPath alloc] init];
    CGFloat  waterDepthY = (1 - (self.waterDepth > 1.f? 1.f : self.waterDepth)) * self.frame.size.height;
    CGFloat y = waterDepthY;
    [path moveToPoint:CGPointMake(0, y)];
    path.lineWidth = 1;

    for (double x = 0; x <= self.frame.size.width; x++) {
        // y=Asin(ωx+φ)+k
        // A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
        // (ωx+φ)——相位，反映变量y所处的状态。
        // φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。
        // k——偏距，反映在坐标系上则为图像的上移或下移。
        // ω——角速度， 控制正弦周期(单位角度内震动的次数)。
        y = self.amplitude * sin(x / 180 * M_PI * self.angularVelocity + self.phase / M_PI * 4) + waterDepthY;
        [path addLineToPoint:CGPointMake(x, y)];
    }
    [path addLineToPoint:CGPointMake(self.frame.size.width, y)];
    [path addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];
    [path addLineToPoint:CGPointMake(0, self.frame.size.height)];
    [path closePath];
    
    if ([self.delegate respondsToSelector:@selector(waterWave:wavePath:)]) {
        [self.delegate waterWave:self wavePath:path];
    }
}