iOS實(shí)現(xiàn)支付寶螞蟻森林隨機(jī)按鈕及抖動(dòng)效果
工作中遇到了一個(gè)需求 要做一個(gè)類似于螞蟻森林的 在一定范圍內(nèi)隨機(jī)出現(xiàn) 不相交且有上下抖動(dòng)的控件
做完的圖 如下

WechatIMG3.jpeg
這個(gè)需求在做的時(shí)候 需要注意幾個(gè)地方
1.按鈕隨機(jī)且不相交
2.動(dòng)畫效果(核心動(dòng)畫)
3.需要點(diǎn)擊事件和全部領(lǐng)取事件(全部領(lǐng)取完后會(huì)刷新接口)
OK開始搞
隨機(jī)按鈕是其中最主要的兩個(gè)點(diǎn)之一(上面的1和2)
在做的時(shí)候 需要注意范圍 隨機(jī)出現(xiàn)的控件 必須保證出現(xiàn)在上圖的范圍之內(nèi)
那么隨機(jī)x軸坐標(biāo)和y軸坐標(biāo)時(shí) 就需要注意
1.取值范圍
Button的minX要大于Button寬度的1/2
Button的maxX要小于屏幕寬減去Button寬度的1/2
Button的minY要大于marginY加上Button高度的1/2
Button的maxY要小于背景控件底部減去Button寬度的1/2
2.隨機(jī)按鈕不重合
這個(gè)很簡單 一般來講 這種按鈕都是一個(gè)圓的背景圖為背景(螞蟻森林) 或者透明背景(我做這個(gè))
如果是圓的背景圖: 我們都知道 對(duì)于一個(gè)45 45 90的等腰直角三角形來說 根據(jù)勾股定理 設(shè)a為直角邊長 b為斜邊長 有 2 * a^2 = b^2 故b = sqrt(a^2 * 2),而圓的半徑在各處都相等,所以只要兩個(gè)按鈕的圓心距離大于兩個(gè)半徑相加 及 2 * b就可以
如果背景是透明的,同上
不過 如果有很奇葩的需求,背景是其他圖形 可能會(huì)根據(jù)需求來研究 是否需要具體計(jì)算兩個(gè)button中心的距離了
隨機(jī)按鈕部分代碼如下
#pragma mark - 隨機(jī)數(shù)
- (NSInteger)getRandomNumber:(CGFloat)from to:(CGFloat)to
{
return (NSInteger)(from + (arc4random() % ((NSInteger)to - (NSInteger)from + 1)));
}
#pragma mark - 隨機(jī)按鈕
- (void)createRandomBtnWithType:(FruitType)fruitType andText:(NSString *)textString
{
CGFloat minY = kBtnMinY + kBtnDiameter * 0.5 + kMargin;
CGFloat maxY = self.bounds.size.height - kBtnDiameter * 0.5 - kMargin;
CGFloat minX = kBtnMinX + kMargin;
CGFloat maxX = DEF_SCREEN_WIDTH - kBtnDiameter * 0.5 - 0 - kMargin;
CGFloat x = [self getRandomNumber:minX to:maxX];
CGFloat y = [self getRandomNumber:minY to:maxY];
BOOL success = YES;
for (int i = 0; i < self.centerPointArr.count; i ++) {
NSValue *pointValue = self.centerPointArr[i];
CGPoint point = [pointValue CGPointValue];
//如果是圓 /^2 如果不是圓 不用/^2
if (sqrt(pow(point.x - x, 2) + pow(point.y - y, 2)) <= kBtnDiameter + kMargin) {
success = NO;
[self createRandomBtnWithType:fruitType andText:textString];
return;
}
}
if (success == YES) {
NSValue *pointValue = [NSValue valueWithCGPoint:CGPointMake(x, y)];
[self.centerPointArr addObject:pointValue];
UIButton *randomBtn = [UIButton buttonWithType:0];
randomBtn.bounds = CGRectMake(0, 0, kBtnDiameter, kBtnDiameter);
randomBtn.center = CGPointMake(x, y);
[randomBtn setTitleColor:[UIColor whiteColor] forState:0];
[self addSubview:randomBtn];
[randomBtn addTarget:self action:@selector(randomBtnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.randomBtnArr addObject:randomBtn];
[self.randomBtnArrX addObject:randomBtn];
//區(qū)分
if (fruitType == FruitTypeTimeLimited) {
randomBtn.tag = kUnlimitedBtnTag + self.centerPointArr.count - 1;
[self.timeLimitedBtnArr addObject:randomBtn];
randomBtn.backgroundColor = [UIColor blueColor];
} else if (fruitType == FruitTypeUnlimited) {
randomBtn.tag = kTimeLimitedBtnTag + self.centerPointArr.count - 1;
[self.unlimitedBtnArr addObject:randomBtn];
randomBtn.backgroundColor = [UIColor redColor];
}
[randomBtn setTitle:textString forState:0];
[self animationScaleOnceWithView:randomBtn];
[self animationUpDownWithView:randomBtn];
}
}
好了 搞定了不相交的隨機(jī)按鈕,還需要搞一下動(dòng)畫 這里肯定是要用核心動(dòng)畫沒跑了
#pragma mark - 動(dòng)畫
- (void)animationScaleOnceWithView:(UIView *)view
{
[UIView animateWithDuration:0.2 animations:^{
view.transform = CGAffineTransformMakeScale(1.05, 1.05);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.2 animations:^{
view.transform = CGAffineTransformMakeScale(1.0, 1.0);
} completion:^(BOOL finished) {
}];
}];
}
- (void)animationUpDownWithView:(UIView *)view
{
CALayer *viewLayer = view.layer;
CGPoint position = viewLayer.position;
CGPoint fromPoint = CGPointMake(position.x, position.y);
CGPoint toPoint = CGPointZero;
uint32_t typeInt = arc4random() % 100;
CGFloat distanceFloat = 0.0;
while (distanceFloat == 0) {
distanceFloat = (6 + (int)(arc4random() % (9 - 7 + 1))) * 100.0 / 101.0;
}
if (typeInt % 2 == 0) {
toPoint = CGPointMake(position.x, position.y - distanceFloat);
} else {
toPoint = CGPointMake(position.x, position.y + distanceFloat);
}
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.removedOnCompletion = NO;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = [NSValue valueWithCGPoint:fromPoint];
animation.toValue = [NSValue valueWithCGPoint:toPoint];
animation.autoreverses = YES;
CGFloat durationFloat = 0.0;
while (durationFloat == 0.0) {
durationFloat = 0.9 + (int)(arc4random() % (100 - 70 + 1)) / 31.0;
}
[animation setDuration:durationFloat];
[animation setRepeatCount:MAXFLOAT];
[viewLayer addAnimation:animation forKey:nil];
}
我是這樣做的
1.在btn出現(xiàn)的時(shí)候 先放大一下再回到原大小以展示一個(gè)閃爍的效果
2.讓每一個(gè)按鈕加一個(gè)上下移動(dòng)的動(dòng)畫 設(shè)置持續(xù)時(shí)間為某個(gè)值 并設(shè)置重復(fù)次數(shù)為MAXFLOAT
但是如果只是這樣做 又會(huì)出現(xiàn)一個(gè)問題:所有的隨機(jī)按鈕都以相同的頻率 向同一個(gè)方向 移動(dòng)相同的距離
這時(shí)候 我想到了一個(gè)辦法(我猜應(yīng)該還有更好的辦法,求大佬指教)
有三個(gè)參數(shù) 可能會(huì)影響抖動(dòng)
1.抖動(dòng)頻率
2.抖動(dòng)距離
3.抖動(dòng)方向
好了 那每次給button加核心動(dòng)畫的時(shí)候都在一定范圍內(nèi)給這三個(gè)值設(shè)定隨機(jī)數(shù)就好了
就是上面的 typeInt distanceFloat durationFloat 三個(gè)參數(shù)
以上。
gitee地址:iOS仿支付寶螞蟻森林隨機(jī)按鈕及抖動(dòng)
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS從App跳轉(zhuǎn)至系統(tǒng)設(shè)置菜單各功能項(xiàng)的編寫方法講解
這篇文章主要介紹了iOS從App跳轉(zhuǎn)至系統(tǒng)設(shè)置菜單各功能項(xiàng)的編寫方法講解,示例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-04-04
iOS頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞(三種)
本文主要介紹了iOS頁面跳轉(zhuǎn)的三種方法及數(shù)據(jù)傳遞的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
IOS設(shè)置QQ小紅點(diǎn)消除的方法(一鍵退朝)
這篇文章主要介紹了IOS設(shè)置QQ小紅點(diǎn)消除的方法(一鍵退朝),對(duì)ios設(shè)置小紅點(diǎn)消除相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
iOS實(shí)現(xiàn)app間跳轉(zhuǎn)功能
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)app間跳轉(zhuǎn)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05
詳解使用Xcode7的Instruments檢測解決iOS內(nèi)存泄露(最新)
本篇文章主要介紹使用Xcode7的Instruments檢測解決iOS內(nèi)存泄露(最新)的相關(guān)資料,需要的朋友可以參考下2017-09-09
Swift 2.1 為 UIView 添加點(diǎn)擊事件和點(diǎn)擊效果
本文主要介紹 Swift UIView,這里給大家提供代碼示例作為參考為UIView 添加點(diǎn)擊事件和點(diǎn)擊效果,希望能幫助IOS開發(fā)的同學(xué)2016-07-07

