我已經在npm安裝@lottiefiles/lottie-interactivity與@lottiefiles/lottie-player
但不管用HTML或是自訂元件崁入lottie動畫,
都沒有辦法控制lottie隨著滾輪播放動畫
以下是目前的代碼
import "@lottiefiles/lottie-player";
import { LottieInteractivity } from '@lottiefiles/lottie-interactivity';
$w.onReady(function () {
LottieInteractivity.create({
mode: 'scroll',
player: "#firstLottie",
actions: [{
visibility: [0, 1],
type: 'seek',
frames: [0, 72],
}, ],
});
});
不好意思,未能找到相關的教學。至於為何lottie-interactive npm未能使用,可能是基於以下原因:
一些npm package包含與 DOM 交互的功能。在 Velo (Wix Code)中,您只能使用 $w API 與頁面元素溝通,而不是直接與 DOM 交互,因此這些package中的語法,某些功能將不能起作用。
另外, 請查看這裏使用有關設定Custom Element, 查看能否使用語法設定Scrolling的效果, 或參考這裏以嵌入方式設定其他Lottiefiles SVG的互動效果 #Lottiefiles
#animatedSVG