Lottie:让动画真的”动”起来(二)

在lottie中动态更新文案、处理点击、回调事件


使用案例:

上一篇讲了 lottie 的一些基本使用,需要的同学可以查看自行查看链接,下面我们来讲一下 lottie 的一些进阶使用,首先看一些使用案列:

著名的拼多多无限套娃动画:

pdd.gif

支付宝中的锦鲤动画:

jinli.png

可以看到目前的复杂动画如果用 lottie 来实现的话可以说是非常提效的,基本引入一个动画 json 就可以解决问题,虽然设计可能要多花一点点时间,但对于我们研发来说不用在频繁的调试 css 动画,改了又改最后可能还不满意,兼容性还很好,而且很多大厂也都有很成熟的 lottie 的实践,这还在等什么呢,赶紧用起来。

动态更新

说完简单的使用,我们来看一下实际项目中的进阶使用:

产品:这个动画里面的价格是接口下发的,不能写死…….

研发:好好好,不就是动态的吗,好说!

上面的场景我们在需求中肯定很常见,那么如何让动画中的文案做到动态更新呢?

这里我们就先要了解一下 lottie 使用的 json 是通过设计软件 AE(Adobe After Effects)输出的,那这里就必须要设计师配置配合我们来输出 json 文件,在 AE 中使用bodymovin插件导出 json 时需要注意不要勾选 Glyphs,最后渲染的动画要使用矢量图才能够做到动态更新

bd1.webp

bd2.webp

此外,将需要更新的文案,让设计师在 AE 中添加源名称和图层名称

ymc.png

tcmc.png

以上准备工作做好之后,还需要下载一个 lottie-api 的 npm 包,更新文案主要靠它来操作

npm i lottie-api

更新文案的 demo

import React, { useEffect } from "react";
import lottie from "lottie";
import LottieAPI from "lottie-api";
import Json from "./data.json";
 
function App() {
	useEffect(() => {
		const animation = lottie.loadAnimation({
			name: "root",
			container: document.querySelector(".root"),
			renderer: "svg",
			loop: false,
			autoplay: true,
			animationData: Json, //json数据
		});
 
		animation.addEventListener("DOMLoaded", function () {
			const animationAPI = LottieAPI.createAnimationApi(animation);
			var layers = animationAPI.getKeyPath("textnode,comp1");
			layers.getElements()[0].setText("xxx");
		});
	}, []);
 
	return <div className='root' />;
}
 
export default App;

上述代码首先进行动画的加载,监听 animation 的 DOMLoaded 事件,保证此时动画处于加载完的状态。然后调用 lottie-api 中的getKeyPath方法将图层名称源名称传入,最后找到相应的元素后进行setText操作即可进行文案更新。

点击事件

动态更新的功能做完之后,产品又开始提需求了

产品:我想要点击某个动画中的按钮的时候可以有 xxx 的交互效果……

研发:行行行,你是产品你说了算

点击的功能其实也很简单,原理跟我们使用 js 点击事件一样,先获取元素,然后监听点击事件就可以了,那怎么可以获取到元素呢,这时候就又需要设计师来帮忙处理了,渲染动画时在图层后面加#xxx,对应的元素渲染出来后就会带 xxx 的 id 属性,这样我们就可以通过 document.getElementById("xxx")来获取元素了。

id.png

以下是点击事件的 demo:

import React, { useEffect } from "react";
import lottie from "lottie";
import Json from "./data.json";
 
function App() {
  useEffect(() => {
    const anim = lottie.loadAnimation({
      name: "root",
      container: document.querySelector(".root"),
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: Json, //json数据
    });
 
    anim.addEventListener("DOMLoaded", function () {
      const button = document.getElementById("J_txt");
      //监听元素的点击事件
      button.addEventListener("click", () => {
        console.log("触发了点击事件!!!");
      });
    });
  }, []);
 
  return <div className="root" />;
}
 
export default App;

回调事件

产品:我又来提需求了,整个动画结束之后,需要页面进行 xxx 的操作,这个功能是必须要的……

研发:你事儿可真多,xxxxxx

再经过了一顿输出之后,只在代码中添加了以下改动,就完美的实现了所有需求

import React, { useEffect } from "react";
import Json from "./data.json";
 
function App() {
  useEffect(() => {
    const anim = lottie.loadAnimation({
      name: "root",
      container: document.querySelector(".root"),
      renderer: "svg",
      animationData: Json,
    });
 
    anim.addEventListener("complete", () => {
      console.log("动画结束");
    });
  }, []);
 
  return <div className="root" />;
}
 
export default App;

总结

除了上述讲的点击、完成回调事件等,还有很多的事件都可以进行监听,如:loopComplete(循环播放结束时)、data_ready(动画 json 文件加载完毕)、destroy(动画销毁时)……,详细的大家可以在 lottie 官方进行查阅。

欢迎大家关注我的博客:www.lpeakcc.com