前言

最近要做一个要有炫酷效果动画的大屏页面（如下图所示），这种可视化大屏页面最重要的就是要能够吸引人的眼球，让人眼前一亮的感觉，所以我们就需要跟UI同学进行深度沟通，也是在经过多次的修改调试最终才完成了比较满意的效果。

下面一起看下是如何实现的吧！

动画效果

本来是想着使用传统的css动画来实现，直到UI同学甩给我一个json文件并问道样式能直接加载一个json文件吗？（上图中的中间部分的内容以及动画效果就是使用json文件渲染出来的，其他地方使用的是传统的css动画）我想那不就是在css里加载json文件吗？这恐怕不行吧于是就说不可行，然后偶然在他发的链接中看到了lottie的字眼，瞬间就想起来了好像有这么一个动画库，于是一查果然有叫lottie-web。

lottie-web介绍

Lottie是Airbnb开发的一种轻量级的JavaScript库，它能够在Web、iOS和Android平台上呈现高质量、动态的矢量动画。Lottie使得在应用中使用复杂的矢量动画变得更加容易，并且在不同平台上能够实现更高的视觉一致性。而lottie-web是Lottie的Web版本，使用它可以在Web页面中展示高品质、流畅的动态矢量动画。

与css动画、gif、帧动画进行比较有很明显的优势。

这个json文件其实是由UI同学在AE中制作并导出的，json文件中会有一些源图片，这个也是放到json文件中指定的路径中即可，然后前端只需要使用特定的方法就可以加载出来动画效果。

lottie-web使用

以vue2项目为例，首先进行npm安装:

npm i lottie-web

在index.vue中引入并使用：

<template>
    <div id="animation"></div>
</template>

<script>
import lottie from 'lottie-web';

export default{
    mounted(){
        const dom = document.getElementById("animation");
        lottie.loadAnimation({
            container: document.getElementById('animation'), // 动效图容器的元素
            loop: true, // 是否循环播放
            autoplay: true, // 是否自动播放
            // rendererSettings: {
            //     preserveAspectRatio: 'xMidYMid slice',
            //     quality: 'high', // 提高图片质量
            // },
            path: 'animation.json' // JSON文件的路径 =》 public文件夹中
        });
    }
}
</script>
<style>
#animatiion{
    width: 55%;
    height:50%;
    /* ... */
}
</style>

里面的配置项还有很多，开发文档双手奉上，并且也可以对加载完毕的效果添加动画效果，毕竟最外面还是一个容器，使页面更加炫酷。可以看到大部分工作还是在UI部分~~

大屏适配

既然是大屏不可避免的就是适配问题，这里我推荐使用autofit.js，使用起来方便并且效果也比较完美。

npm i autofit.js

<script>
import autofit from 'autofit.js'

export default{
    mounted(){
        let options = {
            designHeight: 1080, // 设计稿的宽度
            designWidth: 1920, // 设计稿的高度
            renderDom: ".home-container", // 要渲染的容器
        }
        autofit.init(options)
    }
}
</script>

总结

今天就分享这两个功能点，虽然都不算太难，但是在做项目的过程中还是要善于总结，这样不仅可以强化自己的思路也能在下次遇到这种场景提高开发效率。