IOS制作星星加分效果

制作原理:

#import <UIKit/UIKit.h>
@interface HHFStarView : UIView
+(instancetype) starView;
@end

//
//  HHFStarView.m
//  HHFStarDemo
//
//  Created by mac on 16/8/11.
//  Copyright © 2016年 huang. All rights reserved.
//

#import "HHFStarView.h"
#import "UIViewExt.h"

#define kScreenHeight  CGRectGetHeight([UIScreen mainScreen].bounds)
#define kScreenWidth  CGRectGetWidth([UIScreen mainScreen].bounds)

/**
*设置颜色的值
*/
#define RGBCOLOR(r,g,b,_alpha) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:_alpha]
@interface HHFStarView()
//5颗星星
@property (weak, nonatomic) IBOutlet UIImageView *firstStar;

@property (weak, nonatomic) IBOutlet UIImageView *secondStar;

@property (weak, nonatomic) IBOutlet UIImageView *threeStar;

@property (weak, nonatomic) IBOutlet UIImageView *fourthStar;

@property (weak, nonatomic) IBOutlet UIImageView *fiveStar;
//显示分数
@property (weak, nonatomic) IBOutlet UILabel *scoreLabel;
//动态显示分数label
@property(nonnull,strong) UILabel *label;
//分数
@property(nonatomic,assign) NSInteger leveal;

@end
//最大的x值
static CGFloat maxX;
//最小的x值
static CGFloat minX;
//边距
static const CGFloat margin = 8.0;
//星星的宽度
static CGFloat everyWidth;

@implementation HHFStarView
//类方法
+(instancetype) starView{

HHFStarView *startView = [[[NSBundle mainBundle] loadNibNamed:@"HHFStarView" owner:self options:nil] lastObject];
startView.frame = CGRectMake(0, kScreenHeight-200, kScreenWidth, 200);
//初始化maxX,minX,everyWidth
[startView initValues];

//创建动态显示分数的label
[startView createUI];
return startView;
}
//初始化maxX,minX,everyWidth
- (void) initValues {

maxX = self.fiveStar.right + margin/2;
minX = self.firstStar.left - margin/2;
everyWidth = (self.firstStar.width + margin) / 2;

}
//创建动态显示分数的label
- (void) createUI {
_label = [[UILabel alloc] init];
_label.bounds = CGRectMake(0, 0, 40, 20);
_label.textAlignment = NSTextAlignmentCenter;
_label.font = [UIFont systemFontOfSize:14];
_label.textColor = [UIColor whiteColor];
[self addSubview:_label];
}

//设置单个星星的图片
- (UIImage *) setImagesWithName:(NSString *) imgName {

NSString *path = [[NSBundle mainBundle] pathForResource:imgName ofType:nil];
UIImage *image = [UIImage imageWithContentsOfFile:path];
return image;
}
//手势触摸,当触摸开始时控制如何显示星星
- (void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self setImagesWithTouchs:touches];
}
//手势触摸,当移动时控制如何显示星星
- (void) touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self setImagesWithTouchs:touches];
}
//当触摸结束时,给定动态显示的分数
- (void) touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

_label.text = [NSString stringWithFormat:@"%d分",(int)_leveal];
//若_leveal的值是不为偶数就减1
NSInteger n = _leveal;
if (!(n%2)) {
n --;
}
//动态分数label会随着显示几个星星改变中心点
_label.center = CGPointMake(n*everyWidth+minX, _fiveStar.top-20);
_label.alpha = 1;
[UIView animateWithDuration:1 animations:^{
//动态消失
_label.alpha = 0;
//动态上升星星
_label.center = CGPointMake(n*everyWidth+minX, _fiveStar.top-60);
}];
}

- (void) setImagesWithTouchs:(NSSet *)touches {

UITouch *touch = [touches anyObject];
CGFloat touchX = [touch locationInView:self].x;
CGFloat touchY = [touch locationInView:self].y;
//固定触摸范围,若以下两个条件满足就什么也不做
if (touchY < self.fiveStar.top - 10 || touchY > self.fiveStar.bottom +10) {
return;
}

if (touchX < minX || touchX > maxX) {
return;
}
//确定分数
CGFloat dis = (touchX - minX) / everyWidth;

[self setFiveKongImg];
//分数
_leveal = (NSInteger)dis + 1;

if (dis >= 10.0) {
_leveal = 10;
}
//根据分数,显示几个星星
switch (_leveal) {
case 1:
[self setFistBanImg];
break;
case 2:
[self setOneZhengImg];
break;
case 3:
[self setSecondBanImg];
break;
case 4:
[self setTwoZhengImg];
break;
case 5:
[self setThreeBanImg];
break;
case 6:
[self setThreeZhengImg];
break;
case 7:
[self setFourthBanImg];
break;
case 8:
[self setFourZhengImg];
break;
case 9:
[self setFifthBanImg];
break;
case 10:
[self setFiveZhengImg];
break;

default:
break;
}
//显示共几分
_scoreLabel.text = [NSString stringWithFormat:@"共%d分",(int)_leveal];
}
//设置原始5个空心星星
- (void) setFiveKongImg {

_firstStar.image = [self setImagesWithName:@"kongStar@2x.png"];
_secondStar.image = [self setImagesWithName:@"kongStar@2x.png"];
_threeStar.image = [self setImagesWithName:@"kongStar@2x.png"];
_fourthStar.image = [self setImagesWithName:@"kongStar@2x.png"];
_fiveStar.image = [self setImagesWithName:@"kongStar@2x.png"];

}
//设置圆心星星
- (void) setOneZhengImg {

_firstStar.image = [self setImagesWithName:@"zhengStar@2x.png"];
}

- (void) setTwoZhengImg {

[self setOneZhengImg];
_secondStar.image = [self setImagesWithName:@"zhengStar@2x.png"];
}

- (void) setThreeZhengImg {

[self setTwoZhengImg];
_threeStar.image = [self setImagesWithName:@"zhengStar@2x.png"];
}

- (void) setFourZhengImg {

[self setThreeZhengImg];
_fourthStar.image = [self setImagesWithName:@"zhengStar@2x.png"];
}

- (void) setFiveZhengImg {

[self setFourZhengImg];
_fiveStar.image = [self setImagesWithName:@"zhengStar@2x.png"];
}
//设置圆心加空心的星星
- (void) setFistBanImg {

_firstStar.image = [self setImagesWithName:@"banStar@2x.png"];
}

- (void) setSecondBanImg {

[self setOneZhengImg];
_secondStar.image = [self setImagesWithName:@"banStar@2x.png"];
}

- (void) setThreeBanImg {

[self setTwoZhengImg];
_threeStar.image = [self setImagesWithName:@"banStar@2x.png"];
}

- (void) setFourthBanImg {

[self setThreeZhengImg];
_fourthStar.image = [self setImagesWithName:@"banStar@2x.png"];
}

- (void) setFifthBanImg {

[self setFourZhengImg];
_fiveStar.image = [self setImagesWithName:@"banStar@2x.png"];
}
@end

#import "ViewController.h"
#import "HHFStarView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

HHFStarView *startView = [HHFStarView starView];
[self.view addSubview:startView];
}

@end