我遇到了缩放 Lottie 动画的问题，Chrome 模糊了动画。当动画缩放时，这一点尤其明显。
在我的示例中，原始动画的尺寸为 842x596px，渲染效果越小，效果越差：
如果您想在 Chrome 浏览器中重现它，这里是示例代码：
lottie-player {
border: 1px solid lightblue;
}
body {
color: lightgray;
}
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<!--
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
300x300px
-->
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 200px; height: 200px;" loop autoplay></lottie-player>
200x200px
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 150px; height: 150px;" loop autoplay></lottie-player>
150x150px
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
100x100px
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 50px; height: 50px;" loop autoplay></lottie-player>
50x50px
似乎已经有其他问题有类似的问题，但没有提供进一步的信息或没有提供有效的解决方案：
- Lottie 动画仅在 Chrome 上模糊 https://stackoverflow.com/q/72346608/3001970
- Chrome 上的 CSS 动画内容模糊 https://stackoverflow.com/questions/59609887
- 使用 CSS 变换后文本模糊：scale();在 Chrome 中 https://stackoverflow.com/questions/14677490
该问题是由 Lottie 动画内的 SVG 上的以下样式标签引起的：
transform: translate3d(0px, 0px, 0px);
最简单的解决方案是通过 JS 删除此标签：
document.addEventListener("DOMContentLoaded", function(){
let elements = document.getElementsByTagName('lottie-player');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('play', (event) => {
// console.log(event.target.shadowRoot.querySelector('svg').style.transform);
event.target.shadowRoot.querySelector('svg').style.transform = '';
});
elements[i].play(); // trigger (again)
}
});
document.addEventListener("DOMContentLoaded", function(){
let elements = document.getElementsByTagName('lottie-player');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('play', (event) => {
// console.log(event.target.shadowRoot.querySelector('svg').style.transform);
event.target.shadowRoot.querySelector('svg').style.transform = '';
});
}
});
lottie-player {
border: 1px solid lightblue;
}
body {
color: lightgray;
}
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<!--
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
300x300px
-->
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 200px; height: 200px;" loop autoplay></lottie-player>
200x200px
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 150px; height: 150px;" loop autoplay></lottie-player>
150x150px
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
100x100px
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_srq2xawa.json" background="transparent" speed="1" style="width: 50px; height: 50px;" loop autoplay></lottie-player>
50x50px
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
