Lottie 在 iOS 上改变位置。适用于 Windows 和 Android

Question

所以我正在研究这个 Lottie/iframe 组合。由于我刚刚学习javascript，请原谅我乱七八糟的代码。

为了启动 lottie 动画并启动 youtube iframe（自动播放且未静音），我使用了一个堆叠在 Lottie 顶部的按钮以适应动画的空白区域。

这在 Windows 和 Android 浏览器上运行良好。如果在 Safari 中加载（MacOS 和 iOS），lottie 动画会改变位置并且不再与按钮对齐。当动画开始时，lottie 突然移动位置并再次对齐。如果我锁定设备 (iPhone X) 并再次解锁，则 lottie returns 到错误的位置。

此错误仅存在于 iOS Safari/Chrome。遗憾的是，我没有 Mac 可以直接在 Safari 中进行调试。也许有人有想法？

代码可能还有更多问题，但除了所描述的问题外，它似乎工作正常。 youtube iframe 在 codepen 上不可见，因为它们阻止了一些必要的内容。 iframe 的显示在我的网站上按预期工作。

https://codepen.io/peplebe/pen/dyvJQMo

<head>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>  
  
<script>
  window.onload = function(){ 
    var player = document.querySelector("lottie-player");
var play = document.querySelector(".start");
var stop = document.querySelector("#stop");
let ytiframe = document.getElementById('ytiframe');
play.onclick = function () {
    player.play(); 
  ytiframe.classList.toggle('fade');
};

    
};

   


</script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<style>

  
@-webkit-keyframes glowings {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowings {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowings {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowings {
  0% { background-color: #ffd300; box-shadow: 0 0 3px #ffde00; }
  50% { background-color: #ffd300; box-shadow: 0 0 40px #ffde00; }
  100% { background-color: #ffd300; box-shadow: 0 0 3px #ffde00; }
}

.btn-glow {
  -webkit-animation: glowings 1500ms infinite;
  -moz-animation: glowings 1500ms infinite;
  -o-animation: glowings 1500ms infinite;
  animation: glowings 1500ms infinite;
  color: rgb(163,5,0);
  position: absolute;
  bottom: 233px;
  left: 157px;
  width: 130px;
  height: 60px;
  transform: rotate(-0.5deg);
  background-color: rgba(208,207,207,0.72);
  border: 0px;
  font-weight: bold;
  z-index: 199!important;
}
.btn-glow:hover {
  -webkit-animation: glowings 0ms infinite;
  -moz-animation: glowings 0ms infinite;
  -o-animation: glowings 0ms infinite;
  animation: glowings 0ms infinite;
  }
#ytiframe {
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
  opacity: 0;  
  width: 250px;
  float: none;
  margin: 0 auto;}
#ytiframe.fade {
  opacity:.5;
}
  .jukeboxcode{
    position: relative;
    bottom: -10px;
  }
</style>



<body data-rsssl=1>

<div class="jukeboxcode" style="height: 800px; width: 400px; background-color: rgba(25,254,1,0.14); ">

  <button id="fadebutton" class="start play btn-glow">INSERT COIN</button>



<div id="ytiframe" class="video" >
    <iframe width="560" height="315" src="https://www.youtube.com/embed/MV_3Dpw-BRY?enablejsapi=1&playsinline=1"  frameborder="0" playsinline="1" allow="autoplay" ></iframe>
</div>
  

<script>
(function() {
    var player;
    window.onYouTubeIframeAPIReady = function() {
        new YT.Player(document.querySelector('.video iframe'), {
            events: {
                onReady: function(e) {
                    player = e.target
                }
            }
        })
    }

    document.querySelector('.jukeboxcode .play').addEventListener('click', function(e) {
        e.preventDefault()
        player.playVideo()
    })
})()
</script>


<lottie-player src="https://assets7.lottiefiles.com/packages/lf20_yc3xb5l6.json"  background="transparent"  speed="1"  style="z-index: 188; width: 400px; height: 550px;" ></lottie-player>



</div>
</body>

此致。

PS：我还想让 youtube 播放器停止播放，并在单击按钮时重置 lottie 动画。如果有人知道如何这样做，我们将不胜感激。

Answer 1

最终解决方案是将 lottie 渲染为 canvas 而不是 svg。这修复了错误。仍然不确定是什么原因造成的。

<lottie-player src="..."  background="transparent"  speed="1" renderer: 'canvas', style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

Lottie 在 iOS 上改变位置。适用于 Windows 和 Android

Lottie shifts position on iOS. Works fine on Windows & Android

javascript

html

ios

youtube-iframe-api

lottie