iOS实现轮盘动态效果

本文实例为大家分享了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

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

时间: 2020-04-16

iOS实现新年抽奖转盘效果的思路

临近春节,相信不少app都会加一个新的需求--新年抽奖 不多废话,先上GIF效果图 DEMO链接 1. 跑马灯效果 2. 抽奖效果 实现步骤: 一.跑马灯效果 其实很简单,就是通过以下两张图片,用NSTimer无限替换,达到跑马灯的效果 实现代码: _rotaryTable = [[UIImageView alloc] initWithFrame:CGRectMake((kScreenWidth-366*XT)/2, 218*XT, 366*XT, 318*XT)]; _rotaryTable.

iOS实现转盘效果

本文实例为大家分享了iOS实现转盘效果的具体代码,供大家参考,具体内容如下 Demo下载地址: iOS转盘效果 功能:实现了常用的iOS转盘效果,轮盘抽奖效果的实现,转盘可以暂停,旋转,已经快速旋转抽奖,选中的效果指向正上方. 效果图: 工程文件目录: 核心代码: // // ViewController.m // 转盘效果 // // Created by llkj on 2017/8/31. // Copyright © 2017年 LayneCheung. All rights reser

iOS开发实现转盘功能

本文实例为大家分享了iOS实现转盘功能的具体代码,供大家参考,具体内容如下 今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看 ViewController #pragma mark - 如果要旋转那就第一考虑锚点 核心动画看到的都是假象 真实的位置并没有发生改变 // // ViewController.m // 5-网易转盘的实现 // // Created by Jordan zhou on 2018/10/10. // Copyright © 2018年 Jordan zhou.

iOS开发之自定义图片拉伸功能

需求 为了减小app体积,同时为了适配不同尺寸屏幕或不同应用场景,很多图片素材都是标准通用的,比如IM消息气泡.按钮阴影效果等,但直接使用这些素材会产生一些问题,假如我们需要实现以下效果,即使用图片为账号密码输入框添加阴影效果: 图片素材: 直接使用图片实现的效果与需求效果对比: 经过自定义拉伸调整过后,最终效果: 实现 将storyboard中的控件关联到代码文件中,accountTextBgImageView 为textFiled 下的背景图片视图,实现代码如下: UIImage *text

iOS开发微信收款到账语音提醒功能思路详解

一.背景 为了解决小商户老板们在频繁交易中不方便核对.确认到账的痛点,产品MM提出了新版本需要支持收款到账语音提醒功能.这篇文章总结了开发过程中遇到的坑和一些小技巧. 二.技术方案 后台唤醒App 收款到账语音提醒需要收款方在收到款后,播放一段TTS合成语音播报金额,微信在前台时可以通过模板消息将需要播报的金额带下来,再请求TTS数据并播放,但是app在挂起或者被kill掉的情况下要如何请求语音数据并播放呢? iOS提供了两种方式唤醒处于挂起或已经被kill掉的app.分别是Silent Not

iOS开发中Swift 指纹验证功能模块实例代码

iOS调用TouchID代码: override func viewDidLoad() { super.viewDidLoad() let context = LAContext() var error: NSError? = nil let canEvaluatePolicy = context.canEvaluatePolicy(LAPolicy.deviceOwnerAuthenticationWithBiometrics, error: &error) as Bool if error

iOS开发之清除缓存功能的实现

前言 移动应用在处理网络资源时,一般都会做离线缓存处理,其中以图片缓存最为典型,其中很流行的离线缓存框架为SDWebImage.但是,离线缓存会占用手机存储空间,所以缓存清理功能基本成为资讯.购物.阅读类app的标配功能. 清除缓存基本上都是在设置界面的某一个Cell,于是我们可以把清除缓存封装在某一个自定义Cell中 如下图所示: 实现的具体步骤 使用注意:过程中需要用到第三方库,请提前安装好:SDWebImage.SVProgressHUD. 1. 创建自定义Cell,命名为GYLClear

iOS开发中文件的上传和下载功能的基本实现

文件的上传 说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代码. 主控制器的关键代码: 复制代码 代码如下: YYViewController.m #import "YYViewController.h" #define YYEncode(str) [str dataUsingEncoding:NSUTF8StringEncoding] @interface YYV

iOS开发中音频视频播放的简单实现方法

前言 我们在平时的iOS开发中,音视频的播放有很多种,目前系统的自带的都属于 AVFoundation 框架,更加接近于底层,所以灵活性很强,更加方便自定义 还有就是第三方音视频视频播放,特点是功能强大,实现简单,支持流媒体,下面来逐一介绍,给大家参考学习,下面来一起看看详细的介绍吧. 播放系统音效或者短音效 注意: 这里的资源长度最多30秒 资源必须在 Target --> Build Phases --> Copy Bundle Resources 引入资源文件,否则获取不到文件 if l

IOS开发中加载大量网络图片优化方法

IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示.比如: -(UIImage *) getImageFromURL:(NSString *)fileURL { //NSLog(@"执行图片下载函数"); UIImage * result; NSData * data = [NSData dataWithCont

浅谈iOS开发中static变量的三大作用

(1)先来介绍它的第一条也是最重要的一条:隐藏 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性.为理解这句话,我举例来说明.我们要同时编译两个源文件,一个是a.c,另一个是main.c. 下面是a.c的内容 char a = 'A'; // global variable void msg() { printf("Hello\n"); } 下面是main.c的内容 int main(void) { extern char a; // extern v

iOS开发中AVPlayer的简单应用

前言 在iOS开发中,播放视频通常有两种方式,一种是使用MPMoviePlayerController(需要导入MediaPlayer.Framework),还有一种是使用AVPlayer.关于这两个类的区别简而言之就是MPMoviePlayerController使用更简单,功能不如AVPlayer强大,而AVPlayer使用稍微麻烦点,不过功能更加强大.下面这篇文章主要介绍下AVPlayer的简单应用,需要的朋友们一起来看看吧. AVPlayer的简单应用 1.引入系统框架 2.创建视频的u

iOS开发系列--详细介绍数据存取

概览 在iOS开发中数据存储的方式可以归纳为两类:一类是存储为文件,另一类是存储到数据库.例如前面IOS开发系列-Objective-C之Foundation框架的文章中提到归档.plist文件存储,包括偏好设置其本质都是存储为文件,只是说归档或者plist文件存储可以选择保存到沙盒中,而偏好设置系统已经规定只能保存到沙盒的Library/Preferences目录.当然,文件存储并不作为本文的重点内容.本文重点还是说数据库存储,做过数据库开发的朋友应该知道,可以通过SQL直接访问数据库,也可以