如何将 Lottie Interactivity 与 Svelte 集成

Question

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

当您深入研究他们的 docs 时，他们提供了 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>

如何将 Lottie Interactivity 与 Svelte 集成

How to integrate Lottie Interactivity with Svelte

svelte

lottie