为了正常的体验网站,请在浏览器设置里面开启Javascript功能!

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

2017-09-02 11页 doc 38KB 47阅读

用户头像

is_079973

暂无简介

举报
iOS仿支付宝芝麻信用分数仪表盘动画效果iOS仿支付宝芝麻信用分数仪表盘动画效果 这篇文章主要为大家详细介绍了iOS仿支付宝芝麻信用分数仪表盘动画效果,具有一定的参 考价值,感兴趣的小伙伴们可以参考一下 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字——>背景颜色变化 * */ #import @interface ZLDashboardView : UIView@property...
iOS仿支付宝芝麻信用分数仪表盘动画效果
iOS仿支付宝芝麻信用分数仪盘动画效果 这篇文章主要为大家详细介绍了iOS仿支付宝芝麻信用分数仪表盘动画效果,具有一定的参 考价值,感兴趣的小伙伴们可以参考一下 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字——>背景颜色变化 * */ #import @interface ZLDashboardView : UIView@property (nonatomic, strong) UIImage *bgImage;@property (nonatomic, copy) void(^TimerBlock)(NSInteger); /** * 跃动数字刷新 * */- (void)refreshJumpNOFromNO:(NSString *)startNO toNO:(NSString *)toNO; @end .m 文件 #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.www.hunanwang.net.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 www.visa158.com 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.// Copyright ? 2016年 ZL. All rights reserved.// #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]; _clickBtn = stareButton;} - (void)addSlideChnageValue { CGFloat width = 280; CGFloat height = 40; CGFloat xPixel = (SCREEN_WIDTH - width) * 0.5; CGFloat yPixel = CGRectGetMaxY(_clickBtn.frame) + 20; CGRect slideFrame = CGRectMake(xPixel, yPixel, width, height); UISlider *slider = [[UISlider alloc] initWithFrame:slideFrame]; slider.minimumValue = MinNumber; slider.maximumValue = MaxNumber; slider.minimumTrackTintColor = [UIColor colorWithRed:0.000 green:1.000 blue:0.502 alpha:1.000]; slider.maximumTrackTintColor = [UIColor colorWithWhite:0.800 alpha:1.000]; /** * 注意这 个属性:如果你没有设置滑块的图片,那个这个属性将只会改变已划过一段线条的颜色,不 会改变滑块的颜色,如果你设置了滑块的图片,又设置了这个属性,那么滑块的图片将不显 示,滑块的颜色会改变(IOS7) */ [slider setThumbImage:[UIImage imageNamed:@""] forState:UIControlStateNormal]; slider.thumbTintColor = [UIColor cyanColor]; [slider setValue:0.5 animated:YES]; [slider addTarget:self action:@selector(slideTap:)forControlEvents:UIControlEventValueChanged]; [self.view addSubview:slider]; _slider = slider;} - (void)slideTap:(UISlider *)sender { CGFloat value = sender.value; NSLog(@"%.f",value);} - (void)setupGradientView { self.gradientView = [[ZLGradientView alloc] initWithFrame:self.view.bounds]; [self.view addSubview:self.gradientView];} - (void)setupCircleView { self.dashboardView = [[ZLDashboardView alloc] initWithFrame:CGRectMake(40.f, 70.f, SCREEN_WIDTH - 80.f, SCREEN_WIDTH - 80.f)]; self.dashboardView.bgImage = [UIImage imageNamed:@"backgroundImage"]; [self.view addSubview:self.dashboardView];} - (void)onStareButtonClick:(UIButton *)sender { if (sender.selected) { [self.gradientView removeFromSuperview]; self.gradientView = nil; [self.dashboardView removeFromSuperview]; self.dashboardView = nil; [self setupGradientView]; [self setupCircleView]; [self.view bringSubviewToFront:self.clickBtn]; [self.view bringSubviewToFront:_slider]; } sender.selected = YES; CGFloat value = _slider.value; NSString *startNO = [NSString stringWithFormat:@"%d", MinNumber]; NSString *toNO = [NSString stringWithFormat:@"%.f",value];//@"693"; 950 NSLog(@"endNO:%@",toNO); [self.dashboardView refreshJumpNOFromNO:startNO toNO:toNO]; __block typeof(self)blockSelf = self; self.dashboardView.TimerBlock = ^(NSInteger index) { [blockSelf.gradientView setUpBackGroundColorWithColorArrayIndex:index]; };} @end 以上就是本文的全部,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
/
本文档为【iOS仿支付宝芝麻信用分数仪表盘动画效果】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。 本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。 网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。

历史搜索

    清空历史搜索