如何将 Lottie Interactivity 与 Svelte 集成

Question

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

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

我对 Svelte 还比较陌生，所以如果人们甚至可以提供有关如何开始将其集成到 Svelte 中的指示，我将不胜感激！

（在有人问之前，我说的是 Lottie Interactivity，而不是 Lottie Player。）

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
内部错误

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

参考错误：窗口未定义

为了消除这个问题，我们需要在 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>