手写原生代码专题 | 三角板 Loading 效果和骨架屏图片卡片预加载效果（三）

By 前端达人

Published in 5-案例分享

August 14, 2022

1 min read

大家好，本篇文章，小编将和大家一起完成两个案例效果：三角板 Loading 效果和骨架屏图片卡片预加载效果，一起动手实践吧！

一、三角板 Loading 效果

如下动图所示，两个三角板相差90度依次交替顺时针旋转，是不是很酷呢？

三角.gif

基于以上动图效果，如何实现呢？其实这个案例利用CSS的动画属性

基于CSS的方式通过DIV的boder属性绘制两个顶角向上图形重合的正三角形
然后顺时针旋转其中一个三角形，让其相乘90度（旋转的中心，在DIV的中心即三角形的订单）
然后定义动画属性，让两个三角形相差90度的进行无限循环旋转。

做这个动画的思路就这些，是不是很简单呢，接下来我们动手实践吧

1.1、创建 HTML 结构

HTML文件结构很简单，就是一个 div ，用来实现三角形。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Kinetic Loader</title>
  </head>
  <body>
    <div class="kinetic"></div>
  </body>
</html>

1.2、编写CSS代码

编写CSS的思路如下，最重要的是要理解如何用 Div 实现三角形，具体的实现思路如下：

首先定义动画容器 kinetic 的宽和高 80px，让其垂直水平居中
然后使用 before 和 after 伪类，绘制两个三角形（宽高为0，定义边框宽度为50px，底边背景颜色为白色，其他边框颜色透明，就绘制出两个顶角朝上的正三角形）
顺时针旋转其中一个三角形90度，然后分别定义旋转动画，让其对应的时间线上相差90度。

思路就聊到这里，具体的 CSS 代码如下所示：

* {
  box-sizing: border-box;
}

body {
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.kinetic {
  position: relative;
  height: 80px;
  width: 80px;
}

.kinetic::after,
.kinetic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #fff;
  animation: rotateA 2s linear infinite 0.5s;
}

.kinetic::before {
  transform: rotate(90deg);
  animation: rotateB 2s linear infinite;
}

@keyframes rotateA {
  0%,
  25% {
    transform: rotate(0deg);
  }

  50%,
  75% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateB {
  0%,
  25% {
    transform: rotate(90deg);
  }

  50%,
  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(450deg);
  }
}

到这里本案例就介绍完了，大家可以点击文末的阅读原文进行体验，如果你想获取源码，请查看文末获取源码的方式进行获取。

二、骨架屏图片卡片预加载效果

首先我们先了解下什么是骨架屏，骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通畅，不会造成网页长时间白屏或者闪烁。这就是 Skeleton Screen ！

了解完骨架屏后，我们先实现一个图片卡片预加载的轮廓效果，先通过这个简单示例，简单的了解下是如何实现的，指导原理后，我们就明白如何实现一个骨架屏了，具体的效果展示如下：

骨架屏效果.gif

基于这个示例效果，你会如何实现呢？

首先我们先用 HTML和CSS 创建卡片的基础轮廓
然后通过 JS 获取卡片的对应的图片、标题、用户头像、信息对应的DOM元素
数据请求完成后，然后将数据填充至对应的DOM元素

思路就聊到这里，是不是很简单，我们一起动手实践吧！

2.1、创建 HTML 结构

首先我们先创建卡片的基本结构，卡片包含图片、标题、介绍、作者相关信息元素，然后基于这些元素，通过CSS初始化默认的轮廓效果。HTML的结构比较简单，示例代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Content Placeholder</title>
  </head>
  <body>
    <div class="card">
      <div class="card-header animated-bg" id="header">&nbsp;</div>

      <div class="card-content">
        <h3 class="card-title animated-bg animated-bg-text" id="title">
          &nbsp;
        </h3>
        <p class="card-excerpt" id="excerpt">
          &nbsp;
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
        </p>
        <div class="author">
          <div class="profile-img animated-bg" id="profile_img">&nbsp;</div>
          <div class="author-info">
            <strong class="animated-bg animated-bg-text" id="name"
              >&nbsp;</strong
            >
            <small class="animated-bg animated-bg-text" id="date">&nbsp;</small>
          </div>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

在需要显示轮廓的地方，我们定义 animated-bg、animated-bg-text 样式，需要填充的内容我们现用符号进行占位，等JS拿到数据内容后，然后动过DOM相关的API进行内容的填充。

2.2、编写CSS代码

要实现轮廓预加载的背景渐变效果，animated-bg 的定义比较关键，这里我们使用颜色渐变创建灰色渐变，然后动态更改 background-position 的位置, 就有了线条的动画效果。具体的代码内容如下

* {
  box-sizing: border-box;
}

body {
  background-color: #ecf0f1;
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

img {
  max-width: 100%;
}

.card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  width: 350px;
}

.card-header {
  height: 200px;
}

.card-header img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.card-content {
  background-color: #fff;
  padding: 30px;
}

.card-title {
  height: 20px;
  margin: 0;
}

.card-excerpt {
  color: #777;
  margin: 10px 0 20px;
}

.author {
  display: flex;
}

.profile-img {
  border-radius: 50%;
  overflow: hidden;
  height: 40px;
  width: 40px;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  width: 100px;
}

.author-info small {
  color: #aaa;
  margin-top: 5px;
}

.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  animation: bgPos 1s linear infinite;
}

.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
}

@keyframesbgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

2.3、编写 JS 部分代码

最后我们来编写JS的部分，我们先定义数据填充方法 getData()，我们一般通过请求接口的方式进行数据填充，为了方便演示，这里我们直接定义数据变量替换 DOM 相关的内容，替换完后，移除背景的样式，最后通过 setTimeout 方法模拟接口的数据请求，调用我们刚才的 getData() 方法替换预加载的轮廓效果。思路就聊到这里，示例代码如下所示：

const header = document.getElementById('header')
const title = document.getElementById('title')
const excerpt = document.getElementById('excerpt')
const profile_img = document.getElementById('profile_img')
const name = document.getElementById('name')
const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')
const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

setTimeout(getData, 2500)

function getData() {
  header.innerHTML =
    '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'
  title.innerHTML = 'Lorem ipsum dolor sit amet'
  excerpt.innerHTML =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
  profile_img.innerHTML =
    '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'
  name.innerHTML = 'John Doe'
  date.innerHTML = 'Oct 08, 2020'

  animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
  animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
}

骨架屏图片卡片预加载效果到这里就完成了，是不是很简单呢，基于这个思路，你可以尝试做一下完整的骨架屏加载效果。