iOS ZHGiftAnimation -游戏实现主播送礼打赏动画

动画展示

20181126154545.gif

说明

做任何事都有从简单开始,一步一步脚踏实地。刚开始感觉这动画很难,做着做着就感觉其实很简单。主要是懂得如何化复杂为简单,以上动画,从单独的一个送礼来看,就是从下端逐渐飞出,用到了一个往上移的动画和透明度逐渐增加,其次是在中间展示时候,如果有新礼物消息进入,数字跳动动画,最后是往左边飞出的一个动画;
其中:
从底部逐渐飞出动画:

CABasicAnimation *finishanimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
finishanimation.fromValue = [NSNumber numberWithFloat:0.0f];
finishanimation.toValue = [NSNumber numberWithFloat:1.0f];
finishanimation.autoreverses = NO;
finishanimation.duration = 0.8;
finishanimation.repeatCount = 1;
finishanimation.delegate = self;
finishanimation.beginTime = CACurrentMediaTime();
finishanimation.removedOnCompletion = NO;
finishanimation.fillMode = kCAFillModeForwards;
finishanimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[self.layer addAnimation:finishanimation forKey:@"opacity"];

CGPoint startPoint = CGPointMake(self.center.x, self.center.y + self.frame.size.height);

CABasicAnimation *animationgo = [CABasicAnimation animationWithKeyPath:@"position"];
animationgo.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
animationgo.duration = 0.8;
animationgo.repeatCount = 1;
animationgo.delegate = self;
animationgo.removedOnCompletion = NO;
animationgo.fillMode = kCAFillModeForwards;
animationgo.beginTime = CACurrentMediaTime();
animationgo.fromValue = [NSValue valueWithCGPoint:startPoint];
animationgo.toValue = [NSValue valueWithCGPoint:self.center];
[self.layer addAnimation:animationgo forKey:@"position"];

数字缩放动画:

CABasicAnimation *animationscale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animationscale.duration = 0.3;
animationscale.repeatCount = 1;
animationscale.autoreverses = NO;
animationscale.removedOnCompletion = YES;
animationscale.fromValue = [NSNumber numberWithFloat:2];
animationscale.toValue = [NSNumber numberWithFloat:1];
[x_image.layer addAnimation:animationscale forKey:@"scale-layer"];
[bits_image.layer addAnimation:animationscale forKey:@"scale-layer"];
[ten_image.layer addAnimation:animationscale forKey:@"scale-layer"];
[hundred_image.layer addAnimation:animationscale forKey:@"scale-layer"];
[thousand_image.layer addAnimation:animationscale forKey:@"scale-layer"];
[tenthousand_image.layer addAnimation:animationscale forKey:@"scale-layer"];

从左边飞出动画:

CGPoint endPoint = CGPointMake(-self.center.x - 30, self.center.y);
CABasicAnimation *animationgo2 = [CABasicAnimation animationWithKeyPath:@"position"];
animationgo2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
animationgo2.duration = 0.5;
animationgo2.repeatCount = 1;
animationgo2.delegate = self;
animationgo2.removedOnCompletion = NO;
animationgo2.fillMode = kCAFillModeForwards;
animationgo2.beginTime = CACurrentMediaTime();
animationgo2.fromValue = [NSValue valueWithCGPoint:self.center];
animationgo2.toValue = [NSValue valueWithCGPoint:endPoint];
[self.layer addAnimation:animationgo2 forKey:@"exitAnimation"];

看到这里,基本上一个送礼动画就算完成了;但并不是这么的简单,思考着如果存在很多人送礼的时候怎么办,总不能一直往下排吧,所以我考虑的以下几点,第一、肯定要做一个机制进行排队显示,第二、当一个礼物动画显示完成后,后面的动画向上移动,第三、排队的时候,还需要实时更新排队里面的数据,总不能说我没有显示的时候,继续送礼就不增加数值吧!第四、显示的时候,如果玩家送礼时,延长送礼展示,如果这样想起来,又是一大堆事情需要处理;不过以上这些我能想到的问题,我都已经处理了,dome 在github中,大家相互学习,共同进步;

dome
https://github.com/Zhangyunjiang123/ZHGiftAnimation

以下是送礼动画在我们项目中展示样子,大家可以去AppStore中搜索“欢乐狼人杀”,感谢大家支持

20181126154708.gif

推荐阅读更多精彩内容

  • Color Hunt是一款不错的调色板资源工具,这篇文章,是作者讲述自己创建Color Hunt的故事,非常不错,...
    ShusQ阅读 587评论 0 0
  • 朔风凛冽 茕茕孑立 只有你一直与我相伴 月光下 黑乎乎的你的模样 显得格外的单薄 不论严寒还是酷暑 不管喜悦或是悲...
    木易日尧人青阅读 140评论 0 2
  • 第三天 避免掉入大喊大叫的陷阱 当你应对叛逆孩子的叛逆行为的的时候,你的大喊大叫只会制造更多的麻烦。不要担心,你不...
    铁川阅读 312评论 0 1
  • 老炮和刘老师又好了,听到这个消息的时候我承认我的世界观是混乱的。 四个月之前,他们通过相亲认识,很快就打的火热,已...
    生杏子阅读 134评论 2 7