技术拆解-年会H5的跳跃动画

今年是公司上市 10 周年，应人事部需求，我们做了一个年会 H5的页面，展示公司的发展历程。这个页面的动效还挺有意思的，这里记录下实现要点。

依赖的库

JQuery：操纵动画，页面元素的移动

Vanish 的 SDK：用于在 Vanish 的 APP 环境中，获取用户的信息，比如邮箱之类的；以及执行分享操作

思路

还是通过数据驱动的理念，先设计好数据结构。

由于动画是一帧一帧的，因此我们把每一帧动画当成一个数据结构。

单个数据结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  bgMove: true,
    bg: {
      height: 400,
        duration: 300
    },
      xOffset: '53%',
        duration: 1200,
          animation: {
            person: ['person', 2, 95], // ['动画名称', '几张切图', '每个人物宽度']
              jump: ['jump', 80],
                personAnimate: ['person', '1200ms', 'step-start', '1', ''], // ['动画名称', '持续时间', '动画曲线'， '播放几次', '是否倒着播放']
                  jumpAnimate: ['jump', '600ms', 'cubic-bezier(.16,.84,.44,1)', '2', 'alternate']
          },
            stand: {
              person: ['person', 4, 95],
                jump: ['jump', 8],
                  personAnimate: ['person', '2400ms', 'step-start', 'infinite', ''],
                    jumpAnimate: ['jump', '300ms', 'linear', 'infinite', 'alternate']
            }
}

一些实现原理

切屏

整个背景就是一张长图，因此切屏就是更改当前页面的可视范围。

跳跃

通过 CSS 的关键帧动画@keyframes 来实现，控制 transform 属性的变化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 生成跳跃的keyframes
function setJumpKeyframe(name, height) {
  height = height * percent;
  var kf =
    '@keyframes ' +
    name +
    ' {\n        0% {\n          transform: translateY(0px);\n          -webkit-transform: translateY(0px);\n        }\n        100% {\n          transform: translateY(-' +
    height +
    'px);\n          -webkit-transform: translateY(-' +
    height +
    'px);\n        }\n      }\n      @-webkit-keyframes ' +
    name +
    ' {\n        0% {\n          transform: translateY(0px);\n          -webkit-transform: translateY(0px);\n        }\n        100% {\n          transform: translateY(-' +
    height +
    'px);\n          -webkit-transform: translateY(-' +
    height +
    'px);\n        }\n      }\n    ';
  return kf;
}

表情变换

通过不断的切换图片来实现。

设计师实际上设计了 N 个图，分别代表不同的表情：

character

切换表情的时候，更改表情对应的 css 的 background-position 属性，切到不同的表情即可。

这个是通过 js 控制@keyframes 来实现的。

注意：设计师给出的，其实是 N 个独立的表情图，我们将其通过在线合并工具，合成了一张图，就是上面这个图片。合并也是分类四次，每次合并进去一排表情。