语音聊天源码开发之常用动画效果的实现

效果展示

下面是语音聊天源码开发中比较入门的豪华礼物动画——烟花。
一个复杂的礼物动画，首先是美术给出gif实现草图和素材，技术进行动画剖析和图片压缩，在语音聊天源码中加载图片和实现动画，其中要注意内存和CPU占用。

图片压缩、加载与裁剪

1、图片压缩

美术给出的图片，即使是压缩过，仍存在较大的压缩空间，可以用这里或者更好的大小优化。

2、图片加载

主要有-imageNamed: 和 -imageWithContentsOfFile:两种方式。
AnimationImageCache类是一个动画图片加载类，用单例实现且内部用NSCache持有引用。

注意，当收到语音聊天源码内存不足警告时，NSCache会自动释放内存。所以每次访问NSCache，即使上一次已经加载过，也需要判断返回值是否为空。

3、图片裁剪

为了减少图片资源的大小，有时候会把多个帧动画做成连续的一张图。这时需要语音聊天源码加载一整张资源图，并在相应的位置进行裁剪。

 UIImage* sourceImage = [UIImage imageNamed:@"image/animation/gift_boat"];CGSize sourceSize = sourceImage.size;CGImageRef cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage,CGRectMake(0, 0, const_position_boat_x, sourceSize.height));gWaveFrameImage = [UIImage imageWithCGImage:cgimage];CGImageRelease(cgimage);cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage,CGRectMake(const_position_boat_x, 0, const_position_boat_width, sourceSize.height));gBoatFrameImage = [UIImage imageWithCGImage:cgimage];CGImageRelease(cgimage);cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage,CGRectMake(const_position_boat_x + const_position_boat_width, 0, sourceSize.width - const_position_boat_x - const_position_boat_width, sourceSize.height));gShadowFrameImage = [UIImage imageWithCGImage:cgimage];CGImageRelease(cgimage);

动画剖析与时间轴

下面这个是一个全屏类型的“天使”礼物动画，我们来剖析下这个动画的构成。

1、背景变暗，出现星空；
2、流星划过、月亮出现、云彩飘动；
3、两侧浮空岛震动，中间浮空岛出现；
4、背光出现，天使落下，翅膀扇动；
5、星星闪烁、凤凰出现；
6、渐隐消失；

时间轴实现

为了让语音聊天源码中的动画按照时间顺序一一执行，可以把动画按时间和对象分成多个方法，通过GCD在指定的时间调用。

  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[self playMeteorAnimation];});dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[self playLandAnimation];});dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(6.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[self playLightAnimation];});dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(7.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[self playStarAnimation];});dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(TOTAL_TIME * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{@weakify(self);[UIView animateWithDuration:0.5 animations:^{self.alpha = 0;} completion:^(BOOL finished) {@strongify(self);[self removeFromSuperview];[self callBackManager];}];});

常用动画效果

1、视图变暗、变大

alpha值属性是透明度，把语音聊天源码聊天室背景设置成淡黑色，然后调整alpha可以达到背景渐变的视图效果；

UIView的transform是可以用仿射变换矩阵来控制平移、放大缩小等。

  [UIView animateWithDuration:1.5 animations:^{self.mBackgroundView.alpha = 0.5;self.mAngelView.transform = CGAffineTransformMakeScale(1.2, 1.2);}];

2、匀速运动、交错效果

right是语音聊天源码开发封装的一个属性，本质是对UIView的frame进行操作；
两朵云，左边的朝右，右边的朝左，即可达到交错的效果。

 [UIView animateWithDuration:TOTAL_TIME delay:0 options:UIViewAnimationOptionCurveLinear animations:^{self.mAngelCloudView0.right += 250;self.mAngelCloudView1.right -= 190;} completion:nil];

3、上下往返运动

CAKeyframeAnimation是关键帧动画，对layer的postion的y坐标进行操作；
设定好起始位置、经过位置，最后回到起始位置，即可实现上下往返的效果。

CAKeyframeAnimation *upDownAnimation;
upDownAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
upDownAnimation.values = @[@(self.mAngelLandView1.layer.position.y), @(self.mAngelLandView1.layer.position.y + 5), @(self.mAngelLandView1.layer.position.y)];
upDownAnimation.duration = 2;
upDownAnimation.fillMode = kCAFillModeBoth;
upDownAnimation.calculationMode = kCAAnimationCubic;
upDownAnimation.repeatCount = HUGE_VALF;
[self.mAngelLandView1.layer addAnimation:upDownAnimation forKey:@"upDownAnimation"];

4、闪烁效果

闪烁的本质是alpha的变化，但是UIView的block动画不好实现重复效果；
UIView的alpha对应的是layer的opacity属性，设定好起始、过度和结束的状态，实现闪烁的效果。

CAKeyframeAnimation *opacityAnimation;
opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.values = @[@(0), @(1), @(0)];
opacityAnimation.duration = 1.5;
opacityAnimation.fillMode = kCAFillModeBoth;
opacityAnimation.calculationMode = kCAAnimationCubic;
opacityAnimation.repeatCount = HUGE_VALF;
[self.mAngelStarView.layer addAnimation:opacityAnimation forKey:@"opacityAnimation"];

5、贝塞尔曲线运动

贝塞尔曲线是优化语音聊天源码动画体验的很重要部分，比如说天上掉下来的羽毛，地上冒起来的气泡，空中飘荡的气球，都可以用贝塞尔曲线来绘制，从而获得很好的视觉体验；
本质还是关键帧动画，这次操作的属性是position，通过path属性来确定路径；
给贝塞尔曲线设定好目标点后，把path赋值给关键帧动画，再把动画添加到layer上即可；

  UIImage *image = [[AnimationImageCache shareInstance] getImageWithName:@"gift_castle_hot_air_balloon3.png"];UIImageView *hotAirBalloonView0 = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, image.size.width / 2, image.size.height / 2)];[self addSubview:hotAirBalloonView0];[hotAirBalloonView0 setImage:image];// 飘动CGPoint position = CGPointMake(self.width, hotAirBalloonView0.top);CGFloat duration = 5;CAKeyframeAnimation *positionAnimate = [CAKeyframeAnimation animationWithKeyPath:@"position"];positionAnimate.repeatCount = 1;positionAnimate.duration = duration;positionAnimate.fillMode = kCAFillModeForwards;positionAnimate.removedOnCompletion = NO;UIBezierPath *sPath = [UIBezierPath bezierPath];[sPath moveToPoint:position];[sPath addCurveToPoint:CGPointMake(-image.size.width / 2, position.y) controlPoint1:CGPointMake(self.width / 3 * 2, position.y - 60) controlPoint2:CGPointMake(self.width / 3, position.y + 60)];positionAnimate.path = sPath.CGPath;[hotAirBalloonView0.layer addAnimation:positionAnimate forKey:@"positionAnimate"];

6、遮罩动画

遮罩效果可以实现语音聊天源码中彩虹