SVG动画制作工具 , 从此抛弃臃肿的gif
VG简介
只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持很好了
SVG与Gif的比较
SVG图片: 矢量放大,动画也是矢量,体积极小,相当于一个.txt文本的体积,几b到几kb
GIF图片:固定大小,动画为图片逐帧显示,体积贼大
SVG应用的平台
Android应用、IOS应用、网页、电脑软件
SVG的设计工具
Sketch、Photoshop、AI等等
我个人推荐使用Sketch来设计svg图形
svgator动画制作工具
好了废话不多说啊,以上是svg的科普知识而已,下面介绍制作svg动画的强大工具
这个工具是一个网页在线的svg制作工具,只需要进入网页就可以制作svg动画了,不过这个工具制作起svg动画来是跟ae使用差不多的,如果有ae的基础基本使用就非常好上手啦。
工具非常强大,而且没有广告,重要的是免费使用的,制作好动画之后呢直接又可以导回出svg图片了,这时你的svg就是会动的了,你就可以直接应用到网页或者移动应用的开发当中了
工具的编辑界面
这里还有一个技巧,你可以去阿里图标库去下载svg图片导入到这里来编辑添加动画,然后再导出
前往工具地址
https://www.svgator.com/
是国外网站所以你需要翻墙来使用喔
网页中SVG应用的案例
比如又拍云官网就大量使用了svg动画,还有更多大家自己去发现学习了。
通常可以被用作一个图标的特效,banner背景特效等等,在移动应用中svg可以用于制作app的引导页动画和按钮等
SVG动画制作工具 , 从此抛弃臃肿的gif的更多相关文章
- 关于HTML5在动画制作工具Animatron的一些问题
Animatron是国外一款在线HTML5动画制作工具,网址:www.animatron.com 当然,想使用的话,是需要FQ的. 用animatron制作好的动画是可以下载为代码和GIF的,这时候付 ...
- MFC实现Gif动画制作工具
每天来博客园逛,看里面各种好文章,发现自己已经许久没有分享点什么了. 前几天用MFC设计了一个小型的Gif动画制作工具,思路如下: 1.支持图片格式:"*.jpg","* ...
- svg可视化制作工具
svg可视化制作工具直接ai里面用钢笔路径画好 然后右键建立复合路径 最后存储为svg即可 这样生成的svg就带path标签了
- [置顶] 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam
由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...
- 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam
由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...
- css3动画制作工具
1.从chrome webstore下载 chrome应用商店安装地址 2.直接下载crx文件 如果无法访问到chrome的应用商城,可以选择下载app.crx文件,在chrome中打开chrome: ...
- HTML5 页面制作工具
https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站 81 235 初页 制 ...
- SVG交互动画制作
前面我们已经说过了要怎样制作CSS3动画,但是SVG动画一直都没有时间研究过,正好趁现在有一点时间静下心来研究一下. 一般来说,常见前端动画实现方案分为三种,CSS3动画,HTML动画(SVG动画), ...
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
随机推荐
- (53)C# 工具
https://docs.microsoft.com/zh-cn/dotnet/framework/tools/ildasm-exe-il-disassembler 一.Visual Studio的开 ...
- eclipse spring boot 项目出现java.lang.ClassCastException 解决方法
问题 eclipse spring boot 项目出现java.lang.ClassCastException 解决方法: 重新生成项目
- kuangbin专题十三-基础计算几何
链接:https://cn.vjudge.net/contest/68968 POJ 2318 TOYS 题意:m个玩具落在n+1个区间,给你玩具的坐标,问每个区间有多少玩具. 思路:叉积的简单应用, ...
- 用EditText控件的属性inputType
android:inputType参数类型说明 android:inputType="none"--输入普通字符 android:inputType="text" ...
- 【转】HTML5标签使用的常见误区
最近组内进行 HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶 段,有些新的标签元素的解释也是经常有变化 ...
- Laravel/php 一些调试技巧
1. 模型属性不知道哪里修改? 直接覆盖模型的 setAttribute 方法,监测到某一个属性改动的时候,抛一个异常就可以看到堆栈了 use Illuminate\Database\Eloquent ...
- 反射与类加载之ClassLoader与类加载器(二)
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从以下几个内容来阐述反射与类加载: [动态代理模式] [Android ...
- form编码方式application/x-www-form-urlencoded和multipart/form-data的区别?
application/x-www-form-urlencoded: 表单数据编码为键值对,&分隔 multipart/form-data: 表单数据编码为一条消息,每个控件对应消息的一部分 ...
- Synchronizing Timer----集合点定时器
1.Number of Simulated Users to Group by:意思是比如设置是10,那会等到有10个线程到时候,才放行 2.Timeout in millilseconds:比如设置 ...
- 项目中UX设计1到2的设计提升总结