iOS仿支付宝芝麻信用分数仪表盘动画效果

先看看效果图：

仪表盘动画效果.jpg

1.圆环上绿点的旋转

2.分数值及提示语的变化

3.背景色的变化

直接上主要代码:

1.自定义zldashboardview仪表盘文件:

.h 文件:

/**

* 根据跃动数字

*

* 确定百分比

* 现在的跳动数字——>背景颜色变化

*

*/

#import <uikit/uikit.h>

@interface zldashboardview : uiview

@property (nonatomic, strong) uiimage *bgimage;

@property (nonatomic, copy) void(^timerblock)(nsinteger);

/**

* 跃动数字刷新

*

*/

- (void)refreshjumpnofromno:(nsstring *)startno tono:(nsstring *)tono;

@end

.m 文件

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

#import "zldashboardview.h"

#import "uiview+extensions.h"

#define degreestoradians(x) (m_pi*(x)/180.0) //把角度转换成pi的方式

static const cgfloat kmarkerradius = 5.f; // 光标直径

static const cgfloat ktimerinterval = 0.03;

static const cgfloat kfastproportion = 0.9;

static const nsinteger maxnumber = 1000;

@interface zldashboardview () {

cgfloat animationtime;

nsinteger beginno;

nsinteger jumpcurrentno;

nsinteger endno;

}

// 百分比 0 - 100 根据跃动数字设置

@property (nonatomic, assign) cgfloat percent;

@property (nonatomic, strong) cashapelayer *bottomlayer; // 进度条底色

@property (nonatomic, assign) cgfloat linewidth; // 弧线宽度

@property (nonatomic, strong) uiimageview *markerimageview; // 光标

@property (nonatomic, strong) uiimageview *bgimageview; // 背景图片

@property (nonatomic, assign) cgfloat circelradius; //圆直径

@property (nonatomic, assign) cgfloat startangle; // 开始角度

@property (nonatomic, assign) cgfloat endangle; // 结束角度

@property (nonatomic, strong) uilabel *showlable; // 跳跃数字

@property (nonatomic, strong) uilabel *markedlabel; // 提示语

@property (nonatomic, strong) nstimer *fasttimer;

@property (nonatomic, strong) nstimer *slowtimer;

@property (nonatomic, assign) nsinteger intervalnum;

@end

@implementation zldashboardview

#pragma mark - life cycle

- (instancetype)initwithframe:(cgrect)frame {

self = [super initwithframe:frame];

if (self) {

self.backgroundcolor = [uicolor clearcolor];

self.circelradius = self.frame.size.width - 10.f;

self.linewidth = 2.f;

self.startangle = -200.f;

self.endangle = 20.f;

// 尺寸需根据图片进行调整

self.bgimageview.frame = cgrectmake(6, 6, self.circelradius, self.circelradius * 2 / 3);

self.bgimageview.backgroundcolor = [uicolor clearcolor];

[self addsubview:self.bgimageview];

//添加圆框

[self setupcirclebg];

//光标

[self setupmarkerimageview];

//添加跃动数字及提示语

[self setupjumpnoview];

}

return self;

}

- (void)setupcirclebg {

// 圆形路径

uibezierpath *path = [uibezierpath bezierpathwitharccenter:cgpointmake(self.width / 2, self.height / 2)

radius:(self.circelradius - self.linewidth) / 2

startangle:degreestoradians(self.startangle)

endangle:degreestoradians(self.endangle)

clockwise:yes];

// 底色

self.bottomlayer = [cashapelayer layer];

self.bottomlayer.frame = self.bounds;

self.bottomlayer.fillcolor = [[uicolor clearcolor] cgcolor];

self.bottomlayer.strokecolor = [[uicolor colorwithred:206.f / 256.f green:241.f / 256.f blue:227.f alpha:1.f] cgcolor];

self.bottomlayer.opacity = 0.5;

self.bottomlayer.linecap = kcalinecapround;

self.bottomlayer.linewidth = self.linewidth;

self.bottomlayer.path = [path cgpath];

[self.layer addsublayer:self.bottomlayer];

// 240 是用整个弧度的角度之和 |-200| + 20 = 220

// [self createanimationwithstartangle:degreestoradians(self.startangle)

// endangle:degreestoradians(self.startangle + 220 * 1)];

}

- (void)setupmarkerimageview {

if (_markerimageview) {

return;

}

_markerimageview = [[uiimageview alloc] init];

_markerimageview.backgroundcolor = [uicolor clearcolor];

_markerimageview.layer.backgroundcolor = [uicolor greencolor].cgcolor;

_markerimageview.layer.shadowcolor = [uicolor whitecolor].cgcolor;

_markerimageview.layer.shadowoffset = cgsizemake(0, 0);

_markerimageview.layer.shadowradius = kmarkerradius*0.5;

_markerimageview.layer.shadowopacity = 1;

_markerimageview.layer.maskstobounds = no;

self.markerimageview.layer.cornerradius = self.markerimageview.frame.size.height / 2;

[self addsubview:self.markerimageview];

_markerimageview.frame = cgrectmake(-100, self.height, kmarkerradius, kmarkerradius);

}

- (void)setupjumpnoview {

if (_showlable) {

return;

}

cgfloat width = self.circelradius / 2 + 50;

cgfloat height = self.circelradius / 2 - 50;

cgfloat xpixel = self.bgimageview.left + (self.bgimageview.width - width)*0.5;//self.circelradius / 4;

cgfloat ypixel = self.circelradius / 4;

cgrect labelframe = cgrectmake(xpixel, ypixel, width, height);

_showlable = [[uilabel alloc] initwithframe:labelframe];

_showlable.backgroundcolor = [uicolor clearcolor];

_showlable.textcolor = [uicolor greencolor];

_showlable.textalignment = nstextalignmentcenter;

_showlable.font = [uifont systemfontofsize:100.f];

_showlable.text = [nsstring stringwithformat:@"%ld",jumpcurrentno];

[self addsubview:_showlable];

// 提示语

_markedlabel = [[uilabel alloc] initwithframe:cgrectmake(xpixel, cgrectgetmaxy(_showlable.frame), width, 30)];

_markedlabel.backgroundcolor = [uicolor clearcolor];

_markedlabel.textcolor = [uicolor greencolor];

_markedlabel.textalignment = nstextalignmentcenter;

_markedlabel.font = [uifont systemfontofsize:20.f];

_markedlabel.text = @"营养良好";

[self addsubview:_markedlabel];

}

#pragma mark - animation

- (void)createanimationwithstartangle:(cgfloat)startangle endangle:(cgfloat)endangle { // 光标动画

//启动定时器

[_fasttimer setfiredate:[nsdate distantpast]];

// 设置动画属性

cakeyframeanimation *pathanimation = [cakeyframeanimation animationwithkeypath:@"position"];

pathanimation.calculationmode = kcaanimationpaced;

pathanimation.fillmode = kcafillmodeforwards;

pathanimation.removedoncompletion = no;

pathanimation.duration = _percent * ktimerinterval;

pathanimation.timingfunction = [camediatimingfunction functionwithname:kcamediatimingfunctioneaseout];

pathanimation.repeatcount = 1;

// 设置动画路径

cgmutablepathref path = cgpathcreatemutable();

cgpathaddarc(path, null, self.width / 2, self.height / 2, (self.circelradius - kmarkerradius / 2) / 2, startangle, endangle, 0);

pathanimation.path = path;

cgpathrelease(path);

[self.markerimageview.layer addanimation:pathanimation forkey:@"movemarker"];

}

#pragma mark - setters / getters

/**

* 开始动画确定百分比

*

*/

- (void)refreshjumpnofromno:(nsstring *)startno tono:(nsstring *)tono {

beginno = 0;//[startno integervalue];

jumpcurrentno = 0;//[startno integervalue];

endno = [tono integervalue];

_percent = endno * 100 / maxnumber;

nsinteger diffnum = endno - beginno;

if (diffnum <= 0) {

return;

}

if (diffnum < 100) {

_intervalnum = 5;

} else if (diffnum < 300) {

_intervalnum = 15;

} else if (diffnum <= maxnumber) {

_intervalnum = 10;

}

nslog(@"数字间隔：%ld",_intervalnum);

//数字

[self setupjumpthings];

// 设置角度

nsinteger angle = 0;

nsinteger num = [tono floatvalue] - [startno floatvalue];

if (num < 200) {

angle = self.startangle + 220 * (num / 200.0) / 5.0;

} else if (num < 350) {

angle = self.startangle + 220 / 5.0 + (3 / 5.0 * 220) * (num - 200) / 150.0;

} else {

angle = self.startangle + 220 / 5.0 * 4 + (220 / 5.0) * (num - 350) / 250.0;

}

//光标

[self createanimationwithstartangle:degreestoradians(self.startangle)

endangle:degreestoradians(angle)];

}

- (void)setbgimage:(uiimage *)bgimage {

_bgimage = bgimage;

self.bgimageview.image = bgimage;

}

- (uiimageview *)bgimageview {

if (nil == _bgimageview) {

_bgimageview = [[uiimageview alloc] init];

}

return _bgimageview;

}

#pragma mark - 跃动数字

- (void)setupjumpthings {

animationtime = _percent * ktimerinterval;

self.fasttimer = [nstimer timerwithtimeinterval:ktimerinterval*kfastproportion

target:self

selector:@selector(fasttimeraction)

userinfo:nil

repeats:yes];

[[nsrunloop currentrunloop] addtimer:_fasttimer formode:nsrunloopcommonmodes];

//时间间隔 = （总时间 - 快时间间隔*变化次数）/ 再次需要变化的次数

//快时间

nsinteger fastendno = endno * kfastproportion;

nsinteger fastjump = fastendno/_intervalnum;

if (fastjump % _intervalnum) {

fastjump++;

fastendno += _intervalnum;

}

cgfloat fastttime = fastjump*ktimerinterval*kfastproportion;

//剩余应跳动次数

nsinteger changno = endno - fastendno;

nsinteger endjump = changno / _intervalnum + changno % _intervalnum;

//慢时间间隔

nstimeinterval slowinterval = (animationtime - fastttime) / endjump;

self.slowtimer = [nstimer timerwithtimeinterval:slowinterval

target:self

selector:@selector(slowtimeraction)

userinfo:nil

repeats:yes];

[[nsrunloop currentrunloop] addtimer:_slowtimer formode:nsrunloopcommonmodes];

[_fasttimer setfiredate:[nsdate distantfuture]];

[_slowtimer setfiredate:[nsdate distantfuture]];

}

#pragma mark 加速定时器触发事件

- (void)fasttimeraction {

if (jumpcurrentno >= endno) {

[self.fasttimer invalidate];

return;

}

if (jumpcurrentno >= endno * kfastproportion) {

[self.fasttimer invalidate];

[self.slowtimer setfiredate:[nsdate distantpast]];

return;

}

[self commontimeraction];

}

#pragma mark 减速定时器触发事件

- (void)slowtimeraction {

if (jumpcurrentno >= endno) {

[self.slowtimer invalidate];

return;

}

[self commontimeraction];

}

#pragma mark 计时器共性事件 - lable赋值背景颜色及提示语变化

- (void)commontimeraction {

if (jumpcurrentno % 100 == 0 && jumpcurrentno != 0) {

nsinteger colorindex = jumpcurrentno / 100;

dispatch_async(dispatch_get_main_queue(), ^{

if (self.timerblock) {

self.timerblock(colorindex);

}

});

}

nsinteger changevalueby = endno - jumpcurrentno;

if (changevalueby/10 < 1) {

jumpcurrentno++;

} else {

// nsinteger changeby = changevalueby / 10;

jumpcurrentno += _intervalnum;

}

_showlable.text = [nsstring stringwithformat:@"%ld",jumpcurrentno];

if (jumpcurrentno < 350) {

_markedlabel.text = @"营养太差";

} else if (jumpcurrentno <= 550) {

_markedlabel.text = @"营养较差";

} else if (jumpcurrentno <= 600) {

_markedlabel.text = @"营养中等";

} else if (jumpcurrentno <= 650) {

_markedlabel.text = @"营养良好";

} else if (jumpcurrentno <= 700) {

_markedlabel.text = @"营养优秀";

} else if (jumpcurrentno <= 950) {

_markedlabel.text = @"营养较好";

}

@end

在所需的当前控制器里展示:

//

// viewcontroller.m

// zldashboard

//

// created by qtx on 16/9/19.

//

#import "viewcontroller.h"

#import "zldashboardview.h"

#import "zlgradientview.h"

#import "uiview+extensions.h"

#define screen_width ([[uiscreen mainscreen] bounds].size.width)

#define screen_height ([[uiscreen mainscreen] bounds].size.height)

#define minnumber 350

#define maxnumber 950

@interface viewcontroller ()

@property (nonatomic, strong) zldashboardview *dashboardview;

@property (nonatomic, strong) zlgradientview * gradientview;

@property (nonatomic, strong) uibutton * clickbtn;

@property (nonatomic, strong) uislider * slider;

@end

@implementation viewcontroller

- (void)viewdidload {

[super viewdidload];

//创建背景色

[self setupgradientview];

//创建仪表盘

[self setupcircleview];

//添加触发动画的点击button

[self addactionbutton];

//改变value

[self addslidechnagevalue];

}

- (void)addactionbutton {

uibutton *starebutton = [uibutton buttonwithtype:uibuttontypecustom];

starebutton.frame = cgrectmake(10.f, self.dashboardview.bottom + 50.f, screen_width - 20.f, 38.f);

[starebutton addtarget:self action:@selector(onstarebuttonclick:) forcontrolevents:uicontroleventtouchupinside];

[starebutton settitle:@"start animation" forstate:uicontrolstatenormal];

[starebutton setbackgroundcolor:[uicolor lightgraycolor]];

starebutton.layer.maskstobounds = yes;

starebutton.layer.cornerradius = 4.f;

[self.view addsubview:starebutton];

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持快网idc。

iOS仿支付宝芝麻信用分数仪表盘动画效果

相关文章

快网idc优惠网

相关文章

微信

快网idc优惠网

QQ交流群