动画展示
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
网友评论