前端特效:Javascript,css animation,GIF,Lottie

特效在9102 前端营销广告或者H5或者纯粹广告图的方式司空见惯,但总有新的替代方式。虽然特效越来越复杂,但特效制作的制作过程却越来越简便。最近做了个项目使用到了最新的实现技术，以下会对比相应的技术实现。

一，前端JS库实现特效

jQuery animat，canvas库 等等

二，CSS动画库实现

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
详情：https://github.com/daneden/animate.css

三，GIF动图

     1.PS制作gif动图

     2.借助在线工具http://gif.55.la/

四，Lottie特效

（1）普通web PC端使用Lottie

    引入：https://labs.nearpod.com/bodymovin/demo/markus/halloween/lottie.min.js
    var svgContainer = document.getElementById('svgContainer');
    var animItem = bodymovin.loadAnimation({
      wrapper: svgContainer,
      animType: 'svg',
      loop: true,
      path: 'https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json'
    });

（2）Vue单页SPA使用Lottie

    安装 npm install --save vue-lottie
    组件使用：
    import * as lottieData from './lottie/lottie.json' //任意lottie格式json
    import Lottie from 'vue-lottie/src/lottie.vue'


    data(){
      return {
        lottieOptions:{
          animationData:lottieData.data
        }
      }
    },
    components:{
      Lottie
    },
    methods:{
      lottieCreated(anim){
	    this.anim = anim
      }
    }


    <template>
      <Lottie :options="lottieOptions" :height="60" :width="60" @animCreated="lottieCreated"/>
    </template>

（3）小程序使用Lottie 

    baidu：animation-view  https://smartprogram.baidu.com/docs/develop/component/base/#animation-view/
    wechat：没有具体使用 https://github.com/landn172/lottie-miniapp
    alipay:暂无

（4）react使用Lottie 

1.安装 npm install --save react-lottie
2.导入:
  import React from 'react'
  import Lottie from 'react-lottie'; 
  import * as animationData from './pinjump.json' //lottie json data
3.使用

  render：
  const defaultOptions = {
      loop: true,
      autoplay: true, 
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };
   <Lottie options={defaultOptions}
              height={400}
              width={400}
              isStopped={true}
              isPaused={true}/>

（5）react-native使用Lottie 

    1.下载依赖包  npm i --save lottie-react-native
    2.添加到libs中： react-native link lottie-react-native //会修改诸多文件,测试使用时请勿在相关正式开发项目中使用
    3.JSX 详情：https://www.npmjs.com/package/lottie-react-native   

    import React from 'react';
    import LottieView from 'lottie-react-native';

    export default class BasicExample extends React.Component {
      render() {
        return <LottieView source={require('./animation.json')} autoPlay loop />;
      }
    }

(6)阿里犸良特效编辑器 

   使用步骤：
   1.前往 https://design.alipay.com/emotion/editor开启设计
   2.将设计好的json文件导出来
   3.将json文件引入到项目之中作为静态数据
   
   4.在项目中的使用参考以上(1)(2)(3)(4)(5)