Lottie动画前端开发使用技巧

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

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

效果图:

结语

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

时间: 2022-06-21

如何在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资源网站可以下载相应的资源,下载下来的文

Android使用lottie加载json动画的示例代码

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

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实现中秋月饼变明月动画特效实例

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

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

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

详解动画插件wow.js的使用方法

本文介绍了动画插件wow.js的使用方法 ,具体如下,分享给大家 1,下载文件 animate.css 下载地址: http://daneden.github.io/animate.css/ wow.min.js 下载地址:  http://www.downyi.com/downinfo/37040.html#address 2,引入文件 <link rel="stylesheet" href="css/animate.css" rel="exter

JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】

本文实例讲述了JavaScript实现写入文件到本地的方法.分享给大家供大家参考,具体如下: 工作中有时需要通过 JavaScript 保存文件到本地,我们都知道 JavaScript 基于安全的考虑,是不允许直接操作本地文件的. IE 可以通过 VB 插件的方式进行,而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件,所以 VB 插件的方式存在兼容性问题. 那有没有适合的方法呢?答案是肯定的,我们可以通过 FileSaver.js 这个小插件实现我们的需求.下

JavaScript实现与web通信的方法详解

web通信,一个特别大的topic,涉及面也是很广的.因最近学习了 javascript 中一些 web 通信知识,在这里总结下.文中应该会有理解错误或者表述不清晰的地方,还望斧正! 一.前言 1. comet技术 浏览器作为 Web 应用的前台,自身的处理功能比较有限.浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广.在 Web 应用中,浏览器的主要工作是发送请求.解析服务器返回的信息以不同的风格显示.AJAX 是浏览器技术发展的成果,

javascript检测flash插件是否被禁用的方法

本文实例讲述了javascript检测flash插件是否被禁用的方法.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author

JavaScript实现动画打开半透明提示层的方法

本文实例讲述了JavaScript实现动画打开半透明提示层的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

深入探究使JavaScript动画流畅的一些方法

基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javascript的DOM动画库,如Velocity.js和GSAP,看其是如何比jQuery和CSS动画效果更具性能的. jQuery 让我们先从基础的开始: JavaScript 和 jQuery 被错误的混为一谈了. JavaScript 动画是很快的. jQuery 把它放慢了下来.为什么?因为 -

Javascript动画效果(1)

前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动.链式运动.同时运动,同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较. 1.简单的匀速运动 下面我们介绍一个demo,鼠标移入,动画向右移动(即隐藏部分显示):鼠标离开,动画向左运动(继续隐藏)整个过程都是匀速的.有了前面回到顶部效果作为基础,这

AngularJS 实现JavaScript 动画效果详解

AngularJS 应用中实现 JavaScript 动画效果 AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 我们能够在应用的部分内容当中使用动画来表明一些变化正在发生.在我上一篇文章当中,我讲到了在Angular应用中对CSS动画的支持.在这篇文章当中,我们会看到怎样利用JavaScript脚本在AngularJS应用当中生成动画效果. 在Angular当中,CSS和JavaScr

Javascript动画效果(3)

前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的动画效果进行进一步扩充,尽量将我们的框架做到更实用.在这里我们还需要了解两个运动,一个是链式运动,一个是同时运动.它们间的区别分别是:链式运动是指运动一个接着一个(一个运动完成马上进行下一个运动):而同时运动是指所有的运动同时进行.在这里,我们该如何实现呢? 1.链式运动 前面的效果中,我们已经能对任意值进行相应的变化,我们该如何在一

jQuery循环动画与获取组件尺寸的方法

本文实例讲述了jQuery循环动画与获取组件尺寸的方法.分享给大家供大家参考.具体分析如下: 一.前言 1.jQuery中的animate()方法允许您创建自定义的动画. animate() 方法几乎可以操作所有 CSS 属性,不过当使用 animate() 时,必须使用Camel标记法书写所有的属性名,比如,必须使用paddingLeft而不是padding-left,使用marginRight而不是margin-right,等等.同时,色彩动画并不包含在核心 jQuery 库中.如果需要生成