Giter VIP home page Giter VIP logo

cfwaterwave's Introduction

简介

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

ZLYWaterWave效果展示

原理简介

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

白色图片 红色图片 叠加添加遮盖效果

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

安装

  1. CocoaPods

    pod ‘ZLYWaterWave’
    
  2. 直接安装

    直接拽入ZLYWaterWave.hZLYWaterWave.m文件

使用ZLYWaterWave

  1. 创建ZLYWaterWave对象
- (ZLYWaterWave *)waterWave {
    if (_waterWave == nil) {
        // 给定的frame和你的图片frame一致即可
        _waterWave = [[ZLYWaterWave alloc] initWithFrame:self.pic_red.frame];
        _waterWave.delegate = self;
    }
    return _waterWave;
}
  1. 实现好代理,在代理中给你想要实现水波纹的图片加上贝塞尔路径生成的遮盖
- (void)waterWave:(ZLYWaterWave *)waterWave wavePath:(UIBezierPath *)path {
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.path = path.CGPath;
    // 添加遮盖
    self.pic_red.layer.mask = maskLayer;
}

用例

  1. Exmaple中的示例

ZLYWaterWave效果展示

  1. 最近做的一个小APP——『番茄』的效果展示(如果有感兴趣的,可以联系我一起合作写哟~,因为这小项目,我想静静的体验一下当设计师的感觉😜)

ZLYWaterWave效果展示 .

反馈

如果有什么修改建议,可以发送邮件到[email protected],也欢迎到我的博客一起讨论学习哟~


2016年11月7日更新

由于 CF 前缀有 Core Foundation 歧义,更改为 ZLY。

cfwaterwave's People

Contributors

summertian4 avatar chaolong avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.