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:@"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

运行效果: