css3动画在手机端的流畅度比较

TwIStOy 发布于2019-08-30 12:58 / 2477人阅读

摘要：我发现即使都是用的做动画，有的属性在动画播放时却会不流畅，出现定格动画的效果，这里做个比较，方便我以后做动画。流畅于流畅于其实这两个没法比，因为是直接缩放，会拉伸元素的，但如果用的是一个纯色的，倒是可以用。

我发现即使都是用css3的transition做动画，有的属性在动画播放时却会不流畅，出现定格动画的效果，这里做个比较，方便我以后做动画。

transition支持的属性类型

首先说一下transition支持的属性类型（是类型哦，具体属性还是自己去看这里），这个到处都有，我复制粘贴就行了。

color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；

length: 真实的数字如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；

percentage:真实的数字如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；

integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生如：outline-offset,z-index等属性；

number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；

transform list

rectangle:通过x, y, width 和 height（转为数值）变换，如：crop

visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility

shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow

gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image

paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似

space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化

a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化

具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。

引用自http://www.w3cplus.com/content/css3-transition

流畅度比较

(下面的比较中，左边永远比右边流畅的，而且比较的双方是它们都能做同一个效果，否则没有对比的意义哦)
这个比较是我做好demo后用肉眼看出来的，而且在ios、pc、mac、android中看，流畅度会有不同，但暂时未发现下列列表中右侧比左侧流畅的情况。

transform:translate()流畅于padding、margin
transform:scale()流畅于width、height(其实这两个没法比，因为transform:scale()是直接缩放，会拉伸元素的，但如果用的是一个纯色的div，倒是可以用。)

私有云云服务器流畅动画流畅度 webrtc流畅度 css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115208.html

前端小记4——高性能mobile web开发

摘要：高性能动画与端场景需要相比，移动端需要考虑的因素也相对复杂，重点考虑流量功耗与流畅度。而在移动端，我们选择性能更优浏览器原生实现方案动画。然而，动画在移动多终端设备场景下，相比会面对更多的性能问题，主要体现在动画的卡顿与闪烁。1.高性能CSS3动画与PC端场景需要相比，移动web端需要考虑的因素也相对复杂，重点考虑：流量、功耗与流畅度。在pc端上考虑更多的是流畅度，而mobile web中...

番茄西红柿 2019-04-23 13:31 评论0 收藏0
前端动画调研-V1

摘要：支持动画状态的，在动画开始，执行中，结束时提供回调函数支持动画可以自定义贝塞尔曲线任何包含数值的属性都可以设置动画仓库文档演示功能介绍一定程度上，也是一个动画库，适用所有的属性，并且实现的能更方便的实现帧动画，替代复杂的定义方式。动画调研-V1 前言：动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。这两种都有具体的应用场景，比如...

ddongjian0000 2019-08-23 11:00 评论0 收藏0
#yyds干货盘点#——css移动端兼容

摘要：移动端的问题描述的边框。产生原因首先先要了解一个概念设备像素比，它是默认缩放为的情况下，设备像素和逻辑像素的比值。解决方式在滚动容器上增加滚动方法微软雅黑设置设置外部为设置内容元素为。内部元素超出即产生滚动，超出的部分隐藏。移动端的 1px问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。产生原因：首先先要...

lwx12525 2021-11-22 15:29 评论0 收藏0
前端遇到的那些技术难点

摘要：目前主流的屏幕或者。产生原因在中，手指按住屏幕上下拖动，会触发事件。或者可以加入我的开发交流群相互学习，我们会有专业的技术答疑解惑如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点不胜感激移动端兼容css篇移动端的 1px问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。产生原因：首先先要了解一个...

番茄西红柿 2021-11-22 15:29 评论0 收藏2637
web前端 —— 移动端知识的一些总结

摘要：打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐，比较缺人，机会多多广告位长期有效，有兴趣简历我邮箱个人在移动端的一些总结归纳，有新的知识点会一直更新一部分用做动画时，变形尽量通过来实现，而不是用，等属性。不过的事件有一个事件穿透的问题。打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@q...

Astrian 2019-08-28 18:19 评论0 收藏0