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