这篇文章总结一下之前项目中一些 前端 工具及技巧,主要包括 Iconfont的正确使用姿势 、 如何使用酷炫漂亮的动画(Lottie) 、 如何加入页面滚动入场离场动效。
个人博客欢迎访问 https://lishaoy.net
Iconfont的正确使用姿势
Iconfont 是阿里巴巴打造的矢量图标库,图标丰富多彩(单色和彩色),使用方便快捷(可筛选图片创建自己项目图标库),支持在线使用,摆脱了传统的图片的繁琐和css字体图标库引入的冗余。
下面介绍下如何使用 Iconfont
搜索选择图标
点击 Iconfont 打开页面如图,可以搜索 🔍 关键字,找到想要的图标
例如,搜索 ‘image’ 关键字,如图
鼠标放到图标上会出现 添加入库 、 收藏 、 下载图标 选项,一般我会选择 添加入库 ,之后统一添加到项目,生成在线地址引入项目(后面会介绍到)
右边的蓝色皇冠按钮可以进行 精选 、 全部 的筛选,红色的按钮可以进行 单色 、 多色 、 全部 的筛选
点击 下载 会弹出下载页面,可以进行图标的编辑和不同格式的下载,如图
添加入库生成在线连接
选择 添加入库 的图标,会在右上角的购物车显示数量,点击购物车图标,会弹出右侧栏,如图
可以批量下载和添加到项目,点击 添加至项目 如图
给项目取一个名字,点击确定,如图
可以看到有三种图标引入的方式,默认选中的是 Font class 的方式,也推荐使用这种方式
Unicode : 是以字体的方式引入,如下
@font-face {
font-family: 'iconfont'; /* project id 1066942 */
src: url('//at.alicdn.com/t/font_1066942_yvi703p2pv.eot');
src: url('//at.alicdn.com/t/font_1066942_yvi703p2pv.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1066942_yvi703p2pv.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1066942_yvi703p2pv.woff') format('woff'),
url('//at.alicdn.com/t/font_1066942_yvi703p2pv.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1066942_yvi703p2pv.svg#iconfont') format('svg');
}
Font class : 是以Css的方式引入,如下
//at.alicdn.com/t/font_1066942_yvi703p2pv.css
Symbol : 是以js的方式引入,如下
//at.alicdn.com/t/font_1066942_yvi703p2pv.js
如想了解3中方式具体用法,可点击 官方文档,这里我主要介绍 Font class 的方式
引入项目使用
首先,把生成的链接引入到页面中,如下
<link rel="stylesheet" href="//at.alicdn.com/t/font_1066942_yvi703p2pv.css">
其次,用 <i class="iconfont icon-Userselect"></i>
在页面中使用,大小颜色都可以用 css
调整
阿里在代码的复制、图标的搜索、编辑、下载、筛选等一些操作上做的很到位,使用起来方便快捷
我在之前的项目里也使用过,还是很漂亮的 https://a.lishaoy.net ,如图是我在项目里使用的一些图标,每个图标是不是都做的很精致
Lottie开源动画库
Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能够直接把 AE 导出的动画文件(json),引入到页面使用,以下是官方给出的效果图
Lottie 支持 iOS、Android、React Native 、Web ,这里主要介绍 lottie-Web 是如何使用,更多使用方法可以参考 http://airbnb.io/lottie/
首先,在页面中引入 CDN
上的文件,如下
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.2/lottie.min.js" type="text/javascript"></script>
其次,使用 AE 制作动画(UI提供或者自己制作)导出的 json
,或者可以在 Lottie Files 下载 (Lottie Files 是一个拥有高质量 Lottie 文件格式动画的网站,不仅设计师可以在上面陈列他们的动画而且还提供免费下载)
以下是我在项目里使用的效果图(上传图片中会加重动画,上传成功动画停止),具体效果可以去我的项目上传图片体验 上传图片动画效果
具体的代码如下,在页面中创建需要加重动画的容器(HTML
代码)
<div class="image-load d-flex justify-content-center align-items-center">
<div class="box">
<div class="lottie"></div>
<div class="text text-muted text-center">The picture is being uploaded ...</div>
</div>
</div>
然后,用 js
初始化动画,如下
let anim = lottie.loadAnimation({
container: $('.image-load .lottie')[0], //动画容器的元素
renderer: 'svg', //支持 svg 和 canvas
loop: true, //是否循环
autoplay: false, // 是否自动播放
path: '/EmojiReaction.json' //动画json文件的位置
})
anim.addEventListener('loopComplete', () => { // 监听 `loopComplete` 事件,每次播放完成执行
anim.pause() //停止播放
$('.image-load').removeClass('loading') //隐藏容器
$('.image-load .box .text').text('The picture is being uploaded...').removeClass('text-success').addClass('text-muted') //改变说明文字状态及颜色
})
更多的参数和事件可查阅官方文档 Lottie-Web
如何加入页面滚动入场离场动效
首先,让我们来先看看效果,如图(效果来源我的博客 https://lishaoy.net)
以上动效就是用的 AOS 这个库,具体的使用方法也很简单
在页面上引入 css
和 js
文件
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
然后,用 AOS.init()
初始化,这样初始化,使用的是默认设置,具体有很多参数可以调整,详情可查阅 项目文档,如
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
最后,在页面上使用即可,如
<div data-aos="fade-in"></div>
或者,也可以单独给元素设置参数,使用 data-aos-*
,如
<div data-aos="fade-in"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
></div>
更多的载入效果可以参考官方给出的 示例
如在您做的页面或应用中使用了这三招,精致小图标 、 炫酷的动画 、 页面滚动载入动效 ,那么瞬间让您的页面或应用高大上且生动活泼起来。