最近要用到類似支付寶螞蟻森林的動畫效果，所以就簡單寫了一個比較簡單的一個demo，效果圖如下：
需求：
在這個view上面隨機(jī)出現(xiàn)n個黃鉆（button），黃鉆按鈕還得上下抖動，箭頭1指向的位置不能出現(xiàn)隨機(jī)的黃鉆，而且不能超過屏幕，超過屏幕的要重新生成，中間箭頭1位置同樣，不能超過那個部分，然后點擊黃鉆，然后出現(xiàn)動畫（同螞蟻森林，點擊水滴飄向數(shù)的動畫一樣）然后慢慢的消失，最后箭頭3的位置數(shù)字會刷新新的（就是加上黃鉆下面的數(shù)字）
1，先一步一步來，怎么讓button隨機(jī)出現(xiàn),首先想到的是arc4random() %，話不多說上代碼
? ? intx =arc4random() % (int)SCREEN_WIDTH;//背景view的寬度
? ? inty =? arc4random() % (int)300;//背景view的高度
其實就是隨機(jī)那個上半部分view 寬跟高，隨機(jī)數(shù)出來了怎么判斷超出屏幕的呢，這樣寫，我先把隨機(jī)出來的坐標(biāo)拿到，buttonFrame是 隨機(jī)出來坐標(biāo)，也就是隨機(jī)出來的button的frame，
CGRect buttonFrame= CGRectMake(x, y, self.iconImageView.frame.size.width, self.iconImageView.frame.size.height);
2超過屏幕的怎么辦，下面就該加個判斷，判斷的是當(dāng)button的中心坐標(biāo)加上button的寬度跟屏幕寬度作比較，高度同樣，如果超出來，我有添加一個標(biāo)識，超出了 isintersect=yes 然后判斷一下就行 超出的 重新獲取隨機(jī)坐標(biāo) 然后在走一遍流程，
?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，意思就是動畫結(jié)束的操作 在這里面寫就好
?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.抖動效果 這個更簡單啦 ?運(yùn)用 uiview ?animateWithDuration 參數(shù)是什么意思就不寫啦 就這樣抖動效果就出來啦
(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];
? ? }];
}
寫的不是很好，文采跟技術(shù)不是很高 所以就大概寫了一下 ?有什么不懂得 可以私聊我，
demo地址是：GitHub - zhangchuangchuang/animmalDemo: 仿支付寶螞蟻森林水滴動畫效果
