程序博客网 > 白鲨的淘宝店

直播APP常用动画效果

来源：互联网 发布：白鲨的淘宝店 编辑：程序博客网 时间：2024/04/30 18:46

作者: 落影loyinglin

地址: 

http://www.jianshu.com/p/a9a201ed3aa8

介绍

记录、总结开发遇到一些问题，大家一起交流学习。
这次带来，对直播APP的常用动画总结。

效果展示

下面是一个很多平台都有的入门豪华礼物动画——烟花。
一个复杂的礼物动画，首先是美术给出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、遮罩动画

遮罩效果可以实现彩虹��出现、烟花爆炸、画卷打开等效果，通过改变遮罩的大小，影响原始图片的展示，达到动画的效果；
先新建一个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，播放完毕后，会马上释放内存；

思考题

0 0
白鲨的淘宝店 白鲨的淘宝店
原创粉丝点击
热门IT博客
windows徽标键在哪windows徽标键在哪
mac电脑word储存位置mac电脑word储存位置
淘宝客服部工作计划
网络印刷平台
网络举报赌博
淘宝评价过期怎么办
美西战争知乎
现在学软件开发好吗
sqlserver存储过程更新
淘宝视频处理 同款
艾珺aj淘宝网店
c语言中怎么自定义函数
网络服务商地址
pega java
node gzip压缩
java内存溢出
本地电影点播软件
农村淘宝如何开店
网络多媒体箱
网络大电影制作合同
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 燕条 碎燕 燕窝的做法 燕窝做法 燕窝形成 燕窝好吃 燕窝好吃吗 燕窝怎么吃 燕窝好处 孕妇燕窝 孕妇吃燕窝 燕窝怎么炖 燕窝泡 鸭心燕窝汤 燕窝炖多久 燕窝价格 双莲燕窝 燕窝营养 燕窝图片 清炖燕窝 星空燕窝 黑枸杞燕窝 怀孕吃燕窝 怀孕燕窝 燕窝泡多久 银耳燕窝羹 燕窝成分 如何做燕窝 怎样做燕窝 燕窝的禁忌 燕窝禁忌 蔡府燕窝 燕窝种类 燕窝分类 燕窝真假 燕窝果 燕窝孕妇 左氏燕窝 燕窝是啥 燕窝回收 假燕窝图片

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里