php蚂蚁森林的效果,iOS仿支付宝蚂蚁森林动画效果

最近要用到类似支付宝蚂蚁森林的动画效果，所以就简单写了一个比较简单的一个demo，效果图如下：

效果图1

需求：

在这个view上面随机出现n个黄钻(button)，黄钻按钮还得上下抖动，箭头1指向的位置不能出现随机的黄钻，而且不能超过屏幕，超过屏幕的要重新生成，中间箭头1位置同样，不能超过那个部分，然后点击黄钻，然后出现动画(同蚂蚁森林，点击水滴飘向数的动画一样)然后慢慢的消失，最后箭头3的位置数字会刷新新的(就是加上黄钻下面的数字)

1，先一步一步来，怎么让button随机出现,首先想到的是arc4random() %，话不多说上代码intx =arc4random() % (int)SCREEN_WIDTH;//背景view的宽度

inty =  arc4random() % (int)300;//背景view的高度

其实就是随机那个上半部分view 宽跟高，随机数出来了怎么判断超出屏幕的呢，这样写，我先把随机出来的坐标拿到，buttonFrame是 随机出来坐标，也就是随机出来的button的frame，CGRect buttonFrame= CGRectMake(x, y, self.iconImageView.frame.size.width, self.iconImageView.frame.size.height);

2超过屏幕的怎么办，下面就该加个判断，判断的是当button的中心坐标加上button的宽度跟屏幕宽度作比较，高度同样，如果超出来，我有添加一个标识，超出了 isintersect=yes 然后判断一下就行 超出的 重新获取随机坐标 然后在走一遍流程，do{

inti=0;

if((buttonFrame.origin.x+buttonFrame.size.width)>SCREEN_WIDTH||(buttonFrame.origin.y+buttonFrame.size.height)>300)

{

isIntersect=YES;

}else

{

isIntersect=NO;

for(idobjinself.view.subviews)

{

if([objisKindOfClass:[ZCAnimmalButtonclass]])

{

i++;

ZCAnimmalButton* mybutton = (ZCAnimmalButton*)obj;

if(CGRectIntersectsRect(buttonFrame,mybutton.frame))

{

isIntersect=YES;

break;

}

}

if(i==count)

{

isIntersect=NO;

}

}

}

if(isIntersect)

{

x =arc4random() % (int)SCREEN_WIDTH;

y =arc4random() % (int)300;

buttonFrame=CGRectMake(x, y,self.iconImageView.frame.size.width,self.iconImageView.frame.size.height);

}

}while(isIntersect);

3.如何做到像蚂蚁森林点击水滴然后飘向树木 然后消失，因为是轨迹移动，所以就想到了用 (贝塞尔曲线)UIBezierPath 做出轨迹线 具体怎么写的看代码，先是用UIBezierPath做出轨迹线，然后在吧轨迹赋值给CAKeyframeAnimation，在给button 添加动画 就可以啦，怎么让他消失呢，就是CAKeyframeAnimation有个delegate 继承一下，然后有个- (void)animationDidStop:(CAAnimation*)anim finished:(BOOL)flag，意思就是动画结束的操作 在这里面写就好UIBezierPath *movePath = [UIBezierPath bezierPath]；     [movePathmoveToPoint:CGPointMake(self.center.x,self.center.y)];

switch (self.setting.animationType) {

case AnimmalButtonYypeLine://直线

[movePathaddLineToPoint:self.point];

break;

case AnimmalButtonTypeCurve://曲线

//抛物线

[movePathaddQuadCurveToPoint:self.pointcontrolPoint:CGPointMake(self.point.x,self.center.y)];

break;

default:

break;

}

//位移动画

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

//移动路径

animation.path= movePath.CGPath;

animation.duration=self.setting.duration;

animation.autoreverses=NO;

animation.repeatCount=1;

animation.calculationMode = kCAAnimationPaced;

animation.delegate=self;

[self.layeraddAnimation:animationforKey:@"position"];

});

4.抖动效果 这个更简单啦  运用 uiview  animateWithDuration 参数是什么意思就不写啦 就这样抖动效果就出来啦(void)ImageSpring:(UIButton *)btn {

[UIView animateWithDuration:0.5 animations:^{

btn.frame = CGRectMake(btn.frame.origin.x, btn.frame.origin.y+10, 40, 40);

}];

[UIView animateWithDuration:0.5 delay:0.5 options:UIViewAnimationOptionAllowUserInteraction animations:^{

btn.frame = CGRectMake(btn.frame.origin.x, btn.frame.origin.y-10, 40, 40);

} completion:^(BOOL finished) {

[self ImageSpring:btn];

}];

}

写的不是很好，文采跟技术不是很高 所以就大概写了一下  有什么不懂得 可以私聊我，