Lottie 在 iOS 上调换位置。在 Windows 和 Android 上运行良好
Posted
技术标签:
【中文标题】Lottie 在 iOS 上调换位置。在 Windows 和 Android 上运行良好【英文标题】：Lottie shifts position on iOS. Works fine on Windows & Android 【发布时间】：2021-09-07 11:32:22 【问题描述】：所以我有我正在研究的这个 Lottie/iframe 组合。 由于我只是学习javascript，请原谅我乱七八糟的代码。
为了启动 lottie 动画并启动 youtube iframe（自动播放和取消静音），我使用了一个堆叠在 Lottie 顶部的按钮以适应动画的空白区域。
这在 Windows 和 android 浏览器上运行良好。 如果在 Safari（MacOS 和 ios）中加载，lottie 动画会改变位置并且不再与按钮对齐。当动画开始时，lottie 突然移动位置并再次对齐。如果我锁定设备（iPhone X）并再次解锁，彩票会返回错误的位置。
此错误仅存在于 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 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 播放器停止播放，以及在按钮单击时重置抽奖动画。如果有人对此有任何想法，我们将不胜感激。
【问题讨论】：
【参考方案1】：最终的解决方案是将 lottie 渲染为画布而不是 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 AnimationView 在 iOS 中不工作，但在 Android c# 实现中工作
使用 lottie-react-native (2.6.1) 时，React native expo 应用程序在 android 上崩溃，但适用于 ios