解放生产力，CSS3帧动画工具

由于CSS效果中用到帧动画时，设计师制作过程中合图过程繁琐，一旦改变动画，需要重新合图；

动画百分比+图片位置计算繁琐，加减动画的帧数需要重新计算；

沟通成本高，有时候设计师发现输出的动画跟在AE看到的有差别，需要修改动画时间等进行调试。

基于以上，雪碧图工具+帧动画工具就这么诞生了！

无需手动合图！提高沟通效率！无需打码！调试方便！是这个工具的特点。

雪碧图工具使用了一个开源的库，直接利用canvas在浏览器端合成图片，可以设置间距，排练规则等。帧动画工具是js实现，根据图片位置和数量进行计算输出帧动画。

访问东东帧动画工具进行体验。

点击打开选择需要合成的图片，会自动合成雪碧图，并且在右边的设置弹窗里面，可以进行相关设置。

关于动画帧的生成，希望你合成雪碧图时，图片按照播放顺序00.jpg 01.jpg 02.jpg的方式命名，这样图片才能按照理想的顺序进行播放，右边的设置弹窗同样提供了修改动画的功能，修改后点击播放按钮，就能即时看到效果拉！

解放生产力，CSS3帧动画工具相关推荐

CSS3 帧动画分段,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
CSS3 帧动画（Sprite，直译叫雪碧图）
CSS雪碧 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 C ...
使用css3实现雪碧图帧动画
背景: 此需求是在html界面实现,纯原生,没有像vue生命周期那些东西. 场景: 一个单纯的图片背景,想要在上面加个动图.一瞬间脑子里想到两个方案: 一:最省前端功夫的:ui压缩一个gif图出来二 ...
CSS3动画之线性动画与帧动画
很多复杂的动画,无法用css3变形的方式画出来,而是采用一帧一帧连续播放静态图片的方式形成动画. 线性动画会有一个渐变的过程,而帧动画可以没有渐变的过程,只显示每个时间节点的状态帧动画的实现要靠st ...
canvas 擦除动画_帧动画的多种实现方式与性能对比
作者: 前端向朔 from 迅雷前端本文目录 Web 动画形式应用场景素材准备实现方案一.GIF 图二.CSS3 帧动画三.JS 帧动画方案总结注意事项总结 Web 动画形式首先 ...
帧动画的多种实现方式与性能对比
文章目录 Web动画形式应用场景素材准备实现方案一.GIF图二.CSS3帧动画三.JS帧动画方案总结注意事项总结 Web动画形式首先我们来了解一下Web有哪些动画形式 1. CSS ...
CSS 帧动画播放动画
CSS3 帧动画 amimation @keyframes 在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些 ...
CSS3流程动画,css3动画和vue动画
transfrom : 转换 1.translate : translate(x,y)有两个值,第一个是x轴,第二个是y轴 2.rotate: rotate(XXdeg) deg值为你要旋转的角度 3 ...
css逐帧动画图片太大怎么办,不建议使用 CSS3 keyframe transform 实现逐帧动画
© Young 2018-12-26 21:43 Welcome to My GitHub 一般在使用 CSS3 keyframe transform 实现逐帧动画时,往往会先把逐帧动画图片合成精灵图 ...

解放生产力，CSS3帧动画工具

解放生产力，CSS3帧动画工具相关推荐

最新文章

热门文章