AE插件-一键导出序列帧动画雪碧图

AE导出CSS雪碧图并自动生成代码的AE脚本

我们通常用AE做动画时就是做出动画后,导出序列帧给研发,然后在由研发用代码一帧帧拼凑起来过渡。一个动画如果过渡很细腻需要的关键帧数就很多,在导出序列帧图片时能有好几百张。当研发拿到这一堆图片时更是头大。
我们通常会把这些序列帧用PS给拼凑到一张图上,图片少的话还好拼,如果几百张的话,能拼到崩溃。万一要修改动画的细节,设计师估计要跳楼了~

CSS Sprite Animation是一个AE脚本插件(作者@bigxixi),可以一键导出动画为CSS雪碧图及代码,不需要先导出序列帧再拼接了。

名称:CSS Sprite Animation
下载地址:github.com/bigxixi/CSS-Sprite-Exporter

使用方法

一、下载 CSS-Sprite-Exporter.jsx 文件,快速链接
二、打开AE, 点击 文件->脚本->运行脚本文件… 然后选择刚才下载的 CSS-Sprite-Exporter.jsx。

或者可以复制 CSS-Sprite-Exporter.jsx 到AE的脚本文件夹:
Windows:

C:\Program Files\Adobe\Adobe After Effects <版本>\Support Files\Script\

Mac:

/Applications/Adobe After Effects <版本>/Scripts/

这样你就可以从 文件->脚本 中直接选择CSS-Sprite-Exporter了

三、开始用AE制作你想要的动画吧。做完后在“文件->脚本”运行CSS-Sprite-Exporter.jsx
点击「生成」导出,就会帮你打开到该动画导出的文件夹。

最大宽度:当图片第一行拼接后宽度达到这个值,就会折到下一行继续拼接,默认是5000像素。
web兼容性:为了兼容一些旧的浏览器,如果项目有这个需求可以勾选,具体需要研发同学评估,默认没有勾选
CSS样式设置中的「ID名」指定了在页面中这个元素的「ID」,需要遵循CSS的命名规范,可以先保留默认导出给研发后让研发统一指定。
「动画名」指定了该元素的对应关键在动画的命名,也需要遵循CSS的命名规范,可以先保留默认导出给研发后让研发统一指定。
跳帧:如果动画帧数太多可以尝试用这个参数减少帧数,即「跳过xx帧」的意思,默认是不跳帧。

四、导出的CSS代码示例:

#mySprite { /*导出时指定的「ID名」*/
   background-image: url('images/boom.png');/*精灵图路径*/
   width: 500px;
   height: 500px;
   /*导出时指定的「动画名」*/
   animation: myAnimation 1.42s steps(1) infinite;
}

@keyframes myAnimation {
    0% { background-position: 0px 0px; }
    2.94% { background-position: -500px 0px; }
    5.88% { background-position: -1000px 0px; }
    8.82% { background-position: -1500px 0px; }
    ……
    /*此处省略,一直到100%*/
    ……

    97.06% { background-position: -1500px -1500px; }
    100.00% { background-position: -2000px -1500px; }
}

五、打开「预览_XXX.html」 文件,就可以在浏览器中预览导出的动画了。
* 预览页面左边为动画,点击它能预览雪碧图,下方会显示尺寸参数,点击蒙层返回。
* 右边为预览控制和导出的代码,下方可以设置预览背景色。
-w359

使用注意事项:
* AE中合成的名字尽量用英文及数字,这样导出的精灵图也会是英文和数字,不容易出现图片路径乱码问题。
* 动画的尺寸、时长、帧率尽量控制小一些,否则导出的精灵图尺寸会很大,容易导致一些性能问题。
* CSS动画代码中位移的单位是像素(px),如果需要别的单位需要转换一下。

微信公众号:QIUQIU-DESIGN
获取更多的免费素材资源更新,设计资源站一个就够了!
12000人已关注
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)

请QIUQIU喝杯饮料吧~

支付宝扫一扫打赏

微信扫一扫打赏