一个小推车动画的诞生

这篇文章将向大家介绍我们区块链主题页的一个小推车动画是如何实现的，希望能对您有所帮助。

1.原始素材

我们想要实现的效果是：用户滑到底部，动画人物推着车往左走出来，下图是我们的原始素材，动画人物推着车的图片。

2.设计师实现动画

动画工具选择

Adobe XD，Adobe animate

动作分解

想要实现仿真的走路效果，首先要分解好关键帧动作，确定动画人物的大致的动作

关节分解

把动画人物需要活动的部位拆分出来。

导出动画

为了配合前端工程师编写代码，我们要找到合适的格式进行导出

实现页面效果

水平移动

想要实现的效果是让图片向左走到左侧虚线框处停住。

思路分析：

• 起始位置（图片→虚线框）
• 运动时间（3秒之内，否则用户滑走）
• 动画播放几遍（一遍停下）

技术实现：

 @keyframes people {                         /* keyframes名称为people */
        from{                                   
        transform: translateX( 0px);         /* 开始位置是0 */
        }
        to{
        transform: translateX(-600px);       /* 结束位置是600 */
        }
                                             /* 这段功能是让动画向左（所以是﹣）走600px的距离 */
            }

  .van {
        animation-name: people;               /*   指定 类van 要使用的keyframes名称为 people */
        animation-duration: 2.2s;               /* 动画时长为2.2s */
        animation-timing-function: linear;      /* 让动画从头到尾的速度是相同的，匀速变化 */
        animation-iteration-count: 1;           /* 动画播放次数为一次 */
        animation-fill-mode: forwards;          /* 动画播放结束后停在最后一帧 */
            }

预期结果：

动画人物 2.2s走一遍到指定位置，并停在最后一帧。

结果：

动画人物 2.2s走到指定位置，原地踏步（即没有走一遍并停在最后一帧）

原因：

设计师使用的 Adobe animate 导出的动画文件是使用原生 JS 实现的，我用 css 只能让画板在 2.2s 内走到指定位置。

让动画人物只走一遍

代码实现

// stage content:
(lib.无标题1 = function(mode,startPosition,loop) {
if (loop == null) { loop = false; } this.initialize(mode,startPosition,loop,{});

软件调试

Adobe animate 导出设置为只播放一遍

监听页面滑到底部动画开始

确定滚轮滑到底部

当 scrollHeight == scrollTop+windowHeight 时，页面滑到底部

动画人物开始走

阅读 Adobe animate 导出的文档找到控制动画开始的函数，满足条件时调用它。

window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    if(scrollTop+windowHeight==scrollHeight){
     document.getElementById("animation_container").classList.add("van");
                    fnStartAnimation();
                }   
            }

下面是最终效果，一个看似简单的的推车动画凝结了我们的努力和心血，我们喜爱创新，热衷挑战 那怕是一个小小的动画我们也会投入许多的精力与心血。