最近要用到类似支付宝蚂蚁森林的动画效果，所以就简单写了一个比较简单的一个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];
}];
}
写的不是很好，文采跟技术不是很高 所以就大概写了一下 有什么不懂得 可以私聊我，
demo地址是：GitHub - zhangchuangchuang/animmalDemo: 仿支付宝蚂蚁森林水滴动画效果
网友评论