>

逐帧动画抖动解决方案,雪碧图自适应缩放

- 编辑:至尊游戏网站 -

逐帧动画抖动解决方案,雪碧图自适应缩放

CSS3本事-7-Up图自适应缩放

2015/08/20 · CSS · 雪碧图

原作出处爬山涉水 Aaron的博客   

花了贰个礼拜完结了慕课网定制的七巧节核心效果,个中有三个没兑现好的功效,便是Pepsi-Cola图的自适应缩放

ps: 以下达成都以凭借移动端的管理

原图如下跋山涉水的近义词 人物是接收的是7-Up图,通过坐标相对数量取值

图片 1

题目很显明,在缩放的显示器上人物照旧服从原尺寸大小展现

后来一时留了蒸蒸日上节预备的方案爬山涉水CSS3的scale管理直接能够让要素缩放

图片 2

通过三个缩放的算放调整scale进而让7-Up图的要素得以缩放,目测依旧不错。

只是那会带一文山会海的揣度难题,因为通过sacle缩放后的要素,在浏览器布局中依然遵照原尺寸计算的,所以这样的方案小编也是这些的不顺心

Coca Cola图常规的方案日常会做几套不一样尺寸的图去适应分化的配备尺寸

这里作者特指移动端单图的拍卖,接收的手艺超轻巧CSS3有的知识点

先看看原图与处理后的法力

图片 3

图片 4

来说课下原理,说白了相当的轻松

先考查下矩阵的排放量如上是行3 竖3 所以矩阵便是3*3的排列,可是此地唯有8张图,怎么管理今后会讲

诚如想让背景图填充整个因素在css3中得以通过background-size:百分之百 百分百拍卖

显然不可能让整图去填充成分,整图填充三个要素正是那功能

图片 5

什么让单图填充七个成分呢? 这里笔者想到了贰个措施,把整图完全缩放,额,就是完整缩放。。。

3*3的矩阵,小编左右依照矩形的数额比缩放百分之百

CSS

background-size: 300% 300%;

1
background-size: 300% 300%;

图片 6

到了这一步推断我们都猜出来了,很粗大略了,通过百分比去取图了

至于Smart动画达成的招数太多了,比方反应计时器的帧动画,CSS3的animation动画,canvas动画

说实话全体的方案作者都贯彻过,蕴涵在活动端上线测量试验等等

现阶段最为神奇的正是透过CSS3关键帧管理动画,假设动画多写一群的样式就是一个蛋疼的事

故而这里自身建议足以选拔脚本生成关键帧,通过内联style加载,哈哈~~~ 特别周到~

图片 7

刚好提到了假诺3*3的矩阵,可是总量不到9个要哪些管理?

故而那边小编提供三个关键帧的算法给我们参照他事他说加以考察下,比较容易

图片 8

那是自己项目中的用了,为了便于大家掌握,作者做了三个粗略的

大家只要有意思味能够三回九转到github,顺手踩生机勃勃踩Followers下,谢谢~~

github连接 : 

1 赞 收藏 评论

图片 9

CSS技艺爬山涉水逐帧动画抖动建设方案

2017/08/16 · CSS · 动画

最早的文章出处爬山涉水 坑坑洼洼实验室   

笔者所在的前端共青团和少先队重要从事移动端的H5页面开荒,而公司行使的适配方案是: viewport units + rem。具体能够瞻昂凹凸实验室的稿子 – 利用视口单位落到实处适配布局 。

小编近日(2017.08.12)接触到的位移端适配方案中,「利用视口单位达成适配布局」是最佳的方案。可是使用 rem 作为单位会遇上以下八个难题跋山涉水的近义词

  • 微观尺寸(20px左右)定位不许
  • 逐帧动画轻巧有震撼

首个困难的平日出现在 icon 绘制进度,能够行使图片或者 svg-icon 化解这几个标题,作者刚强提出使用 svg-icon,具体理由能够钦慕爬山涉水「拥抱Web设计新势头跋山涉水的近义词SVG Coca Colas实践应用」。

其次个难点作者比世尊深入分析抖动的原由和寻觅建设方案。

三个振动的例子

做叁个8帧的逐帧动画,每帧的尺码为跋山涉水的近义词360×540。

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 45rem 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -45rem; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 45rem 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -45rem;
  }
}

观望在主流(手提式有线话机)分辨率下的播音情形爬山涉水

iPhone 6
(375×667)
iPhone 6+
(414×736)
iPhone 5
(320×568)
Android
(360×640)

多种分辨率下,能够看来除了 ip6 另外的二种分辨率都爆发了震动。ip6 不抖动的案由是适配方案是基本于 ip6 的分辨率订制的。)

解析抖动

图像由终端(显示屏)显示,而终端则是叁个个光点(物理像素)组成的矩阵,换句话说图片也大器晚成组光点矩阵。为了有助于描述,小编假设终端上的二个光点代表css中的1px。

以下是一张 9px * 3px 的sprite:

图片 10

每帧的尺码为 3px * 3px,逐帧的取位进程如下跋山涉水的近义词
图片 11

把 sprite 的 background-size 的幅度取八分之四,那么极端会怎么管理?
9 / 2 = 4.5
终点的光点都以以自然数的花样出现的,这里需求做取整管理。取成天常是二种方法爬山涉水round/ceil/floor。假设是 round ,那么 background-size: 5px,sprite 会是以下二种的三个爬山涉水

情况一 情况二 情况三

理论上,5 / 3 = 1.666...。但实在光点取整后,五个帧的增幅都不或然也就是 1.666...,而是有叁个帧的增进率降级为 1px(亏),此外七个升幅晋级为 2px(盈),作者把那个场景叫做「盈利和赔本互补」。

再看一下盈利和亏损互补后,逐帧的取位进度爬山涉水

情况一 情况二 情况三

能够看出由于盈利和赔本互补导致了多少个帧的宽窄不豆蔻梢头致,亏的那大器晚成帧在动画中的表示正是抖动

笔者计算抖动的来头是跋山涉水的近义词sprite在尺寸缩放后,帧与帧之间的利润或亏本互补现象变成动画抖动

附注跋山涉水的近义词1px 由多少个光点表示是由以极端的 dpr 决定

实施方案

「盈利和亏蚀互补」也能够说是「盈利和耗损不等同」,假诺尺寸在缩放后「盈利和耗损繁荣昌盛致」那么抖动现象得以缓慢解决。

化解构想豆蔻梢头

我遵照「盈利和亏损大器晚成致」设计了「化解构想少年老成」跋山涉水的近义词

图片 12

基于上图,其实超级轻易就联想到贰个轻松的方案爬山涉水不用Coca Cola图(即黄金年代帧对应一张图纸)
以此方案确实是能够减轻抖难题,可是作者并不引入应用它,因为它有多个负面的事物爬山涉水

  • KB变大与央浼数大增
  • 多余的 animation 代码

以此方案比较轻巧,这里就不赘述了。

化解构想二

把逐帧取位与图像缩放拆分成多少个独立的进度,正是作者的「消除构想二」爬山涉水
图片 13

落到实处「构想二」,作者首先想到的是使用 transform: scale(),于是收拾了一个贯彻方案A跋山涉水的近义词

.steps_anim { position: absolute; width: 360px; height: 540px; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 1800px 540px; top: 50%; left: 50%; transform-origin: left top; margin: -5.625rem 0 0 -5.625rem; transform: scale(.5); animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px; } } /* 写断点 */ @media screen and (width: 320px) { .steps_anim { transform: scale(0.4266666667); } } @media screen and (width: 360px) { .steps_anim { transform: scale(0.48); } } @media screen and (width: 414px) { .steps_anim { transform: scale(0.552); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.steps_anim {
  position: absolute;
  width: 360px;
  height: 540px;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 1800px 540px;
  top: 50%;
  left: 50%;
  transform-origin: left top;
  margin: -5.625rem 0 0 -5.625rem;
  transform: scale(.5);
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px;
  }
}
/* 写断点 */
@media screen and (width: 320px) {
.steps_anim {
transform: scale(0.4266666667);
}
}
@media screen and (width: 360px) {
.steps_anim {
transform: scale(0.48);
}
}
@media screen and (width: 414px) {
.steps_anim {
transform: scale(0.552);
}
}

其意气风发完成方案A存在鲜明的劣势:scale 的值需求写过多断点代码。于是小编结全大器晚成段 js 代码来校订这几个实现方案B爬山涉水

css:

.steps_anim { position: absolute; width: 360px; height: 540px; background: url("//misc.aotu.io/leeenx/sprite/m.png") 0 0 no-repeat; background-size: 1800 540px; top: 50%; left: 50%; transform-origin: left top; margin: -5.625rem 0 0 -5.625rem; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.steps_anim {
  position: absolute;
  width: 360px;
  height: 540px;
  background: url("//misc.aotu.io/leeenx/sprite/m.png") 0 0 no-repeat;
  background-size: 1800 540px;
  top: 50%;
  left: 50%;
  transform-origin: left top;
  margin: -5.625rem 0 0 -5.625rem;
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px;
  }
}

javascript:

// 以下代码放到<head></head>中// <![CDATA[ document.write(" .steps_anim {scale(.5); } "); function doResize() { scaleStyleSheet.innerHTML = ".steps_anim {-webkit-transform: scale(" + (document.documentElement.clientWidth / 750) + ")}"; } window.onresize = doResize; doResize(); // ]]>

1
2
3
4
5
6
7
8
9
10
11
12
13
// 以下代码放到<head></head>中// <![CDATA[
document.write("
 
.steps_anim {scale(.5); }
 
 
");
function doResize() {
  scaleStyleSheet.innerHTML = ".steps_anim {-webkit-transform: scale(" + (document.documentElement.clientWidth / 750) + ")}";
}
window.onresize = doResize;
doResize();
// ]]>

透过校正后的方案 CSS 的断点没了,认为是科学了,可是笔者认为那些方案不是个纯粹的创设方案。

大家理解<img> 是足以依靠内定的尺寸自适应缩放尺寸的,假设逐帧动画也能与 <img> 自适应缩放,那就足以从纯营造角度实现「构想二」。

SVG恰巧能够消除难点!!!SVG 的变现与 <img>``形似同一时间能够做动画。以下是小编的落到实处方案C。

html:

JavaScript

<svg viewBox="0, 0, 360, 540" class="steps_anim"> <image xlink:href="//misc.aotu.io/leeenx/sprite/m.png" width="1800" height="540" /> </svg>

1
2
3
<svg viewBox="0, 0, 360, 540" class="steps_anim">
  <image xlink:href="//misc.aotu.io/leeenx/sprite/m.png" width="1800" height="540" />
</svg>

css:

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; image { animation: step 1.2s steps(5) infinite; } } @keyframes step { 100% { transform: translate3d(-1800px, 0, 0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
  image {
   animation: step 1.2s steps(5) infinite;
  }
}
@keyframes step {
  100% {
    transform: translate3d(-1800px, 0, 0);
  }
}

方案C的改良

实现方案C很好地消除了方案A和方案B的先天不足,可是方案C也可以有它的难题爬山涉水不平价自动化工具去管理图片

自动化学工业具平时是怎么处理图片的?
自动化学工业具平日是扫描 CSS 文件寻觅全部的 url(...) 语句,然后再管理这个话语指向的图纸文件。

如果 可以改用 CSS 的 `background-image` 就可以解决这个问题,不过 `SVG` 不支持 CSS 的 `background-image`。但是,`SVG`有一个扩展标签:`foreignObject`,它允许向 插入 html 代码。在利用它前,先看一下它的相称情状跋山涉水的近义词

图片 14

iOS 与 Android 4.3 一片铅灰包容情况到底地利人和,作者实机测量试验腾讯 X5 内核的浏览器宽容仍然精粹。以下是改良后的方案。

html:

JavaScript

<svg viewBox="0, 0, 360, 540" class="steps_anim"> <foreignObject class="html" width="360" height="540"> <div class="img"></div> </foreignObject> </svg>

1
2
3
4
5
<svg viewBox="0, 0, 360, 540" class="steps_anim">
  <foreignObject class="html" width="360" height="540">
    <div class="img"></div>
  </foreignObject>
</svg>

css:

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; } .html { width: 360px; height: 540px; } .img { width: 1800px; height: 540px; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 1800px 540px; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
}
.html {
width: 360px;
height: 540px;
}
.img {
width: 1800px;
height: 540px;
background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
background-size: 1800px 540px;
animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px 0;
  }
}

校订后的方案DEMO:

总结

多谢阅读完本作品的读者。本文是笔者的个人观点,希望能支持到有连带主题素材的恋人,如若本文有不妥之处请多多点拨。


参照他事他说加以考察资料爬山涉水



1 赞 4 收藏 评论

图片 15

本文由门户名站发布,转载请注明来源:逐帧动画抖动解决方案,雪碧图自适应缩放