使用 react-bodymovin 循环动画片段时访问方法
Accessing methods when using react-bodymovin to loop animation segments
我正在使用 react-bodymovin 包 (https://www.npmjs.com/package/react-bodymovin) 嵌入 Bodymovin 动画,但我想在动画播放完一次后循环播放一段动画。
我可以看到使用 HTML 版本的 Bodymovin 很简单,因为您只需使用相关方法即可,例如,(假设 div 的 ID bodymovin
:
const params = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData: animationData,
}
const anim = bodymovin.loadAnimation(params)
anim.playSegments([[0, 65]], true)
但是,我不确定在使用 React 组件时如何访问这些相同的方法。
这是我的组件:
import React from 'react'
import ReactBodymovin from 'react-bodymovin'
import animation from './animation.json'
const App = () => {
const bodymovinOptions = {
loop: true,
autoplay: true,
prerender: true,
animationData: animation
}
return (
<div>
<ReactBodymovin options={bodymovinOptions} />
</div>
)
}
我有一种感觉,由于这个 React 包装器与 Bodymovin 一起工作的方式的性质,可能无法访问文件中的方法,但如果有人知道这样做的方法,我很乐意听到它。谢谢
为什么不试试 react-lottie 包呢?它的 npm-downloads 比 react-bodymovin
多得多,你可以实现你想要的并像这样播放片段:
import React from 'react'
import animation from './animation.json'
import Lottie from 'react-lottie';
const App = () => {
const options= {
loop: true,
autoplay: true,
prerender: true,
animationData: animation
}
return (
<div>
<Lottie options={options} segments={[0, 65]} />
</div>
)
}
但是,对于这两个包,您无法完全控制 lottie
对象,因此无法手动调用 loadAnimation
或 loadSegments
等方法。但是,您可以像在正常 javascript 中那样使用 lottie-web 包,正如您所展示的那样。这是一个示例,您应该如何使用钩子进行反应:
import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";
import animation from "./animation.json";
const App = () => {
const animContainer = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
const anim = lottie.loadAnimation({
container: animContainer.current,
renderer: "svg",
loop: true,
autoplay: true,
animationData: animation
});
anim.playSegments([[0, 65]], true);
}
});
return <div ref={animContainer}></div>;
}
我正在使用 react-bodymovin 包 (https://www.npmjs.com/package/react-bodymovin) 嵌入 Bodymovin 动画,但我想在动画播放完一次后循环播放一段动画。
我可以看到使用 HTML 版本的 Bodymovin 很简单,因为您只需使用相关方法即可,例如,(假设 div 的 ID bodymovin
:
const params = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData: animationData,
}
const anim = bodymovin.loadAnimation(params)
anim.playSegments([[0, 65]], true)
但是,我不确定在使用 React 组件时如何访问这些相同的方法。 这是我的组件:
import React from 'react'
import ReactBodymovin from 'react-bodymovin'
import animation from './animation.json'
const App = () => {
const bodymovinOptions = {
loop: true,
autoplay: true,
prerender: true,
animationData: animation
}
return (
<div>
<ReactBodymovin options={bodymovinOptions} />
</div>
)
}
我有一种感觉,由于这个 React 包装器与 Bodymovin 一起工作的方式的性质,可能无法访问文件中的方法,但如果有人知道这样做的方法,我很乐意听到它。谢谢
为什么不试试 react-lottie 包呢?它的 npm-downloads 比 react-bodymovin
多得多,你可以实现你想要的并像这样播放片段:
import React from 'react'
import animation from './animation.json'
import Lottie from 'react-lottie';
const App = () => {
const options= {
loop: true,
autoplay: true,
prerender: true,
animationData: animation
}
return (
<div>
<Lottie options={options} segments={[0, 65]} />
</div>
)
}
但是,对于这两个包,您无法完全控制 lottie
对象,因此无法手动调用 loadAnimation
或 loadSegments
等方法。但是,您可以像在正常 javascript 中那样使用 lottie-web 包,正如您所展示的那样。这是一个示例,您应该如何使用钩子进行反应:
import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";
import animation from "./animation.json";
const App = () => {
const animContainer = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
const anim = lottie.loadAnimation({
container: animContainer.current,
renderer: "svg",
loop: true,
autoplay: true,
animationData: animation
});
anim.playSegments([[0, 65]], true);
}
});
return <div ref={animContainer}></div>;
}