styled-components实现骨架屏加载动画

背景概述

很多应用在加载数据的时候，为了避免页面过于空白，都会用骨架屏的方式来预告将会有内容载入，从而提升用户体验

image.png

接下来简单讲解一下如何在react应用中，通过styled-components实现骨架屏的效果，大致可以分为静态框架 + 动画效果两个部分

静态框架

在这个部分，我们需要根据实际的内容，预先设置好各个区块的宽度、高度以及背景颜色

// Skeleton/index.js
import React, {Component} from 'react'
import {
  Item,
  Info
} from './style'

class Skeleton extends Component {
  constructor(props) {
    super(props)
  }

  render(){
    return (
      <Item>
          <div className="img-wrapper" />
          <Info>
            <div className="loading name"></div>
            <div className="loading desc"></div>
            <div className="loading delivery"></div>
          </Info>
        </Item>
    )
  }
}

export default Skeleton

CSS部分如下：

import styled, {keyframes} from 'styled-components'

export const Item = styled.div`
  width: 94%;
  min-height: 100px;
  margin: 0 auto 5px;
  padding: 3%;
  border-radius: 5px;
  border: .5px solid #E8E8E8;
  box-sizing: border-box;
  background-color: white;
  .img-wrapper {
    display: block;
    float: left;
    width: 99px;
    min-height: 74px;
    background-color: #ededed;
  }
`

export const Info = styled.div`
  display: block;
  float: left;
  width: 58%;
  margin-left: 15px;
  .name {
    width: 100%;
    min-height: 18px;
    margin-bottom: 8px;
    background-color: #ededed;
  }
  .desc {
    width: 100%;
    min-height: 16px;
    margin-bottom: 8px;
    background-color: #ededed;
  }
  .delivery {
    width: 100%;
    min-height: 16px;
    background-color: #ededed;
  }
`

动画效果

静态值如下：

.loading {
    background-color: #ededed;
    background: linear-gradient(
      100deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.5) 50%,
      rgba(255,255,255,0) 60%
    ) #ededed;
    background-size: 200% 100%;
    background-position-x: 160%;
    animation: 1s ${skeletonLoading} ease-in-out infinite;
  }

动画定义如下：

const skeletonLoading = keyframes`
  to {
    background-position-x: -20%;
  }
`

编写动画样式时，别忘了在文件顶部对 { keyframes } 进行引入

下面就对部分关键的CSS属性值进行简单讲解：

1、linear-gradient：

表示渐变轴位于水平方向顺时针旋转100度的位置
从rgba(255,255,255,0)渐变到rgba(255,255,255,.5)再渐变到rgba(255,255,255,0)

2、background-size：宽度，高度

可以理解为光柱运动场地的范围大小
我们想让光柱在水平方向移动，可用百分比设置它

3、background-position-x：

小于等于0%表示光柱在右边缘(或者更右边)，大于等于100%表示光柱在左边缘(或者更左边)
由大数值改变成小数值就可以实现光柱从左向右移动的效果

4、动画

background-position-x从160%移动到-20%
例如：原来的区块宽度为 100px，高度为50px
background-size设置为 200% 100%后，光柱的运动场地大小为：200px 50px
动画开始时，光柱位于距离原区块左边缘60px的地方
动画结束时，光柱位于距离原区块右边缘20px的地方

实现方法

我们可以通过一个flag变量来控制组件的切换
当数据未载入时，渲染Skeleton组件
当数据载入后，渲染原来的组件即可

详细教程请参考视频：【CSS】骨架屏效果