移动端里的逐帧动画-蚊子-前端博客

第一次做逐帧动画没有经验，想当然的用两张或三张图片做显示隐藏的切换，结果在手机里的动画效果简直没法看，这时，才想起了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