【移動(dòng)應(yīng)用開發(fā)技術(shù)】iOS如何實(shí)現(xiàn)支付寶螞蟻森林隨機(jī)按鈕及抖動(dòng)效果

【移動(dòng)應(yīng)用開發(fā)技術(shù)】iOS如何實(shí)現(xiàn)支付寶螞蟻森林隨機(jī)按鈕及抖動(dòng)效果

這篇文章主要介紹了iOS如何實(shí)現(xiàn)支付寶螞蟻森林隨機(jī)按鈕及抖動(dòng)效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。工作中遇到了一個(gè)需求要做一個(gè)類似于螞蟻森林的在一定范圍內(nèi)隨機(jī)出現(xiàn)不相交且有上下抖動(dòng)的控件做完的圖如下WechatIMG3.jpeg這個(gè)需求在做的時(shí)候需要注意幾個(gè)地方1.按鈕隨機(jī)且不相交2.動(dòng)畫效果(核心動(dòng)畫)3.需要監(jiān)聽點(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/2Button的maxX要小于屏幕寬減去Button寬度的1/2Button的minY要大于marginY加上Button高度的1/2Button的maxY要小于背景控件底部減去Button寬度的1/22.隨機(jī)按鈕不重合這個(gè)很簡(jiǎn)單一般來講這種按鈕都是一個(gè)圓的背景圖為背景(螞蟻森林)或者透明背景(我做這個(gè))如果是圓的背景圖:我們都知道對(duì)于一個(gè)454590的等腰直角三角形來說根據(jù)勾股定理設(shè)a為直角邊長(zhǎng)b為斜邊長(zhǎng)有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è)按