直播源代码常用动画效果
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、遮罩动画
遮罩效果可以实现彩虹?出现、 花火爆炸、画卷打开等效果，通过改变遮罩的大小，影响直播源代码原始图片的展示，达到动画的效果； 先新建一个CAShapeLayer，并设置为layer的遮罩； 新建一个动画，设定初始和结束状态并赋值给CAShapeLayer，完成一个遮罩动画。
UIBezierPath *maskStartPath = [UIBezierPath bezierPathWithRect:CGRectMake(CGRectGetWidth(rainbowView1.bounds), 0, CGRectGetWidth(rainbowView1.bounds), CGRectGetHeight(rainbowView1.bounds))]; UIBezierPath *maskFinalPath = [UIBezierPath bezierPathWithRect:rainbowView1.bounds]; CAShapeLayer *maskLayer = [CAShapeLayer layer]; rainbowView1.layer.mask = maskLayer; maskLayer.path = maskFinalPath.CGPath; CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; maskLayerAnimation.fromValue = (__bridge id)maskStartPath.CGPath; maskLayerAnimation.toValue = (__bridge id)maskFinalPath.CGPath; maskLayerAnimation.removedOnCompletion = NO; maskLayerAnimation.duration = 2.0; maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [maskLayer addAnimation:maskLayerAnimation forKey:@"maskLayerAnimation"];
7、旋转效果
灯光扫动，花朵旋转等旋转效果，都可以transform的rotation.z属性来实现； 同样使用CAKeyframeAnimation实现，设定好初始、中间、结束状态，动画时间已经重复次数，并添加到layer，完成旋转效果；
CAKeyframeAnimation* rotationAnimation; rotationAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.values = @[@(M_PI / 12), @(M_PI / 3), @(M_PI / 12)]; rotationAnimation.duration = 2.5; rotationAnimation.fillMode = kCAFillModeBoth; rotationAnimation.calculationMode = kCAAnimationCubic; // rotationAnimation.cumulative = YES; rotationAnimation.repeatCount = HUGE_VALF; [self.mLightLeftView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
8、帧动画
某些复杂动画不是靠对原始图像操作进行操作就能实现，这时候就要用到 帧动画； 帧动画有两种实现方式，一种是通过Timer（定时器），设定好时间间隔，手动替换图片； 另外一种是通过UIImageView的支持，实现帧动画。
UIImageView的帧动画没有回调，如果需要实现达到第几帧之后，开始另外的动画的效果，需要用第一种方法。
NSMutableArray<UIImage *> *images = [NSMutableArray<UIImage *> array];
for (int i = 0; i < 6; ++i) {
UIImage *img = [[AnimationImageCache shareInstance] getDriveImageWithName:[NSString stringWithFormat:@"gift_animation_angel_phoenix%d.png", i]];
if (img) {
[images addObject:img];
}
}
self.mAngelPhoenixView.image = [[AnimationImageCache shareInstance] getDriveImageWithName:@"gift_animation_angel_phoenix0.png"];
self.mAngelPhoenixView.animationImages = images;
self.mAngelPhoenixView.animationDuration = 0.8;
self.mAngelPhoenixView.animationRepeatCount = 1;
[self.mAngelPhoenixView startAnimating];
总结
UIView的block动画中，completion持有的是强引用，需要避免造成循环引用。
但在调用完毕completion后，会释放引用。
天使动画的图片大小为900KB，运行时占内存15MB，播放完毕后，如果收到内存不足的警告会释放内存；
花火动画的图片大小为400KB，运行时占用的内存为20MB，直播源代码播放完毕后，会马上释放内存；
声明：本文由云豹科技转发自 落影博客，如有侵权请联系作者删除
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70002045/viewspace-2784384/ ，如需转载，请注明出处，否则将追究法律责任。
