html - 响应式 Bodymovin 动画

Question

如何嵌入 bodymovin 导出的文件以做出响应，同时保持徽标和字体的正确纵横比，并适合我网站的边界？有任何想法吗？

先感谢您

Answer 1

您可以使用渲染器的 preserveAspectRatio 设置。加载动画时将其作为参数传递：

bodymovin.loadAnimation({
  container: element,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'path/to/the/json',
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid meet'
  }
});

我猜你想要的是 preserveAspectRatio: 'xMidYMid slice'