Git Product home page Git Product logo

sxwaveanimate's Introduction

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];

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


初始版本

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

暂时提供三种样式。

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

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

sxwaveanimate's People

Contributors

bryant1410 avatar dsxniubility avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sxwaveanimate's Issues

Demo坏掉了吧

如题,iOS8和iOS9下build,不管是真机还是模拟器都是一片纯色背景,其他什么都没有

发现个问题

内存方面好像有问题, tableViewController 被销毁的时候 有内存始终在被占用着

然后就是一个建议, 感觉动画的实现用CAAnimation 会更流畅些 ,我分支尝试了一下,感觉上衔接会比拼接的强点。

还有一个就是那个波浪的资源图, 最好是左右有部分能够重叠, 这样过渡重复动画的时候 就不会有跳跃感了

如何自定义椭圆形状

看了您的SXWaveAnmiate代码,感觉很不错。我们项目正好需要用到,但是我们需求是使用椭圆,类似一个杯子的效果。我技术能力有限,不知道如何可以修改到这种效果? 不知道是否可以指点一下思路,或者付费给您帮实现一下,如能留下联系方式更好,谢谢了

效果如图:http://softscenic.com/1.jpg

Bug:百分比

百分比Label有时大于(或小于)设置值。
例如:
1.设置80%
2.为Label做动画
3.最终应显示80%,却显示79.3%或81.5%

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.