Javascript：在視口中啟動 Lottie animation

Question

我有簡單的 Javascript 代碼，我正在嘗試制作一個腳本，其中 Lottie animation 可以在視口中啟動。

現在，這行不通。

在視口中時如何啟動 Lottie animation 有什么解決方案嗎？

Lottie animation 的 ID為 jancovic ，該元素何時出現在視口中 Lottie animation 可能會啟動。

如果語句不可更改，則一切都已完成，這不是我需要更改的更改，只有當語句可能時才需要更改。

 var jancovic = document.getElementById('jancovic'); var boundingJancovic = jancovic.getBoundingClientRect(); window.onscroll = function() { if (boundingJancovic.top >= 0 && boundingJancovic.left >= 0 && boundingJancovic.right <= window.innerWidth && boundingJancovic.bottom <= window.innerHeight) { var svgContainerJancovic = document.getElementById('jancovic'); var animItemJancovic = bodymovin.loadAnimation({ wrapper: svgContainerJancovic, animType: 'svg', loop: false, path: '/assets/anim/graphs/data.json' }); } }

Answer 1

我只是在尋找同樣的東西。 花了我 30 分鍾以上
（和咖啡）讓這個工作，所以我希望這對任何人都有幫助

<script>
// kickstat the animation - mine is a div with the id of "headerAnimation"
// which sits inside a div with an id of "header"
var headerAnimation = lottie.loadAnimation({
    container: document.getElementById("headerAnimation"), // the dom element that will contain the animation
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "SOME_PATH_TO_FILE" // the path to the animation json
});


// "listen" & check when header is out of viewport 
// (i set 50% = visible => threshold: 0.5 (to set))
const headerViewport = function() {
    let options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5
    }

    let observer = new IntersectionObserver(function(entries, observer) {
        entries[0].isIntersecting === true ? headerAnimation.play() : headerAnimation.goToAndStop(0, 0);
    }, options);

    observer.observe(document.querySelector('#header'));
}

// on window load
window.onload = function() {
    headerViewport();
}
</script>

順便提一句
據我所知，它的“lottie.loadAnination”而不是bodymovin
我認為，這是寫它的舊方式。