LQRadarChartDelegate

通过 LQRadarChartDelegate 可以对 RadarChart 的 UI 进行定制

- (UIColor *)colorOfTitleForRadarChart:(LQRadarChart *)radarChart;- (UIColor *)colorOfLineForRadarChart:(LQRadarChart *)radarChart;- (UIColor *)colorOfFillStepForRadarChart:(LQRadarChart *)radarChart step:(NSInteger)step;- (UIColor *)colorOfSectionFillForRadarChart:(LQRadarChart *)radarChart section:(NSInteger)section;- (UIColor *)colorOfSectionBorderForRadarChart:(LQRadarChart *)radarChart section:(NSInteger)section;- fontOfTitleForRadarChart:(LQRadarChart *)radarChart;

竖线和曲线的路径path都是通过贝塞尔来绘制,并通过核心动画,以及传入贝塞尔曲线的参数值的改变来实现动画效果。

澳门微尼斯人手机版 1

需要准备下面的贝塞尔曲线作为做动画所需.

澳门微尼斯人手机版 2

接下来就是开始做动画

澳门微尼斯人手机版 3澳门微尼斯人手机版 4

两个动画的间隔我这里利用NSTimer去处理。当然,也可以用GCD来处理。

[NSTimer scheduledTimerWithTimeInterval:0.65 target:self
selector:@selector(doCureAnimation) userInfo:nil repeats:NO];

澳门微尼斯人手机版 5

需要的声明一个波浪layer,圆环路径layer,百分比显示label。

@property (nonatomic,strong) CAShapeLayer *waveShapeLayer;//波浪线

@property (nonatomic,strong) CAShapeLayer *cicleShapeLayer;//圆环路径

@property (nonatomic,strong) UILabel *progressLabel;//进度显示

绘制一个波浪的原理,在这里我就不解释了,想了解的可以看我上一篇文章《波浪动画》里有详细解释其原理,以及绘制。

初始化控件

澳门微尼斯人手机版 6

需要准备圆环路径贝塞尔曲线,默认从-M_PI/2,要逆时针画圆,结束角度应该为-2*M_PI-M_PI/2
, clockwise==NO

澳门微尼斯人手机版 7

绘制波浪

澳门微尼斯人手机版 8

再申明一个NStimer计时器用来圆环填充,并且判断是否填充完毕,如果没有填充完毕,那么判断在小于70%,波浪的波峰和波速默认不变,在大于70%,波浪的波峰和波速不断递减,直至0。

澳门微尼斯人手机版 9

百分比显示label默认为缩放为0,当执行完变宽动画将去执行缩放动画,默认为缩放1.0,我采取使用NSTimer来过渡,具体代码可在demo里查看。

最后,就是下载完毕后,变成勾勾动画。。

澳门微尼斯人手机版 10

需要做的准备工作:

申明一个CAShapeLayer :

@property (nonatomic,strong) CAShapeLayer
*successShapeLayer;//下载成功

贝塞尔曲线:

澳门微尼斯人手机版 11

初始化:

澳门微尼斯人手机版 12

调取动画:(只需要在计时器里_progress>1.0里调取)

澳门微尼斯人手机版 13

源码地址github

name=”uploadFile”; filename=”001.png”
//这里注明服务器接收图片的参数(类似于接收用户名的userName)及服务器上保存图片的文件名

澳门微尼斯人手机版,一个可以

猛戳此处获取代码

LQRadarChart 是一个简单的可定制的雷达图

基于瓜神发给我一个非常好玩的下载进度条动画,我也去尝试去实现,主要是运用到的技术:核心动画(Core
Animation),贝塞尔曲线(UIBezierPath),正弦函数(y=Asin。

let request=NSMutableURLRequest(URL:NSURL(string:url)!)

LQRadarChart属性

@property(nonatomic,assign) CGFloat radius;@property(nonatomic,assign) CGFloat minValue;@property(nonatomic,assign) CGFloat maxValue;@property(nonatomic,assign) BOOL showPoint;@property(nonatomic,assign) BOOL showBorder;@property(nonatomic,assign) BOOL fillArea;@property(nonatomic,assign) BOOL clockwise;@property(nonatomic,assign) BOOL autoCenterPoint;@property(nonatomic,assign) CGPoint centerPoint;

/*** 设置完成后需 reload ***/

猛戳此处获取代码

效果图:

澳门微尼斯人手机版 14

首先:我们先绘制最开始的图形。

澳门微尼斯人手机版 15

因为考虑到,竖线和倒三角会做动画,为此这里应该2个layer,1个view作为圆环。即

@property (nonatomic,strong) CAShapeLayer *lineShapeLayer;//竖线

@property (nonatomic,strong) CAShapeLayer *curveShapeLayer;//曲线

澳门微尼斯人手机版 16

//这里是空一行,必不可少!!

LQRadarChartDataSource

通过 LQRadarChartDataSource 可以对 RadarChart 的 row,section,setp
进行设置, 并且获取每个 Section 的数据进行绘制

- (NSInteger)numberOfStepForRadarChart:(LQRadarChart *)radarChart;- (NSInteger)numberOfRowForRadarChart:(LQRadarChart *)radarChart;- (NSInteger)numberOfSectionForRadarChart:(LQRadarChart *)radarChart;- (NSString *)titleOfRowForRadarChart:(LQRadarChart *)radarChart row:(NSInteger)row;- valueOfSectionForRadarChart:(LQRadarChart *)radarChart row:(NSInteger)row section:(NSInteger)section;

254

Base

基本概念 描述 演示
Step 背景多边形圈数, 最小值为1 image
Row 多边形边数, 最小值为三 image
Section 同时展现数据组数 image

//这里是图片的格式

(response, data, error) ->Voidin

request.addValue(contentType, forHTTPHeaderField:”Content-Type”)

body.appendData(requestBody)

print

上传图片在网页中最常用的就是POST请求了,将图片编码到POST请求体中,通过请求数据一起发送到服务器上,下面的代码就是POST请求上传图片。

–Boundary+72D4CD655314C423
//分割符,以“–”开头,后面的字随便写,只要不写中文即可

body.appendData(NSString(format:”\r\n”).dataUsingEncoding(NSUTF8StringEncoding)!)

//上传返回的状态

//这一块是文件的名称

body.appendData(NSString(format:”–“+boundary+”\r\n”).dataUsingEncoding(NSUTF8StringEncoding)!)

request.HTTPMethod=”POST”//设置请求方式

})

–Boundary+72D4CD655314C423

这是一个不带其他任务参数,body中只有一张图就要写成这样

//一个图片

body.appendData(NSString(format:”Content-Transfer-Encoding:
binary\r\n\r\n”).dataUsingEncoding(NSUTF8StringEncoding)!)

if(error !=nil){

发表评论

电子邮件地址不会被公开。 必填项已用*标注