创意talk项目小结

项目背景

下文是这次项目中，我对该H5的重构开发小结：

首页

如上图所示，首页背景由各种图标icon组成，而所有icon都是由线条组成，正好符合svg路径动画的先提条件。但由于icon过多，逐个绘制出来会导致首屏动画时间过长，所以考虑逐行绘制，边绘制icon边渐显。现在假设1行绘制的时间是0.5s，那么绘制12行icon共需6s，动画总时间还是过长。但是如果在每行绘制一半的时候就开始绘制下一行，那么时间又能缩短一半，而且还能保持动画的连贯性，体验更好。

那么首屏整个动画流程：

所有icon逐行绘制→主题所在位置背景icon渐隐，主题渐显→底部logo出现→滑屏提示箭头出现。

然后由设计师提供背景图标svg文件，用编辑器打开后可以得到相应代码，由于代码过长这里就不贴出来了，有兴趣的可以扒代码看。

这里还需要用到插件 vivus.js，Vivus是一款可以执行SVG路径动画的轻量级Javascript库。Vivus可以绘制SVG图形的外观。Vivus提供各种不同的动画参数来让你定制你自己的SVG路径动画。使用方法简单，在底部引入vivus.js，然后像下边这样调用它：

new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);

有老司机可能会说用Element.getTotalLength()这个方法获取svg路径长度，再配合使用css3就可以实现路径动画了，不需要用插件。但是Element.getTotalLength()仅适用于path元素，svg中的line，circle等元素是不支持的，而vivus.js能将SVG文件中的所有对象都转换为path元素，这样就能够使用strokeDashoffset属性来制作路径动画了。这里还需要注意的是所有的元素都必须有stroke属性而且不能填充颜色。因为插件只是绘制图形的轮廓而不会去检查它的颜色。例如：fill: “none”; ，stroke: “#FFF”;。具体使用方法可去Vivus官网查看。Svg路径动画一解决，接下来就只需要用js和css控制动画出场顺序，效果如下：

嘉宾页

版式布局都是统一的，不同的是嘉宾图片以及相应的简介；而人物是当前版面的重心，所以在不同人物切换的时候，动画重点侧重于人物图片的入场出场展示，文字信息次之，渐隐渐显，主要动画代码如下：

.swiper-slide{
    background:#000 url(../img/page_bg.png) center top no-repeat;
    background-size: 100% auto;
    .people{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all .3s;
        transform: scale(.9);
        opacity: 0;
    }
}
.swiper-slide-active{
    .people{
        transform: scale(1);
        opacity: 1;
    }
}

用过swiper滑屏插件的都知道，当前显示屏会在slide元素上加上swiper-slide-active的类名，所以通过上面代码就能实现0.9倍到1倍的放大transition效果。

按钮添加了呼吸的光圈效果，吸引用户视觉焦点，引导用户点击，CSS动画代码如下：

@keyframes a_btn{
    0%{
        transform: scale(.6);
        opacity: 1;
    }
    80%{
        transform: scale(1);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}

0%～80% 用于产生形变过渡动画，而80%～100% 则保持隐藏状态，让动画节奏稍微停顿，光圈的呼吸不会太过急促，太过抢眼。点击按钮后渐显出来嘉宾详细信息的弹层，如下：

右上角的关闭按钮设计较淡，可能用户会忽略而不知道从哪里关闭弹层返回到嘉宾列表页，因此添加“心跳”动画，对用户起到引导效果。动画代码如下：

@keyframes close {
    0%{
        transform: scale(1);
    }
    30%{
        transform: scale(1);
    }
    31% {
        transform: scale(1.2);
    }
    32%{
        transform: scale(1);
    }
    33%{
        transform: scale(1.2);
    }
    34%{
        transform: scale(1);
    }
    100%{
        transform: scale(1);
    }
}

项目二维码

小结

上图是官方推荐高性能动画的四个属性，事实如此，各种复杂炫酷的css3动画依靠这四个属性的搭配我们就可以实现出来，有兴趣的童鞋可以参考下css十四原则。Css3动画博大精深，运用好了能为网页锦上添花，提高用户体验，但是也不要为了动画而做动画，做出的动画不精致或者不符合场景反而会适得其反。

原文:大专栏创意talk项目小结