search

svga / SVGAPlayer-Web

Similar to Lottie. Render After Effects / Animate CC (Flash) animations natively on Android and iOS, Web. 使用 SVGAPlayer 在 Android、iOS、Web中播放 After Effects / Animate CC (Flash) 动画。
https://svga.io
Apache License 2.0
954 stars 239 forks source link

设置viewport后canvas尺寸自适应 #47

Open obvious89 opened 5 years ago

obvious89 commented 5 years ago

设计师一般按照iphone6的尺寸（750x1334）制作动画，移动端使用viewport调整缩放比后，videoSize默认是大于容器的size（假定在iphone6展示一个全屏动画375x667 ），然后会导致动画区域缩放（不能填充容器）,现在的解决方案是使用translate缩放，希望可以在player.js内部自适应一下viewport

PonyCui commented 5 years ago

不是很明白你说的意思，可以贴图说明问题吗？

obvious89 commented 5 years ago

你好，下面是我的截图和问题描述： 我导出的动画是750x1334的，如果在iphone7全屏播放，设置容器宽高等于屏幕，默认是以下效果

problem

我只能将容器尺寸设为750x1334，然后再用css3缩放，这样动画区域刚好等于容器区域是正常的

success

我看了下canvas/player.js代码，找到这一步。在设置viewport后，JS获取宽高clientWidth、clientHeight是缩放后的，按照我的设置就是(375x667)，这样就会走到下面的动画缩放逻辑，不知道我描述清楚了没

reason

PonyCui commented 5 years ago

已经明白你说的问题了，我看一下能不能在本地重现问题。

PonyCui commented 5 years ago

可以把存在问题的 Demo 打包发送到 help@svga.io 吗？包括解决问题前的，和解决问题后的。这样，我们可以快速定位到问题在哪里。

obvious89 commented 5 years ago

可以把存在问题的 Demo 打包发送到 help@svga.io 吗？包括解决问题前的，和解决问题后的。这样，我们可以快速定位到问题在哪里。

邮件已发送，后面找出是demo里的代码问题

obvious89 commented 5 years ago

想问一个别的问题，SVGA导出视频这块有什么推荐的方案吗？

zhang0224 commented 5 years ago

对的 是有这么回事 已经遇到了