因为动图体积太大,就不给大家传gif了,接下来我们具体分析一下该组件的特点.
1. 组件设计思路
按照之前笔者总结的组件设计原则,我们第一步是要确认需求.
策略型加载动画往往用在C端产品或者系统中,用来为用户提供更多的引导信息, 当用户首次访问系统或者网站时, 由于某种主动型引导(网站在加载时或者切换页面时故意给用户看到的加载信息)或者环境原因(网络,带宽限制导致的加载过慢
,此时出现加载动画), 这些加载信息往往带有某种用途,比如对于个人博客网站, 这个加载动画可以是博主的介绍,博主的宣传信息,github地址等, 对于企业来说,可能是某个新功能的介绍, 网站服务信息的介绍
如果对于react/vue组件设计原理不熟悉的,可以参考我的之前写的组件设计系列文章:
《精通react/vue组件设计》之实现一个健壮的警告提示(Alert)组件
《精通react/vue组件设计》之配合
css打造类materialUI的按钮点击动画并封装成react组件
《精通react/vue组件设计》之快速实现一个可定制的进度条组件
《精通react/vue组件设计》之基于jsoneditor二次封装一个可实时预览的