动效交付插件首发——有了它，设计师和前端开发都能早点下班啦
很多设计师群友问我，做完的动效如果跟程序员交付呢？看完这篇文章，让你和程序员都能早点下班～
大家好，我是灰大设计团队的 灰色执照～
最近 2 周都没有更新文章了，因为最近所有的时间和精力都用来做这个重磅产品了：PS动效代码助手。
在制作这个产品的过程中，阿灰的热情和成就感都非常高。经常因为思考其中的某一个功能兴奋得睡不着觉。也经常太过投入、激情四射的写代码到深夜忘了时间。
在这种激情和热情之下，产品自然是让我十分满意，开始介绍产品之前，我们先看看插件产出的成果，也就是这个插件的下载页面：
https://pslkzs.com/animate/index.php
网站的动效代码，几乎都是用这款神器生成的。它是一款快速提高效率的动效交付插件。
其实，在我过去从事UI设计的时候，无论是做数据可视化大屏，还是网页动画，我经常要做这样的东西：
▲ 比如这种大屏的主视觉
▲ 比如这种可以无线循环的底部背景图
▲ 比如这种可旋转的地球或者病毒（图片来源于网络，如果不小心侵犯你的权益，请联系我删除）
▲ 我甚至看到农业可视化项目中一只猪在旋转（截图来自于https://anov.woyun.cn/anov-projects/pb/zhihuijinnong/#/page2如果不小心侵犯了你的权益，请联系我删除）
现在，AE或者C4D完成的动效已经越来越流行了。最近我有留意到，阿里云、腾讯云也都应用了这些效果。
▲ 阿里云小图标上的hover效果（图片来源于阿里云官网，如果不小心侵犯你的权益，请联系我删除）
▲ 阿里云小图标上的hover效果（图片来源于阿里云官网，如果不小心侵犯你的权益，请联系我删除）
▲ 腾讯云小图标上的hover效果（图片来源于腾讯云官网，如果不小心侵犯你的权益，请联系我删除）
▲ 腾讯云小图标上的hover效果（图片来源于腾讯云官网，如果不小心侵犯你的权益，请联系我删除）
简单的学习一下AE、C4D或者blender就可以实现上面的诸多效果了。甚至很多模型，我们都能够通过免费的网站下载到。但是作为设计师，我们应该如何交付开发呢？
通过F12查看阿里云和腾讯云的代码，你能看到一个排列好的序列帧图片。
▲ 阿里云是这样一个序列帧长图，访问下面地址，可以直接查看阿里云原图：
https://img.alicdn.com/tfs/TB1C7fPidTfau8jSZFwXXX1mVXa-128-2688.png
▲ 腾讯云也是这样一个序列帧长图，访问下面地址，可以直接查看腾讯云原图：https://main.qcloudimg.com/trisys/assets/home/images/product/ani-base.png
很多时候，我们设计师只知道要导出透明背景的png序列帧，但是他们并不清楚如何合并这些序列帧，如何最小化切图，如何压缩到极限，以及后续程序员到底该如何实现。
很多时候，我们所在公司的程序员能力水平不够（或者想偷懒），只会要求设计师提供一个GIF图片。（都2021年了，居然还在用GIF图片！！！）
哪怕是很清楚这种实现技术的程序员，其实也饱受这种动画的痛苦，因为研究每帧的尺寸，调整动画速度或者曲线等等都太耗时了。
基于以上原因，我在去年就规划好了要开发一款动效交付插件。这是我2020年8月17号在公众号发布的文章《再见，让我们相忘于江湖》里面对未来的开发计划（现在回过头来看当时的规划，基本都完成了）：
▲ 去年规划这个产品的名字还准备叫UI助手
有了我开发的这款神器，你只需要导出序列帧，剩下所有的工作，插件都会帮你完成！插件详细的操作过程和功能请看这个视频：
▲ 需要说明的是：插件只生成web端动画。由于本人不开发安卓和iOS，暂时不考虑手机端（但不排除，未来会加上手机端代码）
不得不说，插件的确是：实用、方便、高效！在开发插件的“下载页面”的时候，我就全部用的这种方法直接生成代码！插件下载页面：https://pslkzs.com/animate/index.php
好了，今天的产品介绍就到这里了。谢谢～
