移动端里的逐帧动画

蚊子前端博客
发布于 2017-11-27 16:39
第一次做逐帧动画没有经验,想当然的用两张或三张图片做显示隐藏的切换,结果在手机里的动画效果简直没法看,这时,才想起了steps

这几天在做一个感恩节的html5页面,得到了一个非常大的教训。

页面地址: https://news.qq.com/FERD/ganen/main.htm

页面里有比较多2,3帧的动画,我最初的设想是:针对2帧的动画,那么就用2张图交互的进行显示;针对3帧的动画,那么就3张图片轮流显示。

在2帧动画里,一半时间显示,一半时间隐藏:

样式:

COPYCSS

@keyframes shake2{ 0%{ opacity: 1; } 50%{ opacity: 1; } 51%{ opacity: 0; } 100%{ opacity: 0; } } .img1{ -webkit-animation: shake2 600ms linear infinite; animation: shake2 600ms linear infinite; } .img2{ -webkit-animation: shake2 600ms -300ms linear infinite; animation: shake2 600ms -300ms linear infinite; }

结构:

COPYHTML

<div class="container"> <img class="img1" src="http://img1.gtimg.com/ninja/2/2017/11/ninja151140202268586.jpg" alt=""> <img class="img2" src="http://img1.gtimg.com/ninja/2/2017/11/ninja151139704535009.jpg" alt=""> </div>

这种实现,在PC的模拟器上没有问题,移动端目前也没有问题。但是,如果当前页面中的图片非常多时,2帧动画就会出现问题。我们发现上面中的img1和img2会几乎同时的显示和隐藏,有一种闪屏的效果,如果图片较大,能亮下我的狗眼。在android手机里,动画更是简直没法看。

刚开始是怀疑loading效果造成的,因为页面在loading完成之前,整个页面是隐藏的,会不会是animation在对隐藏的节点上出现问题呢。但是我也发现另一个现象,就是有的动画效果是在一张图片上完成的,比如扇子绕着扇子的根节点扇动,这里只需要为扇子添加一个transform:rotate的animation即可,这种动画就完全没有问题。

后来在两张图片之前的思路上一直修修补补,但是完全没有左右。估计是图片的loading加载,导致animation的时间没有起作用,后来请教了一下同事,就把所有的2帧和3帧效果都用animation中的steps来实现。

网上也有很多用animation-steps实现逐帧动画,在一张图片里,保存这种事物的不同形态,比如小人走路的不同状态,当切换这几种走路的状态时,小人就走起来了。如果没有使用steps,那么animation中的状态会以指定的动画慢慢变化;但steps是跳跃式动画,当前状态时间完成后会直接跳跃到下一个状态,没有过渡效果。

语法:

COPYBASH

steps(number[, end | start])

参数说明: number参数指定了时间函数中的间隔数量(必须是正整数) 第二个参数是可选的,可设值:start和end,表示在每个间隔的起点或是终点发生阶跃变化,如果忽略,默认是end。

注意:第二个参数还有两个内置值,step-start等同于steps(1,start),动画分成1步,动画执行时以左侧端点为开始;step-end等同于steps(1,end):动画分成1步,动画执行时以结尾端点为开始。

因此上面的2帧动画可以用steps实现,以下是用sass语法实现的逐帧动画,方便调用:

COPYCSS

@mixin keyframes($animationName, $width){ @-webkit-keyframes #{$animationName}{ 100%{ -webkit-transform: translate3d(-#{$width}, 0, 0); transform: translate3d(-#{$width}, 0, 0); } } @keyframes #{$animationName}{ 100%{ -webkit-transform: translate3d(-#{$width}, 0, 0); transform: translate3d(-#{$width}, 0, 0); } } } @mixin donghua($alltime: 0.9, $step: 2, $width:0){ $animation-name: unique-id(); // 生成唯一的animation name -webkit-animation: #{$animation-name} #{$alltime*1000}ms steps(#{$step}) infinite 0s; animation: #{$animation-name} #{$alltime*1000}ms steps(#{$step}) infinite 0s; @include keyframes(#{$animation-name}, $width); }

这时,动画在iOS和android都能正常展示了。

欢迎访问: https://news.qq.com/FERD/ganen/main.htm

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function

标签:
阅读(834)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆