前几天看群里一个小伙伴写了个水果机的小demo,闲来无事周末学习了下,并做了下优化
效果图
UI实现
实现方面并不难,第一部分是UI布局,可能比较麻烦的就是每个按钮位置的计算,计算按钮位置的代码
NSUInteger colNum = _column;
CGFloat w = CGRectGetWidth(self.bounds) / colNum;
for (NSUInteger i = 0; i < _items.count; i++) {
NSInteger row = i / colNum;
NSInteger col = i % colNum;
UIButton *lastItem = _items[i];
if (i < colNum) {// 第一行
row = 0;
col = i % colNum;
}
else if (i < (2 * colNum - 1)) {
// 最后一列
col = colNum - 1;
row = i - (_column - 1);
}
else if (i < (3 * colNum - 2)) {
// 最后一行
row = colNum - 1;
col = 3 * (colNum - 1) - i;
}
else {
col = 0;
row = _items.count - i;
}
CGFloat x = col * w;
CGFloat y = row * w;
lastItem.frame = CGRectMake(x, y, w, w);
}
这里是把水果机当成一个正方形来处理了,当然也可以做成长方形的样子
动画实现
动画这里我是使用GCD开辟了一个子线程,通过让该线程sleep一小段时间后切换每个按钮的状态来实现。
动画的速度是以控制每次sleep的时间长短来实现的,主要代码:
- (void)updatePerSleepTime
{
if (_willStop) {
// 减速
_perSleepTime += 0.01;
if (_perSleepTime > _maxPerSleepTime) {
_perSleepTime = _maxPerSleepTime;
}
}
else {
if (_slowLoop <= _items.count) {
_slowLoop++;
return;
}
// 加速
if (_slowLoop > _items.count) {
_perSleepTime -= 0.03;
}
if (_perSleepTime < _minPerSleepTime) {
_perSleepTime = _minPerSleepTime;
}
}
}
感兴趣的可以在Github上看下源代码
P.S
不知道啥时候简书的代码样式居然改成了黑色的,哎