Android 如何在Phonegap(Apache Cordova)中制作卡通类型的动画?

Android 如何在Phonegap(Apache Cordova)中制作卡通类型的动画?,android,animation,cordova,html5-video,Android,Animation,Cordova,Html5 Video,最简单的方法是什么(大约7秒长) Phonegap应用程序中的卡通 我尝试了mp4视频,但Android不会通过html5标签播放本地视频文件。然后我尝试使用动画GIF,但质量太差,文件太大。后来,我尝试将所有内容导出到JPG文件,并使用javascript切换它们,但它一直在崩溃(该应用程序变得巨大,7秒视频的容量约为7MB) 另一个问题是不同的分辨率-我希望我的动画在高分辨率和低分辨率设备上都能达到可接受的质量 那么,有人能提出这样的建议吗 塔克斯 使用此插件播放mp4视频。。应该很好。。。

最简单的方法是什么(大约7秒长) Phonegap应用程序中的卡通

我尝试了mp4视频,但Android不会通过html5标签播放本地视频文件。然后我尝试使用动画GIF,但质量太差,文件太大。后来,我尝试将所有内容导出到JPG文件,并使用javascript切换它们,但它一直在崩溃(该应用程序变得巨大,7秒视频的容量约为7MB)

另一个问题是不同的分辨率-我希望我的动画在高分辨率和低分辨率设备上都能达到可接受的质量

那么,有人能提出这样的建议吗


塔克斯

使用此插件播放mp4视频。。应该很好。。。

阅读简单的卡通动画,我把它理解为可以用电脑制作的东西。 对于这一点,动画GIF应该是可以接受的,但它有自己的一套

一篇帖子建议使用GIF可以解决GIF的计时问题,并且比动画GIF小。这个链接看起来像是一个双色动画,所以我自己测试了这个假设。我使用了一个170x170动画GIF(216调色板;帧间40毫秒)和101帧来测试,这是229041字节

将各个帧提取为单独(索引颜色)PNG后,文件的总大小为375242字节。 我使用ImageMagick提取帧:

convert sca.gif -coalesce sca_%d.png
然后-再次使用ImageMagick:

montage -geometry 170x170 sca_*.png SpriteSheet.png
这是221228字节(比源GIF小)。输出有11列x 10行

编辑:在这种情况下,帧的顺序是sca\2.png是在sca\19.png之后添加的,这是由于****glob的扩展方式。下面包含一个批处理片段,用于在中创建精灵工作表

正如你提到的,动画GIF丢失了太多细节——这让我想到你的视频可能需要高颜色深度(或者你需要导出GIF而不抖动)。为此,您可以尝试创建一个。您提到的JPEG加起来高达7MB—再多做一点工作,也许您可以通过删除重复帧(和/或降低源动画/视频的帧速率)来减少视频中的帧数。对于已删除(复制)的帧,可以调整帧延迟

这可以在javascript的描述符对象中进行编码。例如:

var animFrameTimes = [40, 40, 100, 100, ..., 40, 200, 40, 40]; // milliseconds between frames
此数据可用于调整帧间使用的超时,如参考链接中的

的简单实现的附加示例。

要记住的一个问题是,某些设备()可能不支持。您可能需要将sprite工作表拆分为多个工作表作为解决方法。所有这些都取决于显示动画/视频对您的重要性

最后,要处理具有不同分辨率的设备,如果缩小的最大屏幕不能提供所需的视觉质量,则可以使用不同分辨率创建的一些精灵屏幕。然后根据设备有条件地加载它们

编辑:按正确顺序创建具有边框的精灵图纸
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
声明:遗憾的是,目前VideoPlayer不支持从android资产目录播放视频。这是以后的一个改进。所以这不是我的应用程序的解决方案-我不能强制用户单独下载视频。。。