直播源代码，常用的动画效果有哪些？

直播源代码常用动画效果

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，直播源代码播放完毕后，会马上释放内存；

声明：本文由云豹科技转发自落影博客，如有侵权请联系作者删除