来自 前端知识 2019-11-21 21:27 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

逐帧动漫抖动应用方案,Coca Cola图自适应缩放

CSS3技术-雪碧图自适应缩放

2015/08/20 · CSS · 雪碧图

原文出处: Aaron的博客   

花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放

ps: 以下实现都是基于移动端的处理

原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值

图片 1

问题很明显,在缩放的屏幕上人物还是按照原尺寸大小显示

后来临时留了一节预备的方案:CSS3的scale处理直接可以让元素缩放

图片 2

通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放,目测还是不错。

但是这会带一系列的计算问题,因为通过sacle缩放后的元素,在浏览器布局中还是按照原尺寸计算的,所以这样的方案我也是非常的不满意

雪碧图常规的方案一般会做几套不同大小的图去适应不同的设备尺寸

这里我特指移动端单图的处理,采用的技术很简单CSS3一些知识点

先看看原图与处理后的效果

图片 3

图片 4

来讲解下原理,说白了很简单

先观察下矩阵的排量如上是行3 竖3 所以矩阵就是3*3的排列,但是这里只有8张图,怎么处理之后会讲

一般想让背景图填充整个元素在css3中可以通过background-size:100% 100%处理

显然不能让整图去填充元素,整图填充一个元素就是这效果

图片 5

如何让单图填充一个元素呢? 这里我想到了一个办法,把整图整体缩放,额,就是整体缩放。。。

3*3的矩阵,我横竖按照矩形的数量比缩放100%

CSS

background-size: 300% 300%;

1
background-size: 300% 300%;

图片 6

到了这一步估计大家都猜出来了,很简单了,通过百分比去取图了

至于精灵动画实现的手段太多了,比如定时器的帧动画,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 Sprites实践应用」。

第二个难点笔者举个例子来分析抖动的原因和寻找解决方案。

一个抖动的例子

做一个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

根据上图,其实很容易就联想到一个简单的方案:不用雪碧图(即一帧对应一张图片)
这个方案确实是可以解决抖问题,不过笔者并不推荐使用它,因为它有两个负面的东西:

  • KB变大与请求数增多
  • 多余的 animation 代码

这个方案很简单,这里就不赘述了。

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:逐帧动漫抖动应用方案,Coca Cola图自适应缩放

关键词: