如何为jQuery动画创建拼接在单个图像中的帧?

时间:2013-04-30 17:41:17

标签: jquery animation

我想使用stiched frame动画为我的图像设置动画,类似于this plugin doesdemo)。

所以我用Photoshop创建了我的stiched frames图像,将每个图像放在正确的位置,这是一个非常困难和耗时,我犯了几个错误(here is my demo)所以我的问题是:是否有工具或Photoshop插件或会自动将我的图像拼接在一起的东西,所以我不必手动完成它?有没有像Photoshop的插件那样将我的动画导出为单个stiched图像而不是GIF或MOV?

任何帮助表示赞赏!谢谢!

1 个答案:

答案 0 :(得分:0)

在Photoshop中,根据您的版本,它们有一个名为时间轴动画的窗口面板。您可以将每个帧设置为不同的图层,完美地定位它们并测试动画,而不必先输出所有内容。

完成动画制作后,您可以按照自己喜欢的方式导出每一帧。完成动画并将每个帧设置为图层后,您可以转到文件>脚本>将图层导出到文件。在该窗口中,您可以设置为使用任何前缀和任何文件类型导出到任何位置。这样可以让您更轻松地制作动画。

另外,当提到“缝合”时,通常是设计师用于全景拍摄等事物的术语,在这里您需要将一个图像放在另一个图像旁边并使边缘褪色,以便它们实际上像“拼接”一样布料,而不是逐帧动画,更多的翻书风格。

我知道这就是他们所说的,我知道他们之所以称之为是因为你可以在技术上将35mm(或其他)胶片“拼接”在一起,但我认为可能会因为它被缝合而更加混乱。

<强>更新

步骤1.我假设您已经编辑了所有图像,并将它们全部保存为.PNG。我也假设你已经用相同的宽度和高度保存了每个人。

步骤2.在Photoshop中,转到文件&gt;脚本&gt;将文件加载到堆栈。浏览所有已保存的图像,然后单击“确定”

步骤3.确保所有图像都直接加载到中心。按住alt并单击图层托盘中的眼球,单独查看每个图像。当你逐一浏览这些内容时,你将能够看到它们是否都在同一个地方。如果其中任何一个碰撞,请使用箭头键

进行调整

步骤4.数学时间:获取总图像高度(文档的高度,以像素为单位),并将其乘以图像数。 (即如果您有10张图像且文档高度为80px,则结果为800)

步骤5.记住此号码,然后转到图片&gt;画布大小。在height框中输入该号码,然后确保点击Up Arrow锚点。这将确保您添加的额外高度添加到当前文档下。点击OK

步骤6.我建议为此录制一个动作并给动作一个功能键,这样你就可以一遍又一遍地执行此操作。 在您执行此操作之前单击您的第二层。这将确保您不记录此操作。然后,转到窗口&gt;操作,然后点击面板底部的New Action按钮。将其命名为您将记住的任何内容,并选择一个可以反复按下的功能键。单击“记录”。

步骤7.现在,还记得文件的原始高度吗?将图像向下移动或轻推多个像素。使用上面的示例:如果图像是80px,我将保持移位并按下向下箭头8次(按住移位同时轻推,一次轻推10px)。这将把这个图像放在第一个图像下方80px,这将是下一个“帧”。

步骤8.按操作面板上的STOP RECORDING(面板左下方的小方块)

步骤9.选择第三层,然后按两次功能键。这将重播您每次按下时轻推或移动特定像素数量的操作。 (即第一次80px,第二次80pm更多,第三次80px更多,等等)

步骤10.对每个图层重复此操作,直到放置每个图层。

如果步骤1正确完成,您会发现这一切都完美无缺。