如何在Phonegap（Apache Cordova）中制作卡通动画？

Question

包含简单（约7秒长）的最简单方法是什么 Phonegap应用程序中的卡通？

我尝试了mp4视频，但Android不会通过<video> html5标记播放本地视频文件。然后我尝试使用动画GIF但是我失去了太多的质量而且文件太大了。之后我尝试将所有内容导出到JPG文件并使用javascript切换它们但是它一直在破坏（并且应用程序变得非常庞大 - 对于7秒视频大约7MB）。

另一个问题是不同的分辨率 - 我希望我的卡通在高分辨率和低分辨率设备上具有可接受的质量。

那么有人可以建议如何做到这样的事情吗？

感谢名单！

Answer 1

使用此插件播放mp4视频..应该可以正常工作...
http://simonmacdonald.blogspot.in/2011/11/video-player-plugin-for-phonegap.html

Answer 2

阅读简单卡通动画，我将其理解为可以使用smaller color palette制作的内容。 为此，动画GIF 应可以接受，但使用它自己的problems集。

一篇帖子建议使用sprite sheet of indexed PNGs可以解决GIF计时问题，也可以小于动画GIF。链接看起来像一个2色动画，所以我测试了自己的假设。我使用了170x170动画GIF（216色调;帧间40ms）和101帧来测试229,041字节。

将各个帧提取为单独的（索引颜色）PNG后，文件的总大小为375,242字节。 我使用ImageMagick来提取帧：

convert sca.gif -coalesce sca_%d.png

然后created a sprite sheet - 再次使用ImageMagick：

montage -geometry 170x170 sca_*.png SpriteSheet.png

这是221,228字节（小于源GIF）。输出有11列x 10行。

编辑：在这种情况下，帧的顺序结果为sca_ 2 .png 后添加 sca_ 19 < /strong> .png由于***** glob扩展的方式。下面包含一个批处理片段，用于在correct order。

中创建精灵表

正如你所提到的，动画GIF丢失了太多细节 - 这让我觉得你的视频可能需要很高的色深（或者你需要导出GIF而不抖动）。为此，您可以尝试创建sprite sheet from the JPEGs。你提到加起来高达7MB的JPEG - 稍微多做一些工作，也许你可以通过删除重复的帧（和/或降低源动画的帧速率）来减少视频中的帧数视频）。对于删除（重复）帧，您可以调整帧延迟。

这可以在javascript中的描述符对象中编码。如：

var animFrameTimes = [40, 40, 100, 100, ..., 40, 200, 40, 40]; // milliseconds between frames

此数据可用于调整帧之间使用的超时，例如参考链接中的filmstripper function。

2D sprite animation的简单实现的附加示例。

需要记住的是，有些设备（iOS）可能不支持sprite sheets that are too large。您可能需要将精灵表拆分为多个工作表作为解决方法。所有这些都取决于动画/视频对您的重要性。

最后，要处理具有不同分辨率的设备，如果按比例缩小的最大值不能提供所需的视觉质量，则可以在不同分辨率下创建一些这些精灵表。然后根据设备有条件地加载它们。

编辑：Batch snippet以正确的顺序创建带有框架的精灵表createSpriteSheet.bat：

@echo off
setlocal enableextensions enabledelayedexpansion
set fileList=
FOR /L %%n IN (0,1,100) DO (
    if not "!fileList!" == "" set fileList=!fileList!
    set fileList=!fileList! sca_%%n.png
)
REM echo %fileList%
montage -geometry 170x170 %fileList% SpriteSheet.png
endlocal