投稿

h5动画下载（h5动画制作）

用户投稿 • • 网络资讯 • 阅读 908
h5动画下载（h5动画制作）

　　看了上面的图片，是不是觉得这样的原型很有感觉，让人眼前一亮。抓住?眼球的动态图标效果，实在是太棒了。

　　今天就和大家分享一个宝藏网站，使用免费的动态图标，为你的原型?加分。

h5动画下载（h5动画制作）

网站介绍

　　Lordicon 是一个功能强大的精心制作的动画图标库， 可用于数字产品、演示文稿或视频！ 4 种样式 – 1,125 个免费图标 – 5,104 个高级图标

　　从嵌入 html 代码到手动集成 – 有很多方法可以将动画图标添加到您的项目中！

嵌入代码方式：

Shopify／Wix／SquarespaceWeebly／Webflow／Webstars／Duda／Pagecloud／GoDaddy

手动添加方式：

MANUAL／Web／iOS／Android／Flutter／React／Native／Xamarin／NativeScript／Windows／Vue／Angular／QT／Skia

使用方法

　　点击页面顶部的ICON按钮，可以看到平台提供了Wired和System2大类，总计6000+的动态图标。

h5动画下载（h5动画制作）

进入对应的列表页面，选择任意图标，可以看到右侧看到实时的动态效果预览。

h5动画下载（h5动画制作）

在预览区域包含了几大部分

h5动画下载（h5动画制作）

从下载和导出区域，我们可以看到平台支持常用的导出方式，比如HTML代码，gif文件，lottie文件等，除了这些还可以More按钮，选择更多的?导出方式。

h5动画下载（h5动画制作）

可以看到居然还可以导出json格式，?mp4视频格式等等。?

如果你不满足于预览面板中的简单修改，还可以点击“Reveal full editor”按钮

h5动画下载（h5动画制作）

进入高阶编辑界面。

h5动画下载（h5动画制作）

在当前页面，我们可以对图标选择不同的风格进行编辑，不同风格的编辑选项也?不相同，下图为?差异对比。

h5动画下载（h5动画制作）

除了对不同颜色进行调整以外，还支持对透明度，?XY坐标值位置进行调整。

h5动画下载（h5动画制作）

当一切设置完成以后，?网站还贴心的为你提供了不同场景下的预览。

h5动画下载（h5动画制作）

这里还有一点?提示以下，在选择不同导出方式的时候，还可以对当前的导出格式进行不同的设置。

比如导出HTML时，你可以选择动画的触发效果，包括：Hover、Click、Loop等

h5动画下载（h5动画制作）

导出?gif格式时，可以设置不同的背景色，以更好的适应不同背景色的场景。

h5动画下载（h5动画制作）

结尾

可能有些朋友会问，这些素材怎么应用在Axure或者其他的交互设计软件中呢?？

其实不同的原型软件，支持的格式有所不同，这也是平台提供不同格式导出的原因。

比如Axure你可以选择生成gif或者mp4格式导入，比如protopie你可以选择?Lottie格式进行导入，当然怎么用？怎么用的更好？就看?大家的发挥了。

更多精彩的内容，请关注公众号：Axureplus。

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.sumedu.com/faq/117989.html
赞 (0)
用户投稿
0 0
上一篇 2022年6月15日 04:23
下一篇 2022年6月15日 04:39

相关推荐