http://www.web008.net

【美高梅手机版】一个栗子上手,逐帧动画抖动解决方案

CSS技术:逐帧动漫抖动建设方案

2017/08/16 · CSS · 动画

原稿出处: 坑坑洼洼实验室   

小编所在的前端团队重要从事移动端的H5页面开拓,而集体应用的适配方案是: viewport units + rem。具体能够远瞻凹凸实验室的稿子 – 利用视口单位实现适配构造 。

俺如今(2017.08.12)接触到的移位端适配方案中,「利用视口单位落到实处适配结构」是最棒的方案。可是使用 rem 作为单位会遇见以下五个难点:

  • 微观尺寸(20px左右)定位不许
  • 逐帧动漫轻易有震惊

首先个困难的平日性出将来 icon 绘制进度,能够应用图片或者 svg-icon 化解那几个标题,作者刚强建议使用 svg-icon,具体理由能够参见:「拥抱Web设计新取向:SVG 7-Ups推行应用」。

第一个难题作者举个例证来深入分析抖动的来由和寻找解决方案。

一个尖栗上手 CSS3 动漫

2017/05/10 · CSS · 2 评论 · CSS3, 动画

本文小编: 伯乐在线 - 陈被单 。未经小编许可,禁止转发!
接待出席伯乐在线 专栏编辑者。

这几年混乱的专业相当多,非常多学问都没赶趟总结,是时候总结总计,开启新的篇章~

本篇著作不后生可畏一列举CSS3动漫片的个性,若须求精晓API,可前往MDN 。

在起先栗子前,大家先补补底子知识。

css3动漫分类:

  • 补间动漫 – 拥有连贯性的卡通片
  • 逐帧动漫 – 使用steps过渡情势达成跳跃

animation常用属性及气象:

animation: name duration timing-function delay iteration-count direction;

1
animation: name duration timing-function delay iteration-count direction;

1. timing-function属性:  

  • ease 规定慢速开始,然后变快,然后慢速停止的连片效果。
  • ease-in 规定以慢速以前的连通效果。
  • ease-out 规定以慢速截至的接入效果。
  • ease-in-out 规定以慢速开首和终结的衔接效果。
  • linear 动漫从头至尾的速度是相似的。
  • cubic-bezier(n,n,n,n) 在cubic-bezier函数中协和的值,n取值为0~1
  • steps()

2. delay属性:用于将动漫片与此外卡通的执行时机错开,将动漫片落到分裂的时间点。那特性情很好用~

动漫片原则:

  1. 运动平时常有个惯性,所以要先快后有三个慢一点的反弹。
  2. 背景若选取多少个轻易熠熠闪闪,错位闪烁

配合JS使用

slide.addEventListener("webkitAnimationEnd", function(卡塔尔 { console.log('eeee'卡塔尔 //动漫甘休再调用 }卡塔尔国;

1
2
3
slide.addEventListener("webkitAnimationEnd", function() {
   console.log('eeee') //动画结束再调用
});

些微处境大家要求有限支撑动漫甘休后再开展其它一些互为,可使用该事件监听。


实战练习:

若是我们须要落成三个这么总结的卡通片:

美高梅手机版 1

有心人考查地点的动漫片,我们开掘,它能够由以下3某个构成:

  1. 登场动漫——从右往左移动

  2. 反正周而复始移动

  3. 逐帧动画

心想事成形式:

使用3个dom元素,最外层dom达成登场动漫,第二层dom达成左右运动,第三层dom完成逐帧动漫。

亮点:调节和测量试验方便,节省时间。

缺点:dom多。

1. dom结构

<div class="anima_entrance"> <div class="anima_move"> <div class="anima_sprite"></div> </div> </div>

1
2
3
4
5
<div class="anima_entrance">
    <div class="anima_move">
        <div class="anima_sprite"></div>
    </div>
</div>

2. 深入分析动漫造成的年月轴:

美高梅手机版 2

上台动漫持续0.6s,只播放一次,左右移动以致逐帧动漫持续2s,循环播放,代码如下:

.anima_entrance { animation: anima_entrance .6s ease-in-out both; } .anima_move { animation: anima_move 2s linear .6s infinite both; } .anima_sprite { animation: anima_sprite 2s step-end .6s infinite both; }

1
2
3
4
5
6
7
8
9
10
11
.anima_entrance {
    animation: anima_entrance .6s ease-in-out both;
}
 
.anima_move {
    animation: anima_move 2s linear .6s infinite both;
}
 
.anima_sprite {
    animation: anima_sprite 2s step-end .6s infinite both;
}

3. 使用steps()达成逐帧动漫:

利用下边那张Coca Cola图,通过转移background-position完结动漫切换。

美高梅手机版 3

蹬蹬蹬,效果如上面所示,是或不是很深负众望

美高梅手机版 4

案由:由于animation暗中认可以ease情势连接,它会在各种关键帧之间插入补间动画,所以动画效果是连贯性的。当时得以选择steps(卡塔尔(قطر‎打消补间动漫。

贴一个图:

美高梅手机版 5

  • steps(1,start卡塔尔: 动漫一上马就跳到 100%直到那黄金年代帧(不是整整周期)结束   == step-start
  • steps(1,end卡塔尔(英语:State of Qatar): 保持 0% 的体制直到那生机勃勃帧(不是全部周期)结束   == step-end

进而,大家将timing-function改成 step-end,效果如下:

animation: sprite 2s step-end .6s infinite both;

1
animation: sprite 2s step-end .6s infinite both;

美高梅手机版 6

并发想要的效应了哈~不错。

总体的css代码如下:

.anima_entrance { position: absolute; z-index: 3; top: 5.1rem; left: 4.05rem; width: 12.9rem; height: 19.1rem; -webkit-animation: anima_entrance .6s ease-in-out both; animation: anima_entrance .6s ease-in-out both; } .anima_move { width: 218px; height: 382px; position: absolute; z-index: 1; top: 0; left: 42px; -webkit-animation: anima_move 2s linear .6s infinite both; animation: anima_move 2s linear .6s infinite both; } .anima_sprite { width: 218px; height: 382px; background: url(demo.png) no-repeat 0 0; background-size: 25.8rem 19.1rem; -webkit-animation: anima_sprite 2s step-end .6s infinite both; animation: anima_sprite 2s step-end .6s infinite both; } @keyframes anima_entrance { 0% { -webkit-transform: translate3d(18.75rem, 0, 0); transform: translate3d(18.75rem, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes anima_move { 0%, 16%, 42%, 74%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 29% { -webkit-transform: translate3d(-1rem, 0, 0); transform: translate3d(-1rem, 0, 0); } 87% { -webkit-transform: translate3d(1rem, 0, 0); transform: translate3d(1rem, 0, 0); } } @keyframes anima_sprite { 0%, 16%, 42%, 58%, 74%, 100% { background-position: -12.9rem 0; } 8%, 50%, 66% { background-position: 0 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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.anima_entrance {
    position: absolute;
    z-index: 3;
    top: 5.1rem;
    left: 4.05rem;
    width: 12.9rem;
    height: 19.1rem;
    -webkit-animation: anima_entrance .6s ease-in-out both;
    animation: anima_entrance .6s ease-in-out both;
}
 
.anima_move {
    width: 218px;
    height: 382px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 42px;
    -webkit-animation: anima_move 2s linear .6s infinite both;
    animation: anima_move 2s linear .6s infinite both;
}
 
.anima_sprite {
    width: 218px;
    height: 382px;
    background: url(demo.png) no-repeat 0 0;
    background-size: 25.8rem 19.1rem;
    -webkit-animation: anima_sprite 2s step-end .6s infinite both;
    animation: anima_sprite 2s step-end .6s infinite both;
}
 
@keyframes anima_entrance {
    0% {
        -webkit-transform: translate3d(18.75rem, 0, 0);
        transform: translate3d(18.75rem, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
 
@keyframes anima_move {
    0%, 16%, 42%, 74%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    29% {
        -webkit-transform: translate3d(-1rem, 0, 0);
        transform: translate3d(-1rem, 0, 0);
    }
    87% {
        -webkit-transform: translate3d(1rem, 0, 0);
        transform: translate3d(1rem, 0, 0);
    }
}
 
@keyframes anima_sprite {
    0%, 16%, 42%, 58%, 74%, 100% {
        background-position: -12.9rem 0;
    }
    8%, 50%, 66% {
        background-position: 0 0;
    }
}

打赏协理作者写出越多好著作,多谢!

打赏作者

叁个共振的例证

做三个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 的分辨率订制的。)

打赏支持自身写出越来越多好文章,多谢!

任选大器晚成种支付方式

美高梅手机版 7 美高梅手机版 8

1 赞 7 收藏 2 评论

浅析抖动

图像由终端(荧屏)显示,而终端则是多个个光点(物理像素)组成的矩阵,换句话说图片也生龙活虎组光点矩阵。为了有支持描述,我假诺终端上的一个光点代表css中的1px。

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

美高梅手机版 9

每帧的尺寸为 3px * 3px,逐帧的取位进度如下:
美高梅手机版 10

把 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 决定

有关作者:陈被单

美高梅手机版 11

热爱前端,应接调换 个人主页 · 小编的篇章 · 19 ·   

美高梅手机版 12

解决方案

「盈利和亏折互补」也能够说是「盈利和亏蚀不相近」,假设尺寸在缩放后「盈利和亏折风姿浪漫致」那么抖动现象能够消除。

消逝构想意气风发

小编依据「盈利和赔本风姿浪漫致」设计了「化解构想生机勃勃」:

美高梅手机版 13

据他们说上海体育场合,其实超轻易就联想到叁个轻松的方案:不用七喜图(即意气风发帧对应一张图片)
本条方案确实是足以减轻抖难题,不过作者并不推荐使用它,因为它有三个不好的一面包车型大巴东西:

  • KB变大与诉求数扩大
  • 多余的 animation 代码

以此方案超级轻便,这里就不赘述了。

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。