当前位置: 萬仟网 > IT编程>移动开发>IOS > iOS实现轮盘动态效果

iOS实现轮盘动态效果

2020年06月23日  | 萬仟网IT编程  | 我要评论

本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下

一个常用的绘图,主要用来打分之类的动画,效果如下。

主要是ios的绘图和动画,本来想用系统自带动画实现呢,发现实现不了,用了其他办法延时并重绘视图没有成功,用了gcd延时,nsthread休眠,performselector delay 都不行。最后用了一个定时器实现类似效果,总感觉不太明智,以后应该考虑下对calayer和

隐式动画的角度考虑下

#import <uikit/uikit.h>
 
/**
 *  自定义变量里面以s结尾的表示具体的数值,否则表示的是表示显示具体内容的标签,以lbe的表示对内容的说明
 
   比如comments 表示的具体评价内容,comment 表示评价的具体内容,lbecomment 是一个显示 "评价:"的标签
 */
 
@interface scoreplateview : uiview
 
/*速度满意度*/
@property (nonatomic,assign) cgfloat speedvalues;
 
/*态度满意度*/
@property (nonatomic,assign) cgfloat altitudevalues;
 
/*把半圆分割的份数*/
@property (nonatomic,assign) int precision;
/**
 * 整体评价
 */
@property (nonatomic,strong) nsstring * comments;
/**
 * 满分是多少分
 */
@property (nonatomic,assign) cgfloat fullvalues;
/**
 * 综合评分
 */
@property (nonatomic,assign) cgfloat comprevalues;
/**
 * 开始角度
 */
 
@property (nonatomic,assign) cgfloat startangle;
/**
 * 终止角度
 */
@property (nonatomic,assign) cgfloat endangle;
 
//-(void)startanimation;
@end
#import "scoreplateview.h"
 
@interface scoreplateview()
{
  cgfloat d_speed;//执行动画时候每个的增量
  cgfloat d_altitude;
  cgfloat d_comp;
}
 
@property (nonatomic,strong) uilabel*lbecomprevalue;//综合分数的标签
 
@property (nonatomic,strong) uilabel *comprevalue;//综合分数的具体数值
 
@property (nonatomic,strong) uilabel * comment;//评价
 
@property (nonatomic,assign) cgfloat cur_speedv;//当前的值
 
@property (nonatomic,assign) cgfloat cur_altitudev;//当前的态度;
 
@property (nonatomic,assign) cgfloat cur_compv;//当前的综合分数
@property (nonatomic,assign) nstimer * timer;
 
@end
 
@implementation scoreplateview
 
- (instancetype)initwithframe:(cgrect)frame
{
  if (self = [super initwithframe:frame]) {
    
    self.precision= 50;//这里设置默认值;
    self.fullvalues =5;
    self.altitudevalues=3.0;
    self.speedvalues=4.0;
    self.backgroundcolor = [uicolor clearcolor];
    self.startangle=0.1*m_pi;
    self.endangle = 0.9*m_pi;
    self.comments =@"真是太不可思议了";
    self.backgroundcolor = [uicolor greencolor];
    _cur_compv=0;
    _cur_speedv=0;
    _cur_altitudev=0;
  }
  return self;
}
- (void)drawrect:(cgrect)rect {
  
  //1. 画圆
  
  cgfloat circlemargin = 0; //上下两个半圆的间距
  cgfloat topbottommargin =20;//这个间距用来显示服务态度和服务速度那样标签内容
  
  cgfloat radius = (self.frame.size.height-circlemargin-2*topbottommargin)/2;//半径
  //上边圆的圆心
  cgpoint centertop = cgpointmake(self.frame.size.width/2,self.frame.size.height/2-circlemargin/2);
  [self drawhalfcircle:centertop andwithradius:radius istop:yes];
  //下面圆的圆心
  cgpoint centerbottom = cgpointmake(self.frame.size.width/2, self.frame.size.height/2+circlemargin/2);
  [self drawhalfcircle:centerbottom andwithradius:radius istop:no];
  
  //2. 创建需要的标签,并在合适的位置绘制内容
  uilabel * lbealtitude = [[uilabel alloc]initwithframe:cgrectmake(0, 0, self.frame.size.width, topbottommargin)];
  lbealtitude.text = @"服务速度";
  lbealtitude.textcolor = [uicolor whitecolor];
  lbealtitude.textalignment = nstextalignmentcenter;
  lbealtitude.font = [uifont systemfontofsize:12];
  [lbealtitude drawtextinrect:lbealtitude.frame];
  
  //服务态度评分
  uilabel * lbespeed = [[uilabel alloc]initwithframe:cgrectmake(0, self.frame.size.height-topbottommargin, self.frame.size.width, topbottommargin)];
  lbespeed.text = @"服务态度";
  lbespeed.textcolor = [uicolor whitecolor];
  lbespeed.textalignment = nstextalignmentcenter;
  lbespeed.font = [uifont systemfontofsize:12];
  [lbespeed drawtextinrect:lbespeed.frame];
  
  //绘制综合评分
  nsstring *attitudescore = [nsstring stringwithformat:@"%.2f/%.2f",_cur_altitudev,self.fullvalues];
  nsmutableattributedstring* attributestring = [[nsmutableattributedstring alloc]initwithstring:attitudescore];
  [attributestring addattribute:nsfontattributename value:[uifont systemfontofsize:26] range:nsmakerange(0, 4)];
  [attributestring addattribute:nsfontattributename value:[uifont systemfontofsize:16] range:nsmakerange(4, 3)];
  self.comprevalue = [[uilabel alloc]initwithframe:cgrectmake(0, radius-topbottommargin,self.frame.size.width, 2*topbottommargin)];
  self.comprevalue.attributedtext = attributestring;
  self.comprevalue.textalignment = nstextalignmentcenter;
  self.comprevalue.textcolor = [uicolor whitecolor];
  self.comprevalue.frame = cgrectmake(0, centertop.y-topbottommargin+circlemargin/2, self.frame.size.width, topbottommargin*2);
  [self.comprevalue drawtextinrect:self.comprevalue.frame];
  
  self.lbecomprevalue = [[uilabel alloc]initwithframe:cgrectmake(0, centertop.y-radius*0.5, self.frame.size.width, topbottommargin*2)];
  self.lbecomprevalue.text =@"综合评分";
  self.lbecomprevalue.textalignment = nstextalignmentcenter;
  self.lbecomprevalue.textcolor = [uicolor whitecolor];
  self.lbecomprevalue.font = [uifont systemfontofsize:14];
  [self.lbecomprevalue drawtextinrect:self.lbecomprevalue.frame];
  //评价内容
  self.comment = [[uilabel alloc]initwithframe:cgrectmake(topbottommargin+circlemargin+radius/2, cgrectgetmaxy(self.comprevalue.frame), radius, topbottommargin*2)];
  self.comment.text =self.comments;
  self.comment.numberoflines=0;
  self.comment.textalignment = nstextalignmentcenter;
  self.comment.textcolor = [uicolor whitecolor];
  self.comment.font = [uifont systemfontofsize:14];
  [self.comment drawtextinrect:self.comment.frame];
  
}
/**
 * 画半圆 绘制刻度的时候可以先绘制从圆心的线,最后用一个内圆裁剪的方式,但是如果要求背景随时变化就局限了,特别是父视图背景是渐变的,要么重新定义该类,要么把这个类视图定义为透明,从而透过父视图背景颜色
  透明的背景无法掩盖从圆心出发的线,
 *
 * @param center 圆心坐标
 * @param radius 半径
 * @param top  是不是画上面的圆
 */
-(void)drawhalfcircle:(cgpoint) center andwithradius:(cgfloat)radius istop:(bool) top
{
  
  //画上面圆的边框
  cgcontextref ctx = uigraphicsgetcurrentcontext();
  cgcontextsetstrokecolorwithcolor(ctx, [uicolor whitecolor].cgcolor);
  if (top) {
    cgcontextaddarc(ctx, center.x, center.y, radius, -self.startangle, -self.endangle, 1);
  }
  else
  {
    cgcontextaddarc(ctx, center.x, center.y, radius,self.startangle,self.endangle, 0);
  }
  //设置线的宽度
  cgcontextsetlinewidth(ctx, 1);
  cgcontextsetstrokecolorwithcolor(ctx, [uicolor whitecolor].cgcolor);
  cgcontextstrokepath(ctx);
  //绘制上下圆的分割线
  cgcontextsetlinewidth(ctx, 2);//设置线宽
  cgfloat bordervalue;
  if (top) {
    bordervalue=_cur_altitudev/self.fullvalues;//设置边界值
  }
  else
  {
    bordervalue =_cur_speedv/self.fullvalues;
  }
  //实现动画效果,只能先画刻度,再画具体值
  for (int i=1; i<self.precision; i++)//画刻度
  {
    
    cgcontextsetrgbstrokecolor(ctx, 1.0, 1.0, 1.0, 0.5);//设置白色 透明
    cgfloat endx,endy,startx,starty;//刻度的长度是这里 7 -2 =5;
    if (top) {
      startx = center.x -(radius-10)*cos((double)i/self.precision*(self.endangle-self.startangle)+self.startangle);
      starty = center.y - (radius-10)*sin((double)i/self.precision*(self.endangle-self.startangle)+self.startangle);
      endx = center.x - (radius-2)*cos((double)i/self.precision*(self.endangle-self.startangle)+self.startangle);//圆上的点的x坐标
      endy = center.y - (radius-2)*sin((double)i/self.precision*(self.endangle-self.startangle)+self.startangle);//圆上的点的y坐标
    }
    else
    {
      startx = center.x +(radius-10)*cos((double)i/self.precision*(self.endangle-self.startangle)+self.startangle);
      starty = center.y + (radius-10)*sin((double)i/self.precision*(self.endangle-self.startangle)+self.startangle);
      endx = center.x + (radius-2)*cos((double)i/self.precision*(self.endangle-self.startangle)+self.startangle);//圆上的点的x坐标
      endy = center.y + (radius-2)*sin((double)i/self.precision*(self.endangle-self.startangle)+self.startangle);//圆上的点的y坐标
    }
    cgcontextmovetopoint(ctx, startx, starty);
    cgcontextaddlinetopoint(ctx, endx, endy);
    cgcontextstrokepath(ctx);
  }
  for (int i=1; i<self.precision; i++)
  {
    
    cgfloat curangle =(double)i/self.precision*(self.endangle-self.startangle)+self.startangle;
    if ((double)i/(double)self.precision<bordervalue)
    {
      cgcontextsetrgbstrokecolor(ctx, 1.0, 1.0, 1.0, 1);//设置白色 不透明
      cgfloat endx,endy,startx,starty;//刻度的长度是这里 7 -2 =5;
      if (top) {
        startx = center.x -(radius-10)*cos(curangle);
        starty = center.y - (radius-10)*sin(curangle);
        endx = center.x - (radius-2)*cos(curangle);//圆上的点的x坐标
        endy = center.y - (radius-2)*sin(curangle);//圆上的点的y坐标
      }
      else
      {
        startx = center.x +(radius-10)*cos(curangle);
        starty = center.y + (radius-10)*sin(curangle);
        endx = center.x + (radius-2)*cos(curangle);//圆上的点的x坐标
        endy = center.y + (radius-2)*sin(curangle);//圆上的点的y坐标
      }
      cgcontextmovetopoint(ctx, startx, starty);
      cgcontextaddlinetopoint(ctx, endx, endy);
      cgcontextstrokepath(ctx);
    }
  }
}
- (void)didmovetosuperview
{
  self.timer = [nstimer scheduledtimerwithtimeinterval:0.1 target:self selector:@selector(update) userinfo:nil repeats:yes];
  d_comp = self.comprevalues/20;
  d_speed= self.speedvalues/20;
  d_altitude=self.speedvalues/20;
}
-(void)update
{
  _cur_altitudev+=d_altitude;
  _cur_speedv+=d_speed;
  _cur_compv+=d_comp;
  if (_cur_altitudev>self.altitudevalues) {
    _cur_altitudev =self.altitudevalues;
  }
  if (_cur_speedv > self.speedvalues) {
    _cur_speedv=self.speedvalues;
  }
  if (_cur_compv>self.comprevalues) {
    _cur_compv=self.comprevalues;
  }
  if ( _cur_compv==self.comprevalues&&_cur_speedv==self.speedvalues&&_cur_altitudev ==self.altitudevalues) {
    
    [self.timer invalidate];
    self.timer = nil;
  }
  //self.backgroundcolor = [uicolor colorwithred:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
  [self setneedsdisplay];
 
}
 
@end

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • ios uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com