lottie android 卡顿,说说动画卡顿的解决方案
CSS3 动画卡顿解决方案
前端时间用animation实现H5页面中首页动画过渡,很简单的一个效果,首页加载一个客服头像,先放大,停留700ms后再缩小至顶部。代码如下
首页加载动画
.welcome-main{
display: none;
padding-bottom: 40px;
}
.top-info{
width: 100%;
position: absolute;
left: 0;
top: 93px;
}
.wec-img{
width: 175px;
height: 175px;
position: relative;
padding: 23px;
box-sizing: border-box;
margin: 0 auto;
}
.wec-img:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("./images/kf-welcome-loading.png");
background-size: 100%;
}
.wec-img .img-con{
width: 100%;
height: 100%;
border-radius: 50%;
/*box-sizing: border-box;*/
background: url("./images/kf_1.jpg");
background-size: 100%;
padding: 1px;
}
.wec-img .img-con img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.loaded .wec-img{
-webkit-transform-origin: center top;
}
.loading.welcome-main{
display: block;
}
.loading .wec-img{
-webkit-animation:fadeIn .3s ease both;
}
.loading .wec-img:before{
-webkit-animation:rotate .6s .2s linear both;
}
.loaded .top-info{
-webkit-animation:mainpadding 1s 0s ease both;
}
.loaded .wec-img{
-webkit-animation:imgSmall 1s 0s ease both;
}
@-webkit-keyframes mainpadding{
0%{
-webkit-transform:translateY(0)
}
100%{
-webkit-transform:translateY(-87px)
}
}
@-webkit-keyframes imgSmall{
0%{
width: 175px;
height: 175px;
padding: 23px;
}
100%{
width: 60px;
height: 60px;
padding: 0;
}
}
@-webkit-keyframes fadeIn{
0%{opacity:0;-webkit-transform:scale(.3)}
100%{opacity:1;-webkit-transform:scale(1)}
}
@-webkit-keyframes rotate{
0%{opacity:0;-webkit-transform:rotate(0deg);}
50%{opacity:1;-webkit-transform:rotate(180deg);}
100%{opacity:0;-webkit-transform:rotate(360deg);}
}
$('.welcome-main').addClass('loading');
setTimeout(function(){
$('.hi.fst').removeClass('loading');
$('.welcome-main').addClass('loaded');
},700);
在chrome上测试ok,但在提测给QA的时候发现部分机型,如华为,系统4.2,oppo系统5.1的出现卡顿情况。
百思不得其解,后来参考文章深入浏览器理解CSS animations 和 transitions的性能问题一文,将图片缩放中动画元素改成transform,如下
@-webkit-keyframes imgSmall{
0%{
-webkit-transform:scale(1);
}
100%{
-webkit-transform:scale(.465);
}
}
果然啊,卡顿问题解决了。
文章深入浏览器理解CSS animations 和 transitions的性能问题是这么解释的,现代的浏览器通常会有两个重要的执行线程,这2个线程协同工作来渲染一个网页:主线程和合成线程。
一般情况下,主线程负责:运行JavaScript;计算HTML 元素的 CSS 样式;页面的布局;将元素绘制到一个或多个位图中;将这些位图交给合成线程。
相应地,合成线程负责:通过 GPU将位图绘制到屏幕上;通知主线程更新页面中可见或即将变成可见的部分的位图;计算出页面中哪部分是可见的;计算出当你在滚动页面时哪部分是即将变成可见的;当你滚动页面时将相应位置的元素移动到可视区域。
假设我们要一个元素的height从 100 px 变成 200 px,就像这样:
div {
height: 100px;
transition: height 1s linear;
}
div:hover {
height: 200px;
}
主线程和合成线程将按照下面的流程图执行相应的操作。注意在橘黄色方框的操作可能会比较耗时,在蓝色框中的操作是比较快速的。
而使用transform:scale实现
div {
transform: scale(0.5);
transition: transform 1s linear;
}
div:hover {
transform: scale(1.0);
}
此时流程如下:
也就是说,使用transform,浏览器只需要一次生成这个元素的位图,并在动画开始的时候将它提交给GPU去处理 。之后,浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而,浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。
为了从数量级上去证实这个理论,我打开chrome的Timeline查看页面FPS
其中,当用height做动画元素时,在切换过程的FPS只有44,我们知道每秒60帧是最适合人眼的交互,小于60,人眼能明显感觉到,这就是为什么卡顿的原因。
rendering和painting所花的时间如下:
再来看看用transform:scale
FPS达到66,且rendering和painting时间减少了3倍。
到此为止问题是解决了,隔了几天,看到一篇解决Chrome动画”卡顿”的办法,发现还能通过开启硬件加速的方式优化动画,于是又试了一遍。
webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
惊人的事情发生了,FPS达到72:
总结解决CSS3动画卡顿方案
尽量使用transform当成动画熟悉,避免使用height,width,margin,padding等;
要求较高时,可以开启浏览器开启GPU硬件加速。
参考文章
lottie android 卡顿,说说动画卡顿的解决方案相关推荐
- Android主线程耗时动画卡顿,Android性能优化实战之界面卡顿
原标题:Android性能优化实战之界面卡顿 作者:红橙Darren https://www.jianshu.com/p/18bb507d6e62 今天是个奇怪的日子,有三位同学找我,都是关于界面卡顿 ...
- android 动画卡顿分析工具
android 动画卡顿分析工具 Android应用性能优化之分析工具 上一次记录了解决过度绘制的过程,这一次,想先弄清个概念性的东西,就是如何判断顺不顺畅? 这东西其实最初我自己也觉得有点废话,用起 ...
- Android 解决帧动画卡顿问题
Android帧动画一次性加载会造成ui卡顿,所以就有了这份代码.通过handle队列和Bitmap复用,每次加载一张并显示,可以解决帧动画卡顿问题. 使用方法: int[] right_res_id ...
- Android app性能优化解决卡慢顿之布局优化
前面博客分析了导致app卡顿慢的直接原因,这里就从原因出发,分析一些优化方案(这里主要是从直接影响渲染机制的布局相关进行分析) 1) Invalidations, Layouts, and Perfo ...
- CSS3 动画卡顿性能优化解决方案--摘抄
最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...
- Android Studio Profiler CPU检测卡顿
前言 Android Studio 3.0 及更高版本中的 Android Profiler 取代了 Android Monitor 工具.Android Profiler工具可提供实时数据,帮助您了 ...
- Android 流畅度评估及卡顿定位、优化
转载:在路上的博客:Android 流畅度评估及卡顿优化 导言:本文主要是关于 Android 流畅度和卡顿优化的全方位介绍,算是对 2020 部分工作的总结. 文章目录 1.渲染和流畅概念 (1)为 ...
- css鼠标拖拉卡顿_浅谈CSS3 动画卡顿解决方案
为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的.但是我们要明确以下几个概念:单线程,主线程和合成线程. 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有 ...
- CSS transition动画卡顿的探究
一.问题 今天在使用css3的transition做动画过渡时,发现动画会卡顿,特此记录我发现卡顿的一些原因和笔记. 先给出结论: 在使用css3 transtion做动画效果时,transform实 ...
最新文章
- mysql性能优化1
- 有什么类方法或是函数可以查看某个项目的Laravel版本的?
- oracle 执行带参数的sql语句_当用EXECUTE IMMEDIATE执行SQL语句中的参数个数也是动态的?用什么方法实现?...
- 聚类算法——Birch详解
- DUBBO:前端调用后端服务返回类名
- 【已解决】iOS11使用MJRefresh上拉加载结束tableView闪动、跳动的问题
- spring5源码-ioc容器
- 剑指offer面试题12. 矩阵中的路径(矩阵搜索)(深度优先搜索)(剪枝)
- 使用Python定制词云
- 前端开发工程化探讨--基础篇
- 只有搞Java开发的才知道!javaspring菜鸟教程
- 讯飞输入法pad版x86_讯飞输入法Pad版x86版
- 如何导入JDBC驱动
- matlab画柱状图并填充
- STM32单片机驱动L298N
- Office2010打开多个excel文件时,开多个excel而不是同一个切换
- 欢迎你、某某某同学python_python123第一周作业
- git-修改commit信息
- kettle连接不上es7_kettle常见问题解决
- 【CE】ASK,OOK,FSK,GFSK简介
热门文章
- 【rotors】多旋翼无人机仿真(一)——搭建rotors仿真环境
- inux(debian) arm-linux-g++ v4.5.1交叉编译 embedded arm 版本的QtWebkit (browser) 使用qt 4.8.6 版本
- 数据安全能力成熟度模型DSMM----4、数据存储安全
- OnlineJudge平台(负载均衡)
- freeswitch端口设置
- 加一(非空数组)(力扣)
- vue页面缓存查询条件
- Redis原理一之内部数据结构
- c++assert函数
- C++数组,求中位数