Animate

这篇文章总结一下之前项目中一些 前端 工具及技巧，主要包括 Iconfont的正确使用姿势 、 如何使用酷炫漂亮的动画（Lottie） 、 如何加入页面滚动入场离场动效。个人博客欢迎访问 https://lishaoy.netIconfont的正确使用姿势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.cssSymbol : 是以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>更多的载入效果可以参考官方给出的 示例如在您做的页面或应用中使用了这三招，精致小图标 、 炫酷的动画 、 页面滚动载入动效 ，那么瞬间让您的页面或应用高大上且生动活泼起来。 ...

导语Transition组件CSSTransition组件该库的前两个基本组件可以查看以上链接????，今天搬到了新的房子里，还是很满意的，明天就要去新公司报道了，希望能和新同事好好相处，完成2019年的几个目标。TransitionGroup<TransitionGroup>组件管理列表中的一组<Transition>组件。与<Transition>类似，<TransitionGroup>是一种状态机，用于管理组件随时间的安装和卸载。下面的例子使用了之前的渐变CSS过渡。当项目被删除或添加到TodoList时，in属性会被自动切换。可以在<TransitionGroup>中使用任何<Transition>组件，而不仅仅是css。第一步： 导入需要的文件import React,{ Component } from ‘react’import { CSSTransition, TransitionGroup } from ‘react-transition-group’import ‘./css/index.css’第二步：编写初始state里的列表项state = { items: [ { id: 1, text: ‘Buy eggs’ }, { id: 2, text: ‘Pay bills’ }, { id: 3, text: ‘Invite friends over’ }, { id: 4, text: ‘Fix the TV’ }, ] }第三步：编写列表项<TransitionGroup className=“todo-list”> {items.map(({ id, text }) => ( <CSSTransition key={id} timeout={500} classNames=“show”> <div className=“todo-list-item”> <button className=‘cancle’ onClick={() => { this.setState(state => ({ items: state.items.filter( item => item.id !== id ), })); }}> &times; </button> <span className=‘item-text’>{text}</span> </div> </CSSTransition> ))}</TransitionGroup>记住，要把所有需要管理的列表项都写在<TransitionGroup> 中，其次，<CSSTranstion> 组件的in属性此时由<TransitionGroup> 管理了，不需要单独设置了，当点击删除按钮时，list中的对应项将会被删除，对应项的in 属性将会被自动改为false，从而触发离场动画。第四步：添加按钮<button className=‘add’ onClick={() => { const text = prompt(‘Enter some text’); if (text) { this.setState(state => ({ items: [ …state.items, { id: 1123, text }, ], })); } }}> Add Item</button>当点击添加按钮，输入文字后，将会把此项添加到列表中，此时in属性为true，同时默认设置了首次动画，所以会触发一次进场动画。效果图完整代码//index.jsimport React,{ Component } from ‘react’import { CSSTransition, TransitionGroup } from ‘react-transition-group’import ‘./css/index.css’export default class App extends Component { state = { items: [ { id: 1, text: ‘Buy eggs’ }, { id: 2, text: ‘Pay bills’ }, { id: 3, text: ‘Invite friends over’ }, { id: 4, text: ‘Fix the TV’ }, ] } render () { const { items } = this.state return ( <div className=‘container’> <TransitionGroup className=“todo-list”> {items.map(({ id, text }) => ( <CSSTransition key={id} timeout={500} classNames=“show” unmountOnExit> <div className=“todo-list-item”> <button className=‘cancle’ onClick={() => { this.setState(state => ({ items: state.items.filter( item => item.id !== id ), })); }}> &times; </button> <span className=‘item-text’>{text}</span> </div> </CSSTransition> ))} </TransitionGroup> <button className=‘add’ onClick={() => { const text = prompt(‘Enter some text’); if (text) { this.setState(state => ({ items: [ …state.items, { id: 1123, text }, ], })); } }}> Add Item </button> </div> ) }}//index.css.show-enter { opacity: 0.01; }.show-enter-active { opacity: 1; transition: all 300ms ease-out;}.show-exit { opacity: 1;}.show-exit-active { opacity: 0.01; transition: all 300ms ease-out;}.container { position: absolute; top: 20px; left: 100px; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px 1px rgb(202, 202, 202);}.todo-list { border-radius: 5px; box-shadow: 0 0 5px 1px rgb(202, 202, 202);}.todo-list-item { height: 35px; line-height: 35px; padding: 0 10px; border-bottom: 1px solid rgb(202, 202, 202);}.todo-list-item:last-of-type { border-bottom: 0;}.item-text { margin-left: 10px;}.cancle { border: 0; color: #fff; background-color: #F04134; border-radius: 3px; box-shadow: 0 0 5px 1px rgb(202, 202, 202);}.add { border: 0; height: 30px; line-height: 30x; width: 120px; margin-top: 15px; font-size: 14px; border-radius: 3px; box-shadow: 0 0 5px 1px rgb(202, 202, 202);}Porps<TransitionGroup> 的常用属性主要就2个，其它的有兴趣可以去官网看看 ????componentdefault ‘div’ 也就是TransitionGroup渲染出来的标签为div，也可以就行更改，例如component=“span” 渲染出来的就是span标签了type: anydefault: ‘div’children相当于你给的组件，可以是字符串或者自定义组件等。type: any ...

导语上一篇文章给大家简单演示了 Transition组件，今天给大家介绍一下 React Transition Group 的第二个组件：CSSTransition 组件。CSSTransition此Transition组件用于CSS动画过渡，灵感来源于ng-animate库。CSSTransition：在组件淡入appear，进场enter,出场exit时，CSSTransition组件应用了一系列className名来对这些动作进行描述。首先appear被应用到组件className上，接着添加“active”类名来激活CSS动画。在动画完成后，原class改变为done表明组件动画已经应用完成并加载完成。当组件的in属性变为true时，组件的className将被赋值为example-enter，并在下一刻添加example-enter-active的CSS class名。这些都是基于className属性的约定。即：原组件带有className=“animate-rotate”，则enter状态时，变为"animate-rotate-enter"。看完了基本介绍，下面来一个最基本的例子：第一步：引入文件import React,{ Component } from ‘react’import CSSTransition from ‘react-transition-group/CSSTransition’import ‘./css/index.css’第二步：定义CSSTransition 组件的一些属性以及类的statestate = { show: true } <CSSTransition in={this.state.show} classNames=‘show’ timeout={300} unmountOnExit> </CSSTransition>第三步：编写内部组件以及一些样式<div className=‘circle’ onClick={()=>this.setState(state=>({show: !state.show}))}> show </div>//index.css.circle { margin: 2px; width: 50px; height: 50px; position: absolute; display: inline-block; left: 100px; box-shadow: 0px 1px 2px #999; text-shadow: 0px 1px 2px #999; line-height: 80px; text-align: center; color: white; font-size: 10px;}第四步：根据CSSTransition 配置的ClassNames属性编写css样式//index.css.show-enter { opacity: 0.01; transform: scale(0.9) translateY(50%); }.show-enter-active { opacity: 1; transform: scale(1) translateY(0%); transition: all 300ms ease-out;}.show-exit { opacity: 1; transform: scale(1) translateY(0%);}.show-exit-active { opacity: 0.01; transform: scale(0.9) translateY(50%); transition: all 300ms ease-out;}效果图：完整代码//index.jsimport React,{ Component } from ‘react’import CSSTransition from ‘react-transition-group/CSSTransition’import ‘./css/index.css’export default class App extends Component { state = { show: true } render () { return ( <CSSTransition in={this.state.show} classNames=‘show’ timeout={300} unmountOnExit> {state => { // console.log(state) return ( <div className=‘circle’ onClick={()=>this.setState(state=>({show: !state.show}))}> show </div> ) }} </CSSTransition> ) }}//index.css.circle { margin: 2px; width: 50px; height: 50px; position: absolute; display: inline-block; left: 100px; box-shadow: 0px 1px 2px #999; text-shadow: 0px 1px 2px #999; line-height: 80px; text-align: center; color: white; font-size: 10px;}.show-enter { opacity: 0.01; transform: scale(0.9) translateY(50%); }.show-enter-active { opacity: 1; transform: scale(1) translateY(0%); transition: all 300ms ease-out;}.show-exit { opacity: 1; transform: scale(1) translateY(0%);}.show-exit-active { opacity: 0.01; transform: scale(0.9) translateY(50%); transition: all 300ms ease-out;}Propsin控制组件应用动画的属性值，通常将一个react的组件state赋值给它，通过改变state，从而开启和关闭动画type: booleandefault: falseclassNamesclassNames[注意带s]属性用于当组件被应用动画时，不同的动画状态（enter,exits,done）将作为className属性的后缀来拼接为新的className，如： className=“fade"会被应用为fade-enter,fade-enter-active,fade-enter-done,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及fade-appear-active.每一个独立的className都对应着单独的状态。type: string | { appear?: string, appearActive?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }onEnter<Transition>组件的回调函数，当组件enter或appear时会立即调用。type: Function(node: HtmlElement, isAppearing: bool)onEntering也是一个过渡组件的回调函数，当组件enter-active或appear-active时，立即调用此函数type: Function(node: HtmlElement, isAppearing: bool)onEntered同样是回调函数，当组件的enter,appearclassName被移除时，意即调用此函数type: Function(node: HtmlElement, isAppearing: bool)onExit当组件应用exit类名时，调用此函数type: Function(node: HtmlElement)onExiting当组件应用exit-active类名时，调用此函数type: Function(node: HtmlElement)onExited当组件exit类名被移除，且添加了exit-done类名时，调用此函数type: Function(node: HtmlElement) ...