欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Lottie動(dòng)畫前端開發(fā)使用技巧

 更新時(shí)間：2022年06月22日 11:45:17   作者：胡哥有話說(shuō)  
這篇文章主要為大家介紹了Lottie動(dòng)畫前端開發(fā)使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、為什么會(huì)有Lottie動(dòng)畫呢？

在前端程序員根據(jù)UI視覺稿實(shí)現(xiàn)頁(yè)面效果時(shí)一直存在這樣的一種“矛盾” - 動(dòng)畫效果更完美與工期成本的矛盾。一般來(lái)說(shuō)，頁(yè)面中包含的動(dòng)畫效果越復(fù)雜，前端程序員在實(shí)現(xiàn)時(shí)需要的工期成本越大，尤其是在官網(wǎng)、大促活動(dòng)、活動(dòng)拉新等包含巨多動(dòng)畫效果的場(chǎng)景中，動(dòng)畫實(shí)現(xiàn)需要的時(shí)間占據(jù)了大部分工期時(shí)間，而工期往往是非常緊湊的。同時(shí)后期還經(jīng)常伴隨著與UI設(shè)計(jì)師的反復(fù)“拉扯” - 動(dòng)畫方向要改變下，運(yùn)動(dòng)的路徑曲線要再調(diào)整下，這個(gè)圓角值不太圓，這個(gè)圖片辛苦再替換下。諸如此類，都是讓程序員腦袋變禿的罪魁禍?zhǔn)字?

在反復(fù)的拉扯“折磨”中，有一批程序員就在不停的思索，將動(dòng)畫的設(shè)計(jì)實(shí)現(xiàn)與使用進(jìn)行物理分割，讓專業(yè)的人做更專業(yè)的事兒！

  • 產(chǎn)出某種物料：讓對(duì)色彩、交互更專業(yè)的UI同學(xué)完成動(dòng)畫的設(shè)計(jì)、實(shí)現(xiàn)、優(yōu)化，產(chǎn)出一種可供識(shí)別的物料；
  • 以某種形式直接識(shí)別、使用物料：前端研發(fā)通過某種形式直接識(shí)別該物料，調(diào)用后頁(yè)面直接渲染動(dòng)畫，無(wú)須再配置路徑動(dòng)畫、描邊動(dòng)畫等；

基于這樣的思考與探索，Lottie動(dòng)畫應(yīng)運(yùn)而生！

二、Lottie介紹

Lottie是一款由airbnb開源的跨平臺(tái)動(dòng)畫渲染庫(kù)，支持Android, iOS, Web, Windows平臺(tái)。是專門用于解析從AE(Adobe After Effects)中通過Bodymovin插件導(dǎo)出的JSON文件，直接渲染動(dòng)畫。

Lottie官網(wǎng)的傳送門在此點(diǎn)我你將見證神奇

本文的重點(diǎn)在于如何使用導(dǎo)出的JSON文件，在AE中如何開發(fā)動(dòng)畫以及插件Bodymovin的使用歡迎查閱其他相關(guān)資料~

一圖勝千言 ~代碼片段

該示例代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lottie</title>
    <!-- 重點(diǎn)：引入Lottie JS 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"></script>
    <style>
      #app {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <!-- 定義動(dòng)畫渲染的容器 -->
    <div id="app"></div>
  </body>
  <script>
    // loadAnimation 渲染動(dòng)畫
    const lottieAnimationItem = lottie.loadAnimation({
      // 選取一個(gè)容器，用于渲染動(dòng)畫
      container: document.querySelector("#app"),
      // 定義JSON文件路徑
      path: "https://assets10.lottiefiles.com/packages/lf20_l3qxn9jy.json",
      // 是否循環(huán)播放
      loop: true,
      // 渲染的格式svg/canvas/html，svg性能更優(yōu)，兼容性更好
      renderer: "svg",
    });
  </script>
</html>

開發(fā)人員進(jìn)行簡(jiǎn)單的配置，引入Lottie，加載相應(yīng)的JSON文件，動(dòng)畫就實(shí)現(xiàn)了！簡(jiǎn)不簡(jiǎn)單，神不神奇！

專業(yè)的人做專業(yè)的事兒，后期即使UI設(shè)計(jì)MM又多動(dòng)畫做出了調(diào)整，做為開發(fā)的你唯一需要做的就是將文件替換一下即可！是不是又可以挽救幾根頭發(fā)了~

Lottie Files是一個(gè)專門針對(duì)Lottie動(dòng)畫設(shè)計(jì)、分享的網(wǎng)站。你可以在這個(gè)網(wǎng)站上上傳自己制作的lottie動(dòng)畫，也可以瀏覽其他設(shè)計(jì)師上傳的lottie動(dòng)畫，也可以快速體驗(yàn)，方便而有趣。

三、Lottie常見屬性和方法

loadAnimation參數(shù)配置

屬性名描述
container渲染動(dòng)畫所需容器
renderer動(dòng)畫渲染類型，svg/canvas/html
loop是否循環(huán)播放，布爾值
autoplay是否自動(dòng)播放，布爾值
path一個(gè)指定的JSON文件路徑，注意這里會(huì)發(fā)起一個(gè)http請(qǐng)求json文件
animationDataJSON動(dòng)畫數(shù)據(jù)，與path屬性不共存

TIPS: 當(dāng)設(shè)置path屬性的時(shí)候，并不是簡(jiǎn)單的一個(gè)相對(duì)路徑或者是絕對(duì)路徑引入，而是lottie會(huì)發(fā)送一個(gè)http請(qǐng)求，訪問這個(gè)json文件。如果是在vue/react項(xiàng)目中要注意最終的打包訪問路徑。

考慮頁(yè)面性能更優(yōu)，建議使用svg渲染方式，通過path加載遠(yuǎn)程JSON文件，使用animationData會(huì)讓json文件打包到JS中，

loadAnimation方法返回的對(duì)象

屬性名類型描述
play() => void播放動(dòng)畫
pause() => void暫停動(dòng)畫
stop() => void停止動(dòng)畫
play() => void播放動(dòng)畫
setSpeed(number) => void設(shè)置播放速度
destroy() => void銷毀動(dòng)畫

四、封裝Lottie - React Hooks版

為了在項(xiàng)目中能夠快速?gòu)?fù)用，將Lottie動(dòng)畫渲染簡(jiǎn)易封裝成react組件Lottie。

安裝依賴

# lottie-web是針對(duì)web渲染的庫(kù)
yarn add lottie-web

Lottie組件封裝:

import React, { useRef, useEffect, useMemo, forwardRef, useImperativeHandle, Ref } from 'react';
import lottie, { AnimationItem } from 'lottie-web';
// 渲染類型
type rendererType = 'svg' | 'canvas' | 'html';
// 常用屬性
interface IProps {
  // 是否循環(huán)播放
  loop?: boolean;
  // 渲染動(dòng)畫的類型
  renderer?: rendererType;
  // 是否自動(dòng)播放
  autoplay?: boolean;
  // 動(dòng)畫渲染數(shù)據(jù)，與path互斥
  animationData?: any;
  // JSON文件路徑，與animationData互斥
  path?: string;
}
export default forwardRef((props: IProps, ref: Ref<any>) => {
  // 設(shè)置props的默認(rèn)值
  const { loop = true, renderer = 'svg', path = '', animationData, autoplay = true } = props;
  // 設(shè)置動(dòng)畫渲染的容器
  const containerEle = useRef(null);
  // 對(duì)外暴露的ref對(duì)象
  const lottieAnimation = useRef(null);
  // 指定想父級(jí)調(diào)用組件暴露的ref對(duì)象，方便元素控制當(dāng)前動(dòng)畫的播放與暫停
  useImperativeHandle(ref, () => ({
    // 獲取當(dāng)前動(dòng)畫對(duì)象實(shí)例
    getInstance: () => lottieAnimation.current,
    // 播放，繼續(xù)播放
    play: () => {
      lottieAnimation.current.play();
    },
    // 暫停動(dòng)畫
    pause: () => {
      lottieAnimation.current.pause();
    },
    // 停止動(dòng)畫，區(qū)別于暫停動(dòng)畫pause()
    stop: () => {
      lottieAnimation.current.stop();
    }
  }));
  // 緩存動(dòng)畫的相關(guān)配置
  const animationOptions = useMemo(() => {
    const options: IProps = {
      loop,
      renderer,
      autoplay
    };
    // 優(yōu)先取animationData
    if (animationData) {
      options.animationData = animationData;
    } else {
      options.path = path;
    }
    return options;
  }, [loop, renderer, path, animationData, autoplay]);
  useEffect(() => {
    if (!containerEle.current) {
      return;
    }
    // 渲染動(dòng)畫
    const lottieAnimationItem: AnimationItem = lottie.loadAnimation({
      container: containerEle.current,
      ...animationOptions
    });
    // 將渲染后的動(dòng)畫示例對(duì)象賦值給lottieAnimation.current，對(duì)外暴露
    lottieAnimation.current = lottieAnimationItem;
    // 一定要注意這里的對(duì)象銷毀，避免內(nèi)存泄露，以及重復(fù)渲染動(dòng)畫
    return () => {
      // 重置為null
      lottieAnimation.current = null;
      // 銷毀動(dòng)畫對(duì)象
      lottieAnimationItem.destroy();
    };
  }, [animationOptions]);
  // 因?yàn)閘ottie動(dòng)畫是無(wú)線寬高的，所以這里直接設(shè)置渲染的容器寬度、高度為父級(jí)元素100%即可
  return <div ref={containerEle} style={{ width: '100%', height: '100%' }}></div>;
});

五、Lottie組件的引入與調(diào)用

  • 指定path或animationData
import React, { useRef } from "react";
import "./styles.css";
import Lottie from "./lottie";
import animationData from "./animation.json";
export default function App() {
  // 初始化ref
  const lottieRef = useRef(null);
  return (
    <div className="App">
      {/* 指定路徑 */}
      <div className="container">
        <button
          onClick={() => {
            if (!lottieRef.current) {
              return;
            }
            // 暫停動(dòng)畫
            lottieRef.current.pause();
          }}
        >
          暫停
        </button>
        <button
          onClick={() => {
            if (!lottieRef.current) {
              return;
            }
            // 從當(dāng)前狀態(tài)繼續(xù)向前播放
            lottieRef.current.play();
          }}
        >
          播放
        </button>
        <button
          onClick={() => {
            if (!lottieRef.current) {
              return;
            }
            // 停止動(dòng)畫，恢復(fù)到初始狀態(tài)，注意與pause()方法的區(qū)別
            lottieRef.current.stop();
          }}
        >
          停止
        </button>
        <Lottie ref={lottieRef} path="https://assets10.lottiefiles.com/packages/lf20_l3qxn9jy.json"></Lottie>
      </div>
      {/* 指定animationData */}
      <div className="container">
        <Lottie animationData={animationData}></Lottie>
      </div>
    </div>
  );
}

codesandbox地址：codesandbox.io/s/funny-res…

效果圖：

結(jié)語(yǔ)

以上就是Lottie動(dòng)畫前端開發(fā)使用技巧的詳細(xì)內(nèi)容，更多關(guān)于前端開發(fā)Lottie動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論