Skip to content
Achieve beautiful wavewater animate.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
SXWaveAnimate
SXWaveAnimateDemo
screenshots
.gitignore
LICENSE
README.md
SXWaveAnimate.podspec

README.md

SXWaveAnimate

实现非常美观的灌水动画


[![Platform](https://img.shields.io/badge/platform-iOS-red.svg)](https://developer.apple.com/iphone/index.action) [![Language](http://img.shields.io/badge/language-OC-yellow.svg?style=flat )](https://en.wikipedia.org/wiki/Objective-C) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](http://mit-license.org) ![CocoaPods Version](https://img.shields.io/badge/pod-v2.0.0-brightgreen.svg)

本库已经配置到cocoapods。

在podfile文件中加入 pod "SXWaveAnimate", "~> 2.0.0" pod "SXWaveAnimate"
使用 pod install即可一键引入

5月31日更新(建议更新)

这次的升级做了一些较大的更改:

  1. 之前灌水是用图片做的,现在已经改成了用贝塞尔曲线画
  2. 因为是画出来的,所以水花的颜色完全可配置了(以后会支持速度,波长等等)
  3. 提供了百分比数字随着水花变化的功能,可自行开关
  4. waveview支持了水花无限循环,并且交界处没有bug

效果图如下

image

7月30日升级版本(建议更新下)

与以往的只有自定义cell相比,开通了粒度更小的自定义View-SXWaveView

image

主要更新有:
  • 修改整体UI样式
  • 增加了SXWaveView。使得项目的泛用性和灵活性更好
  • 添加动画的type修改后为3种 1-缓慢上升 2-缓慢下降 3-先升后降
  • 考虑到引入的方便waveView废除了xib使用纯手码创建
  • 添加了半圆性灌水动画halfWaveView。
    (半圆类依赖于圆类,反之不依赖。可以根据个人喜好决定是否引入半圆类)
  • 增加开放API和新的字段,定制化程度更高
    (不用担心以前有的接口还是有的,没做改变)

SXWaveView使用方法

1.将代码中的classes文件夹拖入项目中,里面包含了可重用的文件,及一个便利计算frame的类
2.在需要用到的类中(就是你要写tableView数据源方法和代理方法的类)引入头文件
#import "SXWaveView.h"或者是#import "SXHalfWaveView.h"
3.建一个成员变量
@property(nonatomic,strong)SXWaveView *animateView1;
4.用你正常创建自定义view的方法建一个,并使用setPrecent开头的方法,不想传的参数可以传nil
SXWaveView *animateView1 = [[SXWaveView alloc]initWithFrame:CGRectMake(0+MARGIN, 100+MARGIN,SIDES, SIDES)];
[self.view addSubview:animateView1];
self.animateView1 = animateView1;
[self.animateView1 setPrecent:self.precent description:@"董铂然" textColor:[UIColor orangeColor] bgColor:COLOR(31, 187, 170, 1) alpha:1 clips:NO];
5.在viewDidAppearviewWillAppear方法中加入一行开始动画的方法[self.animateView1 addAnimateWithType:0];也可以自行选择动画触发的地点。

image

精心设计了12种配色。现在的自定义配置已经很多,可自行发挥

image

看下代码就知道了里面写的很清楚


6月2日升级版本(建议更新下)

将动画代码封装到了Cell的内部,提供了统一的接口及赋值方法

image

使用方法

1.将代码中的classes文件夹拖入项目中,里面包含了自定义Cell,及一个便利计算frame的类
2.在需要用到的类中(就是你要写tableView数据源方法和代理方法的类)引入头文件
#import "SXWaveCell.h"
3.在数据源方法的cellforRow中在你需要的位置,把以往的UITableView Cell *cell 等等换成
SXWaveCell *cell = [SXWaveCell cell];
self.waveCell = cell;
[cell setPrecent:self.precent textColor:[UIColor orangeColor] type:0 alpha:1];
return cell;
4.其中第三行的这个 setPrecent: textColor: type: alpha:方法 是一个赋值方法,现在必须四个参数都传,后续会设置多个接口 可以只传需要的值。
5.现在源码里有两种方法一个是在页面显示之后点击cell触发动画,一个是一进去就显示动画,如果想要这么设置 需要在viewDidAppear方法中加入一行开始动画的方法[self.waveCell addAnimateWithType:0];

具体代码在示例程序中写的都很清晰非常易上手


初始版本

因为前期主要以实现功能为主,暂时接口封装的还不是很完善,很快会不断完善。并且现在的代码结构也非常清晰了完全可以复用 欢迎关注。

暂时提供三种样式。

第一种是,纯白背景橙色文字。
第二种是,半透明背景深绿文字。 后续会提供颜色的接口。
第三种是,颜色纯白,背景较深,相比于前两种,第三种是先把水位灌满再降到指定的高度。

也可以根据使用者喜好自行修改

You can’t perform that action at this time.