IOS imitation Alipay sesame credit dashboard effect

Custom View high imitation Alipay dashboard animation sesame credit score

IOS imitation Alipay sesame credit dashboard effect
dashboard animation effect.Jpg
  • 1 ring green dot rotating
  • 2 points and the change of the cue
  • 3 background color changes

Directly on the main code:

1 custom ZLDashboardView dashboard file:
.H file:

* * * / * * according to the movement of numbers to determine the percentage of > * now beat digital background color change; * * / #import < UIKit/UIKit.h> @interface; ZLDashboardView: UIView @property (nonatomic, strong) UIImage *bgImage; @property (nonatomic, copy) void (^TimerBlock) (NSInteger); / * * * * * - moving digital refresh (void (refreshJumpNOFromNO:) NSString * startNO (NSString) toNO: * toNO; @end)

.m file

#import "ZLDashboardView.h" #import "UIView+Extensions.h" #define degreesToRadians (x) (M_PI* (x) /180.0) / / to convert PI static angle const CGFloat kMarkerRadius = 5.f; / / static const CGFloat cursor diameter kTimerInterval = 0.03; static const CGFloat kFastProportion static const NSInteger = 0.9; MaxNumber = 1000; @interface (ZLDashboardView) {CGFloat animationTime; NSInteger beginNO; NSInteger jumpCurrentNO; NSInteger endNO;} / / percentage of 0 - 100 according to the digital set (nonatomic, @property. Assign) CGFloat percent (nonatomic, strong); @property CAShapeLayer *bottomLayer; / / progress background (nonatomic, assign) @property CGFloat lineWidth; / / arc width @property (nonatomic, strong) UIImageView *markerIma GeView; / / @property cursor (nonatomic, strong) UIImageView *bgImageView; / / @property (nonatomic, assign background CGFloat circelRadius); / / circle diameter @property (nonatomic, assign) CGFloat startAngle @property; / / to (nonatomic, assign) of CGFloat endAngle @property; / / end angle (nonatomic, strong) UILabel *showLable; / / digital jump @property (nonatomic, strong) UILabel *markedLabel; / / @property prompt (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 size should be adjusted according to the pictures (6, 6, self.circelRadius, self.circelRadius * 2 / 3); self.bgImageView.backgroundColor = [UIColor clearColor]; [self addSubview:self.bgImageView]; / / [self / / add circular frame setupCircleBg] cursor; [self setupMarkerImageView]; / / add digital and prompt [self setupJumpNOView] beat return self;};} - (void) setupCircleBg UIBezierPath {/ / *path = [UIBezierPath be circular path ZierPathWithArcCenter: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 color 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.opac Ity = 0.5; self.bottomLayer.lineCap = kCALineCapRound; self.bottomLayer.lineWidth = self.lineWidth; self.bottomLayer.path = [path CGPath]; [self.layer addSublayer:self.bottomLayer]; / / 240 is the radian angle and |-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; _markerImageView.layer.backgroundColor = clearColor]; [UIColor = greenColor].CGColor; _markerImageView.layer.shadowColor [UIColor whiteC Olor].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 50 / 2 + CGFloat; height = self.circelRadius / 2 - 50; CGFloat = self.bgImageView.left + xPixel (self.bgImageView.width - width) *0.5 / //self.circelRadius; 4; CGFloat yPixel = 4 self.circelRadius / 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 prompt alloc] initWithFrame:CGRectMake (xPixel, CGRectGetMaxY (_showLable.frame), width, 30); _markedLabel.backgroundColor [UIColor = clearColor]; _markedLabel.textColor = [UIColor greenColor]; _markedLabel.textAlignment = NST ExtAlignmentCenter _markedLabel.font; systemFontOfSize:20.f] = [UIFont; _markedLabel.text = @ "good nutrition"; [self addSubview:_markedLabel];} #pragma mark - Animation - (void) createAnimationWithStartAngle: (CGFloat) startAngle endAngle: (CGFloat endAngle) {/ / setFireDate:[NSDate / / [_fastTimer cursor animation start timer distantPast]]; / / set CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@ animation attribute "position"] = pathAnimation.calculationMode; kCAAnimationPaced; pathAnimation.fillMode = kCAFillModeForwards; pathAnimation.removedOnCompletion = NO; pathAnimation.duration = _percent * kTimerInterval; pathAnimation.timingFunction = [CAMediaTimingFunction func TionWithName:kCAMediaTimingFunctionEaseOut]; pathAnimation.repeatCount = 1; / / set CGMutablePathRef path = CGPathCreateMutable (animation path); 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 / * * * * * to determine the percentage of animation (void) - refreshJumpNOFromNO: (NSString * startNO) toNO: (NSString * toNO) {beginNO = 0; //[startNO integerValue]; jumpCurrentNO = 0; //[startNO integerValue] endNO; [toNO = integerValue]; _percent = endNO * MaxNumber / 100; NSInteger diffNum = endNO - beginNO; if (diffNum < = 0; {return}); if (diffNum < 100) {_intervalNum} (if = 5; else diffNum < 300) {_intervalNum = 15;} else (diffNum < if = MaxNumber) {_intervalNum = 10;} NSLog (@ "digital interval:%ld, _intervalNum); / / setupJumpThings] / / digital [self; set the angle NSInteger angle = 0; NSInteger = num [toNO floatValue] [startNO floatValue]; if (Num < 200) {angle = self.startAngle + 220 * (Num / 200) / 5}; else if (Num < 350) {angle = self.startAngle + 220 / 5 + (3 / 5 * 220) * (num - 200) / 150;} else {angle = self.startAngle + 220 / 5 + (220 * 4 * (Num) / 5 - 350 / 250}); / / [self createAnimationWithStartAngle:degreesToRadians cursor (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 digital beat {animationTime = _percent * kTimerInterval; self.fastTimer = [NSTimer timerWithTimeInterval:kTimerInterval*kFastProportion target:self selector:@selec Tor (fastTimerAction) userInfo:nil repeats:YES]; [[NSRunLoop currentRunLoop] addTimer:_fastTimer forMode:NSRunLoopCommonModes]; / / interval = (the total number of time intervals * fast change) / number / / again need to change the time of NSInteger fastEndNO = endNO * kFastProportion; NSInteger fastJump = fastEndNO/_intervalNum; if (fastJump% _intervalNum) {fastJump++; fastEndNO = _intervalNum;} CGFloat fastTTime = fastJump*kTimerInterval*kFastProportion; / / changNO = NSInteger beats remaining should be endNO - fastEndNO; NSInteger endJump = changNO / _intervalNum + changNO% _intervalNum; / / slow Time interval 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 acceleration timer trigger event - (void) fastTimerAction (jumpCurrentNO = {if > endNO) {[self.fastTimer invalidate]; return }; if (jumpCurrentNO = endNO * > kFastProportion) {[self.fastTimer invalidate]; [self.slowTimer setFireDate:[NSDate distantPast]]; return [self commonTimerAction];}}; #pragma mark deceleration timer trigger event - (void) slowTimerAction (jumpCurrentNO = {if > endNO) {[self.slowTimer invalidate]}; return; [self commonTimerAction];} #pragma mark common event timer lable assignment background color and hints of language change (void) {if (commonTimerAction

Display in the desired current controller:

/ / / / ViewController.m / / ZLDashboard / / Created / / by QTX on 16/9/19. Copyright ZL. All rights of 2016 / / 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) ZLDashboardView *dashboardView, strong); @property (nonatomic, strong) ZLGradientView * gradientView; @property (nonatomic, strong) UIButton * clickBtn; @property (nonatomic, strong) UISlider * slider; @end @implementation ViewController (void viewDidLoad) {[super ViewDidLoad]; / / create the background color [self setupGradientView]; / / create a dashboard [self setupCircleView]; / / add animation by clicking the button [self trigger addActionButton]; / / [self change value addSlideChnageValue];} - {UIButton (void) addActionButton * 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 CGFloat {width = 280; 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] [UIColor colorWithWhite:0.800; slider.maximumTrackTintColor = alpha:1.000]; / * * * Note: if you do not have this property. The slide picture, this property will only change the color of the line has been across a period, will not change the color of the slider, if you set the slider image sets this property, then the image will not display the slider, slider color changes (IOS7) * setThumbImage:[UIImage imageNamed:@ "[slider] 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];} - {self.dashboardView = setupCircleView (void) [[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 {[self.gradientView (sender.selected) 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 CGFloat = YES; value = _slider.value; NSString = *startNO [NSString stringWithFormat:@%d, MinNumber] NSString *toNO; stringWithFormat:@ [NSString = "%.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

Specific reference code, the collation of the rough, and so I upload Demo code after the subdivision of these steps ~!


Custom View high imitation Alipay sesame credit score dashboard animation directly on the main code: 1 custom dashboard ZLDashboardView file: