如何将Lottie Interactivity与Svelte集成

Question

我正在尝试将Lottie Interactivity集成到我的Svelte代码中。不幸的是，开箱即用会抛出错误代码。

当你深入研究他们的文档时，他们为React和Vue提供了钩子——但没有Svelte！

我对Svelte还是个新手，所以如果人们能提供如何开始将其集成到Svelte中的指针，我将不胜感激！

(在有人问之前——我说的是乐透互动性，而不是乐透玩家。(

Answer 1

看起来您必须侦听加载事件才能创建动画REPL

<script>
import '@lottiefiles/lottie-player'
import { create } from '@lottiefiles/lottie-interactivity'
function handleLoad(event) {
create({
mode: 'scroll',
player: '#firstLottie',
actions: [
{
visibility: [0, 1],
type: 'seek',
frames: [0, 100],
},
],
});
}
</script>
<div>   
<lottie-player
id="firstLottie"                     
src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json"
style="width:400px; height: 400px;"
on:load={handleLoad}
>
</lottie-player>
</div>
<style>
div {
height: 2000px;
padding-top: 500px;
}
</style>

Answer 2

在第一页呈现期间，它可能会显示

500内部错误

，它可能会在控制台中显示此错误：。

ReferenceError：窗口未定义

要消除此问题，我们需要在onMount方法中导入包。这是REPL

<script>
import { onMount } from 'svelte';
onMount(async()=>{
await import('@lottiefiles/lottie-player')
// @ts-ignore
const {create} = await import('@lottiefiles/lottie-interactivity')
handleLoad(create) 
})
// @ts-ignore
const handleLoad =  (method)=>{
method({
mode: 'scroll',
player: '#firstLottie',
actions: [
{
visibility: [0, 1],
type: 'seek',
frames: [0, 500],
},
],
});
}
</script>
<div> 
<div style="height:400px"></div>  
<lottie-player
id="firstLottie"                     
src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json"
style="width:400px; height: 400px;"
on:load={handleLoad}
>
</lottie-player>
</div>