三招让你成为程序猿中优秀的射鸡湿

goodDesigner

这篇文章总结一下之前项目中一些 前端 工具及技巧,主要包括 Iconfont的正确使用姿势如何使用酷炫漂亮的动画(Lottie)如何加入页面滚动入场离场动效

个人博客欢迎访问 https://lishaoy.net

Iconfont的正确使用姿势

Iconfont 是阿里巴巴打造的矢量图标库,图标丰富多彩(单色和彩色),使用方便快捷(可筛选图片创建自己项目图标库),支持在线使用,摆脱了传统的图片的繁琐和css字体图标库引入的冗余。

下面介绍下如何使用 Iconfont

搜索选择图标

点击 Iconfont 打开页面如图,可以搜索 🔍 关键字,找到想要的图标

Iconfont

例如,搜索 ‘image’ 关键字,如图

Iconfont

鼠标放到图标上会出现 添加入库收藏下载图标 选项,一般我会选择 添加入库 ,之后统一添加到项目,生成在线地址引入项目(后面会介绍到)

右边的蓝色皇冠按钮可以进行 精选全部 的筛选,红色的按钮可以进行 单色多色全部 的筛选

点击 下载 会弹出下载页面,可以进行图标的编辑和不同格式的下载,如图

Iconfont

添加入库生成在线连接

选择 添加入库 的图标,会在右上角的购物车显示数量,点击购物车图标,会弹出右侧栏,如图

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 ,如图是我在项目里使用的一些图标,每个图标是不是都做的很精致

Iconfont

Lottie开源动画库

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能够直接把 AE 导出的动画文件(json),引入到页面使用,以下是官方给出的效果图

Lottie
Lottie

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 文件格式动画的网站,不仅设计师可以在上面陈列他们的动画而且还提供免费下载)

以下是我在项目里使用的效果图(上传图片中会加重动画,上传成功动画停止),具体效果可以去我的项目上传图片体验 上传图片动画效果

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

Iconfont

以上动效就是用的 AOS 这个库,具体的使用方法也很简单

在页面上引入 cssjs 文件

<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>

更多的载入效果可以参考官方给出的 示例

如在您做的页面或应用中使用了这三招,精致小图标炫酷的动画页面滚动载入动效 ,那么瞬间让您的页面或应用高大上且生动活泼起来。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 高数课 为什么要安排在早上呢 在早上的话 会毁掉一整天的好心情啊
    决明子川阅读 102评论 0 0
  • 回家的路上,月亮在水墨画般的云里,陪着我们一路到家。在朋友家坐客的一天,过得无比轻松惬意,孩子们在地上和狗一起爬,...
    不要葱花两个鸡蛋阅读 173评论 0 0
  • 我们都在改变, 从简单到复杂, 从单纯到圆滑; 我们都想不变, 一直的善良着, 永远的耿直着。 生活似流水, 渐渐...
    大野的竹阅读 658评论 2 6
  • 我不喜欢下雨,因为偶尔叫不到车,总会被急匆匆的车甩了一身的泥点子。这是我偶尔的心境,焦躁,不耐烦,活不到当下。我总...
    素言简说阅读 296评论 3 4