iOS實現(xiàn)支付寶螞蟻森林隨機(jī)按鈕及抖動效果
工作中遇到了一個需求 要做一個類似于螞蟻森林的 在一定范圍內(nèi)隨機(jī)出現(xiàn) 不相交且有上下抖動的控件
做完的圖 如下
WechatIMG3.jpeg
這個需求在做的時候 需要注意幾個地方
1.按鈕隨機(jī)且不相交
2.動畫效果(核心動畫)
3.需要點擊事件和全部領(lǐng)取事件(全部領(lǐng)取完后會刷新接口)
OK開始搞
隨機(jī)按鈕是其中最主要的兩個點之一(上面的1和2)
在做的時候 需要注意范圍 隨機(jī)出現(xiàn)的控件 必須保證出現(xiàn)在上圖的范圍之內(nèi)
那么隨機(jī)x軸坐標(biāo)和y軸坐標(biāo)時 就需要注意
1.取值范圍
Button的minX要大于Button寬度的1/2
Button的maxX要小于屏幕寬減去Button寬度的1/2
Button的minY要大于marginY加上Button高度的1/2
Button的maxY要小于背景控件底部減去Button寬度的1/2
2.隨機(jī)按鈕不重合
這個很簡單 一般來講 這種按鈕都是一個圓的背景圖為背景(螞蟻森林) 或者透明背景(我做這個)
如果是圓的背景圖: 我們都知道 對于一個45 45 90的等腰直角三角形來說 根據(jù)勾股定理 設(shè)a為直角邊長 b為斜邊長 有 2 * a^2 = b^2 故b = sqrt(a^2 * 2),而圓的半徑在各處都相等,所以只要兩個按鈕的圓心距離大于兩個半徑相加 及 2 * b就可以
如果背景是透明的,同上
不過 如果有很奇葩的需求,背景是其他圖形 可能會根據(jù)需求來研究 是否需要具體計算兩個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ī)按鈕,還需要搞一下動畫 這里肯定是要用核心動畫沒跑了
#pragma mark - 動畫 - (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)的時候 先放大一下再回到原大小以展示一個閃爍的效果
2.讓每一個按鈕加一個上下移動的動畫 設(shè)置持續(xù)時間為某個值 并設(shè)置重復(fù)次數(shù)為MAXFLOAT
但是如果只是這樣做 又會出現(xiàn)一個問題:所有的隨機(jī)按鈕都以相同的頻率 向同一個方向 移動相同的距離
這時候 我想到了一個辦法(我猜應(yīng)該還有更好的辦法,求大佬指教)
有三個參數(shù) 可能會影響抖動
1.抖動頻率
2.抖動距離
3.抖動方向
好了 那每次給button加核心動畫的時候都在一定范圍內(nèi)給這三個值設(shè)定隨機(jī)數(shù)就好了
就是上面的 typeInt distanceFloat durationFloat 三個參數(shù)
以上。
gitee地址:iOS仿支付寶螞蟻森林隨機(jī)按鈕及抖動
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS應(yīng)用內(nèi)實現(xiàn)跳轉(zhuǎn)到手機(jī)淘寶天貓的方法
這篇文章主要給大家介紹了關(guān)于iOS應(yīng)用內(nèi)如何實現(xiàn)跳轉(zhuǎn)到手機(jī)淘寶天貓的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12SIGPIPE(Signal?13,?Code?0)?異常排查及處理
這篇文章主要為大家介紹了SIGPIPE(Signal?13,?Code?0)?異常排查原因解析及處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01iOS學(xué)習(xí)筆記(十六)——詳解數(shù)據(jù)庫操作(使用FMDB)
這篇文章主要介紹了iOS學(xué)習(xí)筆記(十六)——詳解數(shù)據(jù)庫操作(使用FMDB),具有一定的參考價值,有興趣的可以了解一下。2016-12-12iOS UITextField、UITextView只限輸入中文、英文、數(shù)字及實時限制字符個數(shù)的封裝實現(xiàn)代碼
這篇文章主要介紹了 iOS UITextField、UITextView只限輸入中文、英文、數(shù)字及實時限制字符個數(shù)封裝實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-12-12