美文网首页iOS那点事儿
iOS老虎机的实现

iOS老虎机的实现

作者: wsj_2012 | 来源:发表于2018-07-25 18:00 被阅读0次

⚠️: 项目需要使用pods进行管理开发,这里需要依赖的第三方库有SDWebImage、pop

1、直接上代码

SlotsItemView.h

//
//  SlotsItemView.h
//
//  Created by wsj_2012 on 2017/8/18.
//  Copyright © 2017年 wsj_2012. All rights reserved.
//

#import <UIKit/UIKit.h>

@class SlotsItemView;
@protocol SlotsItemViewDelegate <NSObject>

- (void)slotsItemView:(SlotsItemView *)itemView animationDidFinished:(BOOL)finished;

@end

@interface SlotsItemView : UIView

@property (nonatomic, strong) NSArray<NSString *> *data;
@property (nonatomic, strong) NSString *result;

@property (nonatomic) NSInteger index;
@property (nonatomic) CFTimeInterval unitInterval;
@property (nonatomic) CGFloat decayRatio; // 0 ~ 0.2;

@property (nonatomic, weak) id <SlotsItemViewDelegate> delegate;

- (void)start;

- (void)decelerate;

@end

SlotsItemView.m

//
//  SlotsItemView.m
//
//  Created by wsj_2012 on 2017/8/18.
//  Copyright © 2017年 wsj_2012. All rights reserved.
//

#import "SlotsItemView.h"
#import <pop/POP.h>

@interface SlotsContentView : UIView

@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) UILabel *label;
@property (nonatomic, strong) NSString *imageName;

@end

@implementation SlotsContentView

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
        _imageView.contentMode = UIViewContentModeScaleToFill;
        _imageView.image = [UIImage imageNamed:@"sign_slots_bg" inBundle:[NSBundle bundleForClass:self.class] compatibleWithTraitCollection:nil];
        _imageView.contentMode = UIViewContentModeScaleAspectFit;
        [self addSubview:_imageView];
        
        _label = [[UILabel alloc] initWithFrame:_imageView.frame];
        _label.textAlignment = NSTextAlignmentCenter;
        _label.font = [UIFont systemFontOfSize:30];
        [self addSubview:_label];
    }
    return self;
}

- (void)setImageName:(NSString *)imageName
{
    ///这里使用到了自己加工的基础扩展库,也可以直接使用SDWebImage库
    [self.imageView ydt_setImageWithURLString:imageName placeholder:nil];
}

@end

static const CGFloat kFinalInterval = 1.f;
static const CGFloat kDecayStep = 0.5f;

@interface SlotsItemView () <POPAnimationDelegate>

@property (nonatomic, strong) SlotsContentView *contentView1;
@property (nonatomic, strong) SlotsContentView *contentView2;
@property (nonatomic, strong) SlotsContentView *showView;
@property (nonatomic, strong) SlotsContentView *readyView;

@property (nonatomic) CGFloat width;
@property (nonatomic) CGFloat height;
@property (nonatomic) BOOL isDecelerate;
@property (nonatomic) CGFloat step;

@end

@implementation SlotsItemView

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.clipsToBounds = YES;
        _index = 0;
        _unitInterval = 0.1;
        _step = 0;
        CGRect frame1 = CGRectMake(0, 0, frame.size.width, frame.size.height);
        CGRect frame2 = CGRectMake(0, frame.size.height, frame.size.width, frame.size.height);
        
        _contentView1 = [[SlotsContentView alloc] initWithFrame:frame1];
        [self addSubview:_contentView1];
        _showView = _contentView1;
        
        _contentView2 = [[SlotsContentView alloc] initWithFrame:frame2];
        [self addSubview:_contentView2];
        _readyView = _contentView2;
    }
    return self;
}

- (void)start
{
    if (self.data.count == 0) {
        return;
    }
    [self reset];
    [self animate1];
}

- (void)decelerate
{
    self.isDecelerate = YES;
}

- (CGFloat)deltaInterval
{
    self.step += kDecayStep;
    return self.decayRatio * self.step * self.step;
}

- (void)reset
{
    _index = 0;
    _unitInterval = 0.1;
    _step = 0;
    _isDecelerate = NO;
    self.bounds = CGRectMake(0, 0, self.width, self.height);
    self.contentView1.frame = CGRectMake(0, 0, self.width, self.height);
    self.contentView2.frame = CGRectMake(0, self.height, self.width, self.height);
}

- (void)animate1
{
    if (self.isDecelerate) {
        self.unitInterval += [self deltaInterval];
    }
    
    CGRect bounds = CGRectMake(0, (_index + 1) * self.height, self.width, self.height);
    CGRect frame1 = CGRectMake(0, (_index + 2) * self.height, self.width, self.height);
    __weak typeof(self) weakSelf = self;
    POPBasicAnimation *animation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewBounds];
    animation.delegate = self;
    animation.toValue = [NSValue valueWithCGRect:bounds];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.duration = _unitInterval;
    animation.completionBlock = ^(POPAnimation *anim, BOOL finished) {
        if (finished) {
            weakSelf.index += 1;
            weakSelf.contentView1.frame = frame1;
            weakSelf.contentView1.imageName = weakSelf.data[weakSelf.index % weakSelf.data.count];
            [weakSelf animate2];
        }
    };
    
    if (self.unitInterval > kFinalInterval) {
        self.contentView2.imageName = self.result;
        animation.completionBlock = nil;
        self.showView = self.contentView2;
        self.readyView = self.contentView1;
    }
    
    [self pop_addAnimation:animation forKey:@"animate1"];
}


- (void)animate2
{
    if (self.isDecelerate) {
        self.unitInterval += [self deltaInterval];
    }
    
    CGRect bounds = CGRectMake(0, (_index + 1) * self.height, self.width, self.height);
    CGRect frame2 = CGRectMake(0, (_index + 2) * self.height, self.width, self.height);
    __weak typeof(self) weakSelf = self;
    POPBasicAnimation *animation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewBounds];
    animation.delegate = self;
    animation.toValue = [NSValue valueWithCGRect:bounds];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.duration = _unitInterval;
    animation.completionBlock = ^(POPAnimation *anim, BOOL finished) {
        if (finished) {
            weakSelf.index += 1;
            weakSelf.contentView2.frame = frame2;
            weakSelf.contentView2.imageName = weakSelf.data[weakSelf.index % weakSelf.data.count];
            [weakSelf animate1];
        }
    };
    
    
    if (self.unitInterval > kFinalInterval) {
        self.contentView1.imageName = self.result;
        animation.completionBlock = nil;
        self.showView = self.contentView1;
        self.readyView = self.contentView2;
    }
    
    [self pop_addAnimation:animation forKey:@"animate2"];
}

- (void)setData:(NSArray<NSString *> *)data
{
    _data = data;
    self.showView.imageName = _result ?: data.firstObject;
    self.readyView.imageName = data[(_index + 1) % data.count];
}

- (CGFloat)width
{
    return self.frame.size.width;
}

- (CGFloat)height
{
    return self.frame.size.height;
}

- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished
{
    if (anim.completionBlock == nil) {
        if ([self.delegate respondsToSelector:@selector(slotsItemView:animationDidFinished:)]) {
            [self.delegate slotsItemView:self animationDidFinished:YES];
        }
    }
}

@end

SlotsView.h

//
//  SlotsView.h
//
//  Created by wsj_2012 on 2017/8/18.
//  Copyright © 2017年 wsj_2012. All rights reserved.
//

#import <UIKit/UIKit.h>

@protocol SlotsViewDelegate <NSObject>

///动画结束代理
- (void)slotsViewDidFinishedAnimation;

@end

@interface SlotsView : UIView

@property (nonatomic, strong) NSArray<NSString *> *data1;
@property (nonatomic, strong) NSArray<NSString *> *data2;
@property (nonatomic, strong) NSArray<NSString *> *data3;
@property (nonatomic, strong) NSArray<NSString *> *results; // 必须3个

@property (nonatomic, weak) id <SlotsViewDelegate> delegate;

- (void)start;
- (void)end;

@end

SlotsView.m

//
//  SlotsView.m
//
//  Created by wsj_2012 on 2017/8/18.
//  Copyright © 2017年 wsj_2012. All rights reserved.
//

#import "SlotsView.h"
#import "SlotsItemView.h"
#import <Masonry/Masonry.h>

@interface SlotsView () <SlotsItemViewDelegate>

@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) SlotsItemView *item1;
@property (nonatomic, strong) SlotsItemView *item2;
@property (nonatomic, strong) SlotsItemView *item3;
@property (nonatomic) NSInteger flag;

@end

@implementation SlotsView

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        _flag = 3;
        CGFloat width = (frame.size.width - 48) / 3;
        CGFloat height = frame.size.height;
        
        _item1 = [[SlotsItemView alloc] initWithFrame:CGRectMake(14, 0, width, height)];
        _item1.decayRatio = 0.15;
        _item1.delegate = self;
        [self addSubview:_item1];
        
        _item2 = [[SlotsItemView alloc] initWithFrame:CGRectMake(24 + width, 0, width, height)];
        _item2.decayRatio = 0.1;
        _item2.delegate = self;
        [self addSubview:_item2];
        
        _item3 = [[SlotsItemView alloc] initWithFrame:CGRectMake(34 + width * 2, 0, width, height)];
        _item3.decayRatio = 0.05;
        _item3.delegate = self;
        [self addSubview:_item3];
        
    }
    return self;
}

- (void)start
{
    self.flag = 3;
    [self.item1 start];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.item2 start];
    });
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.item3 start];
    });
}

- (void)end
{
    [self.item1 decelerate];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.item2 decelerate];
    });
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.item3 decelerate];
    });
}

- (void)setData1:(NSArray<NSString *> *)data1
{
    _data1 = data1;
    self.item1.data = data1;
}

- (void)setData2:(NSArray<NSString *> *)data2
{
    _data2 = data2;
    self.item2.data = data2;
}

- (void)setData3:(NSArray<NSString *> *)data3
{
    _data3 = data3;
    self.item3.data = data3;
}

- (void)setResults:(NSArray<NSString *> *)results
{
    _results = results;
    self.item1.result = results.firstObject;
    if (results.count > 1) {
        self.item2.result = results[1];
    }
    if (results.count > 2) {
        self.item3.result = results[2];
    }
}

- (void)slotsItemView:(SlotsItemView *)itemView animationDidFinished:(BOOL)finished
{
    self.flag -= 1;
    if (self.flag == 0 && [self.delegate respondsToSelector:@selector(slotsViewDidFinishedAnimation)]) {
        [self.delegate slotsViewDidFinishedAnimation];
    }
}

@end

2、使用

  • 在要使用的类创建对象并关联代理YZTSlotsViewDelegate
    /// 声明为全局变量
    @property (nonatomic, strong) YZTSlotsView *slotsView;

    _slotsView = [[SlotsView alloc] initWithFrame:CGRectMake(0, 42, YZTScreenWidth - 28, 150)];
    _slotsView.delegate = self;
    _slotsView.layer.cornerRadius = 5.0f;
    [lottery addSubview:_slotsView];
  • 数据塞给对象
    NSMutableArray *images = [NSMutableArray array];
    for (PrizeItemModel *model in lotteryPrizeList) {
        !model.imageUrl ? : [images addObject:model.imageUrl];
        /// 使用了SDWebImage缓存图片,以后每次进来不用每次都下载图片
        [[UIImageView new] yzt_setImageWithURLString:model.imageUrl];
    }
    self.slotsView.data1 = images;
    self.slotsView.data2 = images;
    self.slotsView.data3 = images;
  • 获取到老虎机结果调用end方法,并把结果传给results
    self.slotsView.results = @[self.prizeModel.imageUrl, self.prizeModel.imageUrl, self.prizeModel.imageUrl]; 
    [self.slotsView end];
  • 处理老虎节停止滚动后的代理
- (void)slotsViewDidFinishedAnimation
{
    if (self.comlotteryModel.winflag == 1) {
        self.topLabel.text = [NSString stringWithFormat:@"恭喜你抽中%@", self.prizeModel.name];
    }else {
        self.topLabel.text = @"谢谢参与!";
    }
    self.lotteryButton.enabled = YES;
    [self.tableView reloadData];
}

相关文章

  • iOS老虎机的实现

    ⚠️: 项目需要使用pods进行管理开发,这里需要依赖的第三方库有SDWebImage、pop 1、直接上代码 S...

  • iOS--老虎机的抽奖实现

    除了转盘形式得抽奖,还有一种老虎机形式用的也比较多,今天我们就来实现下老虎机抽奖的实现

  • iOS SlotMachine老虎机

  • Android 古法老虎机效果实现

    传统老虎机的实现,指定坐标停止,看效果 使用: 源码地址:https://github.com/wuyajun7/...

  • Android简易老虎机的实现

    说起老虎机,玩过的人应该记得这种类型的图(这是主界面),下面就从最基本的知识分析整个APP的制作过程,也同时把An...

  • Thompson抽样算法原理

    1、回顾多臂老虎机 在多臂老虎机中,我们通过探索加利用的方法,预测多臂老虎机的奖励分布。 我们将生活中的问题转化成...

  • Android UI 老虎机

    今天完成的任务 listview 的使用步骤 简单的listview老虎机实现 1.作品展示 2.需要掌握的知识 ...

  • Vue<幸运抽奖-老虎机🎰>

    此篇文章实现的原理和 比较类似,所以像更好的理解老虎机的实现原理,可以去参考下,这里针对细节方面就不做过多的解释了...

  • 初识slot游戏

    尽管很多人没有玩过老虎机游戏,但是大家或多或少都听说过老虎机游戏,或者说都被告知过,远离赌博,远离老虎机。那么老虎...

  • iOS CoreBluetooth的swift实现 (1)

    iOS CoreBluetooth的swift实现 (2) iOS CoreBluetooth的swift实现 (...

网友评论

    本文标题:iOS老虎机的实现

    本文链接:https://www.haomeiwen.com/subject/gecmmftx.html