前端特效: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" target="_blank" rel="external nofollow" >
詳情：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)