美文网首页
js网页动画,如何做一款高逼格不失真的动画

js网页动画,如何做一款高逼格不失真的动画

作者: 0月 | 来源:发表于2018-11-04 20:50 被阅读0次
    在平时的活动页面中,我们可能要做一些动画,一般来说,动画可以分为几种:

    1,就是利用css3的animation、transition、transform、scale、rotate、skew、matrxi属性等做一些dom节点变化的动画,这种动画相对比较简单,开发成本不高,但是如果在不规则的轨迹上动就难了。

    2,利用background-image, background-position加上js控制来做帧动画,原理就是把动画过程按帧来拆分成一张大的背景图,然后给定一个固定宽高的容器,用js快速的控制background-position的位置来达到播放动画的效果,这个稍微麻烦一点,需要js配合;其中有明显的缺点就是动画的宽高不能随着屏幕大小随便改,这样会让动画移动background-position时很难去控制;而且在不同屏幕分辨率下,图片有可能会变得模糊。

    3, 用gif图,短小动画还好,长点的动画,图片文件就比较大了。

    4,用svg做动画,svg的特点就是不失真,随便宽度,但是一般前端工程师都不怎么会画svg,何况是会 ‘动’ 的svg。

    5、canvas做动画,这个实现成本较高了,如果动画的组成元素很多的话,画到你怀疑人生。
    。。。

    废话少说,今天给大家带来一个前端工程师的福利,实现成本小,且动画效果可以高逼格复杂、不失真、满足任意大小屏幕,可以在任意动画轨迹上。

    当然,在实现之前,你需要一个有点能力的设计师配合一下的,毕竟好的动画你的实现成本小,自然工作量就跑到别人那去了。。。

    终于到正题了,主要靠这个js库:https://github.com/airbnb/lottie-web

    步骤1:设计师会用AE这个软件,并且去装一个插件 Bodymovin http://aescripts.com/bodymovin/

    然后设计师按照插件用法去做一个动画,然后在AE上点击render按钮,最后得到一个data.json和一个images的文件夹,images文件夹里面装了动画要用到的图片。

    步骤2:轮到前端工程师出场, 我在vue中用法:
    //1、 安装
       npm install lottie-web -S
    // 2、引入,你可以二选一 引入 lottie 或者lottie_light,lottie_light文件小点
    // 我这里只引入了lottie_light,只能用svg方式去做动画
    import Vue from 'vue'
    import lottie from 'lottie-web/build/player/lottie_light' // lottie_light只能用svg做动画;参数 renderer: 'svg'
    // import lottie from 'lottie-web/build/player/lottie' // lottie可以用svg、canvas、 html做动画;参数 renderer: 'svg'|| 'canvas || 'html',
    Vue.prototype.$lottie = lottie //挂载到vue原型上,方便全局使用
    
    // 3、在.vue组件中
    <template>
      <div id="animate2"></div>    
    </template>
    <script type="text/ecmascript-6">
      mounted() {
          this.$_initAnimation() // 要在mounte以后才能实例化动画,不然报错。
     },
     methods: {
          $_initAnimation() {
            this.$_animation = this.$lottie.loadAnimation({
              container: document.getElementById('animate2'),
              renderer: 'svg', // 由于我引入的是lottie_light,所以这里只能用svg渲染,如果你引入lottie,还可选canvas、html渲染。
              loop: true, // 是否循环播放
              autoplay: true, //是否自动播放
              path: '/animation/data.json' // json文件的路径,记住步骤1导出的data.json和images文件夹要在同级目录里面
            })
          },
          playAnimation() {
            this.$_animation.play()
          },
          stopAnimation() {
            this.$_animation.stop()
          }
        },
        destroyed() {
          this.$_animation.destroy()
        }
    </script>
    

    哈哈,大功告成,是不是很简单。最后附上我的动画实践网址:

    一个公司官网

    相关文章

      网友评论

          本文标题:js网页动画,如何做一款高逼格不失真的动画

          本文链接:https://www.haomeiwen.com/subject/woddxqtx.html