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

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

15ff3dfb9fd1

效果图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];

}];

}

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值