IOS制作星星加分效果

制作原理:

1. 使用xib绘制5个星星(图片视图),一个动态显示分数label
2. 计算出最大,小的X,和星星宽度,创建一个显示总分数label
3. 主要是手势触摸时当触摸开始时控制如何显示星星,当移动时控制如何显示星星,当触摸结束时,给定动态显示的分数
4. 如何显示星星:根据触摸点的X确定总分数,再让根据总分数判断调用显示几个星星的方法.

具体demo的代码实现:

xib图:

#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:@"[e-mail]"];    _secondStar.image = [self setImagesWithName:@"[e-mail]"];    _threeStar.image = [self setImagesWithName:@"[e-mail]"];    _fourthStar.image = [self setImagesWithName:@"[e-mail]"];    _fiveStar.image = [self setImagesWithName:@"[e-mail]"];}//设置圆心星星- (void) setOneZhengImg {    _firstStar.image = [self setImagesWithName:@"[e-mail]"];}- (void) setTwoZhengImg {    [self setOneZhengImg];    _secondStar.image = [self setImagesWithName:@"[e-mail]"];}- (void) setThreeZhengImg {    [self setTwoZhengImg];    _threeStar.image = [self setImagesWithName:@"[e-mail]"];}- (void) setFourZhengImg {    [self setThreeZhengImg];    _fourthStar.image = [self setImagesWithName:@"[e-mail]"];}- (void) setFiveZhengImg {    [self setFourZhengImg];    _fiveStar.image = [self setImagesWithName:@"[e-mail]"];}//设置圆心加空心的星星- (void) setFistBanImg {    _firstStar.image = [self setImagesWithName:@"[e-mail]"];}- (void) setSecondBanImg {    [self setOneZhengImg];    _secondStar.image = [self setImagesWithName:@"[e-mail]"];}- (void) setThreeBanImg {    [self setTwoZhengImg];    _threeStar.image = [self setImagesWithName:@"[e-mail]"];}- (void) setFourthBanImg {    [self setThreeZhengImg];    _fourthStar.image = [self setImagesWithName:@"[e-mail]"];}- (void) setFifthBanImg {    [self setFourZhengImg];    _fiveStar.image = [self setImagesWithName:@"[e-mail]"];}@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

运行效果: