首页 > 资讯 > 前端开发 > JavaScript >Lottie动画前端开发使用技巧

369

分享到

Lottie动画前端开发使用技巧

2024-04-02 19:04:59 369人浏览泡泡鱼

摘要

目录一、为什么会有Lottie动画呢？二、Lottie介绍三、Lottie常见属性和方法四、封装Lottie - React Hooks版五、Lottie组件的引入与调用结语一、为什

一、为什么会有Lottie动画呢？

在前端 程序员根据UI视觉稿实现页面效果时一直存在这样的一种“矛盾” - 动画效果更完美与工期成本的矛盾。一般来说，页面中包含的动画效果越复杂，前端程序员在实现时需要的工期成本越大，尤其是在官网、大促活动、活动拉新等包含巨多动画效果的场景中，动画实现需要的时间占据了大部分工期时间，而工期往往是非常紧凑的。同时后期还经常伴随着与UI设计师的反复“拉扯” - 动画方向要改变下，运动的路径曲线要再调整下，这个圆角值不太圆，这个图片辛苦再替换下。诸如此类，都是让程序员脑袋变秃的罪魁祸首之一!

在反复的拉扯“折磨”中，有一批程序员就在不停的思索，将动画的设计实现与使用进行物理分割，让专业的人做更专业的事儿！

产出某种物料：让对色彩、交互更专业的UI同学完成动画的设计、实现、优化，产出一种可供识别的物料；
以某种形式直接识别、使用物料：前端研发通过某种形式直接识别该物料，调用后页面直接渲染动画，无须再配置路径动画、描边动画等；

基于这样的思考与探索，Lottie动画应运而生！

二、Lottie介绍

Lottie是一款由airbnb开源的跨平台动画渲染库，支持Android, iOS, WEB, windows平台。是专门用于解析从AE(Adobe After Effects)中通过Bodymovin插件导出的JSON文件，直接渲染动画。

Lottie官网的传送门在此点我你将见证神奇

本文的重点在于如何使用导出的jsON文件，在AE中如何开发动画以及插件Bodymovin的使用欢迎查阅其他相关资料~

一图胜千言 ~代码片段

该示例代码如下：

<!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>
    <!-- 重点：引入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>
    <!-- 定义动画渲染的容器 -->
    <div id="app"></div>
  </body>
  <script>
    // loadAnimation 渲染动画
    const lottieAnimationItem = lottie.loadAnimation({
      // 选取一个容器，用于渲染动画
      container: document.querySelector("#app"),
      // 定义JSON文件路径
      path: "https://assets10.lottiefiles.com/packages/lf20_l3qxn9jy.json",
      // 是否循环播放
      loop: true,
      // 渲染的格式svg/canvas/html，svg性能更优，兼容性更好
      renderer: "svg",
    });
  </script>
</html>

开发人员进行简单的配置，引入Lottie，加载相应的JSON文件，动画就实现了！简不简单，神不神奇！

专业的人做专业的事儿，后期即使UI设计MM又多动画做出了调整，做为开发的你唯一需要做的就是将文件替换一下即可！是不是又可以挽救几根头发了~

Lottie Files是一个专门针对Lottie动画设计、分享的网站。你可以在这个网站上上传自己制作的lottie动画，也可以浏览其他设计师上传的lottie动画，也可以快速体验，方便而有趣。

三、Lottie常见属性和方法

loadAnimation参数配置

属性名	描述
container	渲染动画所需容器
renderer	动画渲染类型，svg/canvas/html
loop	是否循环播放，布尔值
autoplay	是否自动播放，布尔值
path	一个指定的JSON文件路径，注意这里会发起一个http请求json文件
animationData	JSON动画数据，与path属性不共存

TIPS: 当设置path属性的时候，并不是简单的一个相对路径或者是绝对路径引入，而是lottie会发送一个http请求，访问这个json文件。如果是在Vue/react项目中要注意最终的打包访问路径。

考虑页面性能更优，建议使用svg渲染方式，通过path加载远程JSON文件，使用animationData会让json文件打包到JS中，

loadAnimation方法返回的对象

属性名	类型	描述
play	() => void	播放动画
pause	() => void	暂停动画
stop	() => void	停止动画
play	() => void	播放动画
setSpeed	(number) => void	设置播放速度
destroy	() => void	销毁动画

四、封装Lottie - React Hooks版

为了在项目中能够快速复用，将Lottie动画渲染简易封装成react组件Lottie。

安装依赖

# lottie-web是针对web渲染的库
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 {
  // 是否循环播放
  loop?: boolean;
  // 渲染动画的类型
  renderer?: rendererType;
  // 是否自动播放
  autoplay?: boolean;
  // 动画渲染数据，与path互斥
  animationData?: any;
  // JSON文件路径，与animationData互斥
  path?: string;
}
export default forwardRef((props: IProps, ref: Ref<any>) => {
  // 设置props的默认值
  const { loop = true, renderer = 'svg', path = '', animationData, autoplay = true } = props;
  // 设置动画渲染的容器
  const containerEle = useRef(null);
  // 对外暴露的ref对象
  const lottieAnimation = useRef(null);
  // 指定想父级调用组件暴露的ref对象，方便元素控制当前动画的播放与暂停
  useImperativeHandle(ref, () => ({
    // 获取当前动画对象实例
    getInstance: () => lottieAnimation.current,
    // 播放，继续播放
    play: () => {
      lottieAnimation.current.play();
    },
    // 暂停动画
    pause: () => {
      lottieAnimation.current.pause();
    },
    // 停止动画，区别于暂停动画pause()
    stop: () => {
      lottieAnimation.current.stop();
    }
  }));
  // 缓存动画的相关配置
  const animationOptions = useMemo(() => {
    const options: IProps = {
      loop,
      renderer,
      autoplay
    };
    // 优先取animationData
    if (animationData) {
      options.animationData = animationData;
    } else {
      options.path = path;
    }
    return options;
  }, [loop, renderer, path, animationData, autoplay]);
  useEffect(() => {
    if (!containerEle.current) {
      return;
    }
    // 渲染动画
    const lottieAnimationItem: AnimationItem = lottie.loadAnimation({
      container: containerEle.current,
      ...animationOptions
    });
    // 将渲染后的动画示例对象赋值给lottieAnimation.current，对外暴露
    lottieAnimation.current = lottieAnimationItem;
    // 一定要注意这里的对象销毁，避免内存泄露，以及重复渲染动画
    return () => {
      // 重置为null
      lottieAnimation.current = null;
      // 销毁动画对象
      lottieAnimationItem.destroy();
    };
  }, [animationOptions]);
  // 因为lottie动画是无线宽高的，所以这里直接设置渲染的容器宽度、高度为父级元素100%即可
  return <div ref={containerEle} style={{ width: '100%', height: '100%' }}></div>;
});

五、Lottie组件的引入与调用

指定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;
            }
            // 暂停动画
            lottieRef.current.pause();
          }}
        >
          暂停
        </button>
        <button
          onClick={() => {
            if (!lottieRef.current) {
              return;
            }
            // 从当前状态继续向前播放
            lottieRef.current.play();
          }}
        >
          播放
        </button>
        <button
          onClick={() => {
            if (!lottieRef.current) {
              return;
            }
            // 停止动画，恢复到初始状态，注意与pause()方法的区别
            lottieRef.current.stop();
          }}
        >
          停止
        </button>
        <Lottie ref={lottieRef} path="https://assets10.lottiefiles.com/packages/lf20_l3qxn9jy.json"></Lottie>
      </div>
      {}
      <div className="container">
        <Lottie animationData={animationData}></Lottie>
      </div>
    </div>
  );
}

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

效果图：

结语

以上就是Lottie动画前端开发使用技巧的详细内容，更多关于前端开发Lottie动画的资料请关注编程网其它相关文章！

--结束END--

本文标题: Lottie动画前端开发使用技巧

本文链接: https://lsjlt.com/news/152293.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

Lottie动画前端开发使用技巧

目录

一、为什么会有Lottie动画呢？

二、Lottie介绍

三、Lottie常见属性和方法

四、封装Lottie - React Hooks版

五、Lottie组件的引入与调用

结语

Lottie动画前端开发使用技巧

Lottie动画前端开发使用技巧实例分析

前端开发中11个JS使用技巧

有哪些实用的前端开发技巧

前端开发中常用技巧有哪些

Web前端开发小技巧有哪些

前端开发有哪些Sublime Text应用技巧

如何快速掌握前端开发技巧

Go语言前端开发技巧大揭秘

C#开发经验分享：前端与后端协同开发技巧

前端开发常用CSS动画代码有哪些

Javascript动画插件lottie-web的使用方法

Web前端开发的JavaScript小技巧有哪些

前端开发实用且少见的技巧有哪些

React Native项目中使用Lottie动画的方法

前端开发必知的jQuery小技巧有哪些

移动前端开发和Web前端开发的区别

13 个实用CSS技巧，助你提升前端开发效率！

提升前端开发效率的CSS技巧有哪些

优化网站性能的前端开发必备技巧

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

写给小白学习的地理信息的表示法GeoJSON

vue使用Swiper踩坑解决避坑

JavaScrip简单数据类型隐式转换的实现

细说JS数组遍历的一些细节及实现

初学者如何快速搭建Express开发系统步骤详解

深入浅出JavaScript前端中的设计模式