Lottie动画前端开发使用技巧

2024-10-02 08:01:25

一、为什么会有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>
      {/* 指定animationData */}
      <div className="container">
        <Lottie animationData={animationData}></Lottie>
      </div>
    </div>
  );
}

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

效果图：

结语

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

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

Lottie是Airbnb开源的一个面向iOS.Android.React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动画,完美实现炫酷的动画效果. 使用流程上,Lottie动画需要先使用Adobe After Effects做出原动画,然后再使用官方提供的Bodymovin插件把动画导出成Json文件,而这个Json文件就是Lottie需要解析的动画源文件. 在React Native项目中使用Lottie动画,需
Android Lottie实现中秋月饼变明月动画特效实例

目录前言 Lottie 案例尝试 1. 集成依赖 2. 添加 LottieAnimationView 加载网络资源 3. 加载本地资源 4. 循环播放 & 动画监听 5. 暂停 & 继续 & 取消小扩展 1. 硬件加速器 2. json 文件解析总结前言小菜在 Android 端进行动画处理时主要用的是 Android 自带的三种动画形式,今天小菜简单尝试通过 Airbnb Lottie 展示一个中秋月饼变明月的小动画: Lottie Lottie 动画是 Airbnb
Android 第三方库lottie、mmkv的使用详解

Android端使用方法首先,需要在当前项目的build.gradle下添加依赖代码: implementation 'com.airbnb.android:lottie:2.8.0' 其次,Lottie默认读取Assets中的文件,我们需要把设计导出的动画文件.json 保存在app/src/main/assets文件里.若没有assets文件,则新建一个如下图: 在assets添加images文件夹,并将json中需要用的的图片放入其中,注意,图片名要于json中保持一直. 最后,在布局x
Android使用lottie加载json动画的示例代码

Lottie Lottie是 Airbnb 开源的一个动画项目,它支持 iOS, mac OS Android RN,由于某些复杂动画的实现,往往会写很多的 code 来实现它,而且调试动画的效果会比较花费时间.用它来解决某些动画会带来很大的便利. 设计师在After Effects设计好相关的动画,然后安装上BodyMovin这个插件,这个插件,可以帮导出动画效果的 JSON 文件,然后我们可以通过 Lottie 来加载相关的 JSON 文件来实现动画效果. 优势开发可以方便的实现动画,节约
如何在vue里添加好看的lottie动画

引入lottie库 ( >.< ) 在vue中引入lottie非常非常简单 1.安装vue-lottie包 npm install --save vue-lottie 2.全局引入vue-lottie 在main.js引入并注册全局组件即可 import lottie from 'vue-lottie'; Vue.component('lottie', lottie) 当然你也可以局部引入 ~ o ~ 3.引入你的lottie资源在文中顶部lottie资源网站可以下载相应的资源,下载下来的文
Javascript动画插件lottie-web的使用方法

lottie可以将一个json数据渲染成一个动画,而且支持多平台,在不同的平台下使用同一个json文件即可实现相同的效果,非常的方便.这里介绍前端的使用方法.https://github.com/airbnb/lottie-web 1.配合vue-cli使用 1.npm安装lottie-web npm install lottie-web 2.创建loading.vue2.1引入lottie插件和需要的json数据2.2接收父组件传入的配置参数2.3在页面渲染完毕后进行初始化 <template
Lottie动画前端开发使用技巧

目录一.为什么会有Lottie动画呢? 二.Lottie介绍三.Lottie常见属性和方法四.封装Lottie - React Hooks版五.Lottie组件的引入与调用结语一.为什么会有Lottie动画呢? 在前端程序员根据UI视觉稿实现页面效果时一直存在这样的一种“矛盾” - 动画效果更完美与工期成本的矛盾.一般来说,页面中包含的动画效果越复杂,前端程序员在实现时需要的工期成本越大,尤其是在官网.大促活动.活动拉新等包含巨多动画效果的场景中,动画实现需要的时间占据了大部分工期时
jQuery前端开发35个小技巧

废话不说直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu
JavaScript前端开发时数值运算的小技巧

1.格式化金钱值 const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整代替正数的Math.floor(),代替负数的Math.ceil() const num1 = ~~ 1.69; const num2 = 1.6
20170918 前端开发周报之JS前端开发必看

1.用函数式编程对JavaScript进行断舍离当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! http://www.jb51.net/article/123958.htm 2.JavaScript作用域和闭包作用域和闭包在JavaScript里非常重要.但是在我最初学习JavaScript的时候,却很难理解.这篇文章会用一些例子帮你理解它们.我们先从作用域开始.作用域 JavaScript的作用域限定了你可以访问哪些变
Bootstrap前端开发案例一

现在很多公司开发中都在使用bootstrap这个框架,bootstrap是Twitter公司的一个团队的作品,大大简化了我们的前端的开发.(后面会总结一些less的使用) 学习使用API我建议直接查看官网的API,地址:http://www.bootcss.com/ 下面是部分目标效果图: 下面我就总结一个小Demo中的技巧和原理: 第一步.http://www.bootcss.com/下载bootstrap的压缩包,新建index.html,使用sublime或其它编辑器打开index页面,解
购物车前端开发（jQuery和bootstrap3）

作为一名不在软件公司工作的软件工程师,不仅要会写后台代码(PHP/JAVA/SQL...),还是兼顾前端工程师的工作(html/javascript/css...).下面就来分享一个在实际工作项目中使用到的购物车的前端开发. 这里分享的仅仅是针对购物车的操作(产品数量的增加减少,删除购物车中产品项),假设购物车中已经放有若干产品.闲话少说,先上两张效果图. HTML代码如下:这里使用到了JQuery1.11和bootstrap3 . <!DOCTYPE html> <html> &
Vue前端开发规范整理(推荐)

基于Vue官方风格指南整理一.强制 1. 组件名为多个单词组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi
使用eslint和githooks统一前端风格的技巧

前端团队开发时,是必须要有一个统一的前端规范的,用一套统一的规范来规范开发者,可以有效的避免在提交和拉取代码时造成的代码错乱问题,这边文章主要讲下我们团队的代码规范使用,eslint结合vscode保存时自动修复不规范代码,githooks提交代码时的eslint校验和信息规范. 添加eslint vue-cli3构建一个新项目(包含eslint模块),完成后添加 .eslintrc.js 配置如下: module.exports = { root: true, parserOptions: {
前端开发工具nvim来代替VSCode安装配置

目录 1. Neovim是什么 2. 我们为什么需要Neovim 3. 如何配置Neovim 3.1 安装第三方终端 3.2 安装neoviem 3.3 快速启动neovim 3.4 创建neovim配置文件 3.5 配置字体 4. 终端模拟器之选 4.1 iterm2 4.2 alacrittty 4.3 kitty 4.4 Neovide 1. Neovim是什么在此之前,我一直都是使用VSCODE或者WEB STORM编辑器的. 他们确实好用方便. 直到我得了腱鞘炎之后. 不得不寻求减少