直播APP常用动画效果
作者: 落影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,播放完毕后,会马上释放内存;
思考题
直播APP常用动画效果相关推荐
- 语音聊天源码开发之常用动画效果的实现
效果展示 下面是语音聊天源码开发中比较入门的豪华礼物动画--烟花. 一个复杂的礼物动画,首先是美术给出gif实现草图和素材,技术进行动画剖析和图片压缩,在语音聊天源码中加载图片和实现动画,其中要注意内 ...
- 给你的App添加动画效果
动画在iOS开发中有举足轻重的作用,通过动画你可以让你的用户了解他究竟干了什么,下面是一个简单的演示动画: 现在跟着我的步伐一起来学吧 给动画添加添加持续时间 首先创建一个新的swift Playgr ...
- CSS3常用动画效果合集(最全)
CSS3常见的动画效果合集: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webki ...
- 贝塞尔曲线(Bezier)之花束直播爱心点赞动画效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此 博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
- html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
- 模仿猫眼电影App一个动画效果
看真正的猫眼效果图 接下来看自己写的粗略图(不足的地方是这里是2个切换选项,如果需要3个切换的话,需要自定义控件,后续在更新...) 源码地址 自定义控件(21)---自定义控件之高仿猫眼小项目(3) ...
- DoTween常用动画效果
首先记得引入命名空间:using DG.Tweening; 1.渐隐渐现 protected CanvasGroup canvasGroup;protected void Start(){if(can ...
- 类似直播飘星动画效果
可以通过一个框架来做.添加如下依赖.然后java代码中 In your build.gradle: dependencies {compile 'tyrant:heartlayout:1.0.1'} ...
- 像花椒,映客,来疯这种直播app,技术实现难度在哪?需要什么样技术人才,还有就是服务器带宽要求及成本?
宋少东 287 人赞同 技术层面: 技术相对都比较成熟,设备也都支持硬编码.IOS还提供现成的 Video ToolBox框架,可以对摄像头和流媒体数据结构进行处理,但Video ToolBox框架只 ...
最新文章
- codeforces 282E Sausage Maximization
- 心得体悟帖---17、于迷茫低落处找到本心
- 使用mspaint查看图片像素
- 如何检测整数相加溢出
- 拼接播放地址_西安户外did拼接屏批发业务广泛_金伟达电子
- 手把手教你清除WIN7的C盘垃圾
- scratch编程超好玩的解密游戏
- JAVA怎么给Excel加分页符_Excel插入分页符的方法和步骤
- iPhone无法开机? 一招帮你“救活”
- 云养猫云养狗,一个可以救助流浪猫猫和狗狗的平台
- 在python里是什么意思_在Python中$是什么意思?
- 统计学 统计值判断标准
- PEEK薄膜特性与各型号性能特征分析
- 瞬时频率函数matlab,Hilbert 变换与瞬时频率
- c语言单片机自动浇花系统,LLAKG:Arduino 自动浇花系统(第3集:C语言程序升级与功能优化)...
- base64转MultipartFile并压缩得到压缩后对的MultipartFile
- 求单链表的最大值与原地逆转_数据结构精选考研试题.pdf
- 曝英伟达将新发低功耗RTX 3050显卡
- 注册表编辑器厘米爱你找不到mysql_我打开注册表编辑器后 找不到那几个文件 怎么办...
- 德温特专利数据的爬取(selenium\xpath\contains解决了输入框ID老是动态改变的问题)
热门文章
- Database项目中关于Procedure sp_refreshsqlmodule_internal的错误
- xunsearch 迅搜初探
- ODBC、OLE连接各种数据库的连接字符串
- MEF: MSDN 杂志上的文章(9) 控制部件创建策略 ???
- ndk-build 参数NDK_APPLICATION_MK问题
- 短信编码类无错版PDUdecoding.cs
- Google Test(GTest)使用方法和源码解析——私有属性代码测试技术分析
- DllMain中不当操作导致死锁问题的分析——DllMain中要谨慎写代码(完结篇)
- 经典网络GoogLeNet介绍
- 编译器GCC与Clang的异同