搜索

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

前端达人

共 11214字，需浏览 23分钟

 ·

2021-08-15 23:36


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

一、三角板 Loading 效果

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


基于以上动图效果，如何实现呢？

  • 基于 CSS 的方式通过 DIV 的 border 属性绘制两个顶角向上图形重合的正三角形
  • 然后顺时针旋转其中一个三角形，让其相差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 ！

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


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

  • 首先我们先用 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 样式，需要填充的内容我们现用  &nbsp; 符号进行占位，等JS拿到数据内容后，然后动过DOM 相关的API进行内容的填充。

2.2、编写CSS代码

要实现轮廓预加载的背景渐变效果，animated-bg 的定义比较关键，这里我们使用颜色渐变创建灰色线性渐变的背景，然后 CSS 帧动画属性动态更改 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'))
}

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

三、结束语

到这里，这两个案例就完成了，如果你想体验本案例的效果，可以点击阅读原文体验，如果你想获取本案例源码，请关注“前端达人”公众号，回复“a3”。感谢你的阅读。

相关阅读

手写原生代码专题 | 图片拖拽效果（一）

手写原生代码专题 | 简易手写画板（二）

浏览 47
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
【CSS】骨架屏 Skeleton 效果
前端技术江湖
0
loading-cli命令行 loading 效果
命令行loading效果。安装$ npm install --save loading-cli使用const loading =  require('loading-cli');const load 
loading-cli命令行 loading 效果
0
SSStackedPageView卡片视图效果
SSStackedPageView 实现类似PassbookApp的卡片视图效果。多个视图类似卡片的样式重叠排列在一起，用手往上拖动（或者点击）其中一个视图，该视图会从众多卡片视图中冒出，成为主视图。
SSStackedPageView卡片视图效果
0
loading-cli命令行 loading 效果
命令行loading效果。安装$ npm install --save loading-cli使用c
loading-cli命令行 loading 效果
0
SSStackedPageView卡片视图效果
SSStackedPageView 实现类似 Passbook App 的卡片视图效果。多个视图类似
SSStackedPageView卡片视图效果
0
YISplashScreen启动加载屏的动画效果
YISplashScreen 可帮你轻松实现应用启动加载屏的动画效果。
YISplashScreen启动加载屏的动画效果
0
YISplashScreen启动加载屏的动画效果
YISplashScreen可帮你轻松实现应用启动加载屏的动画效果。
YISplashScreen启动加载屏的动画效果
0
YLActivityIndicatorView加载效果控件
YLActivityIndicatorView 实现了类似 Facebook web 上那种正在加载
YLActivityIndicatorView加载效果控件
0
自定义照相机和图片滤镜效果
自定义照相机界面功能，以及图片滤镜效果，包括十几种常用的滤镜效果。 [Code4App.com]
自定义照相机和图片滤镜效果
0
Loaders.cssCSS 动画加载效果
Loaders.css是一个为性能优化的实现加载动画效果的CSS框架。
Loaders.cssCSS 动画加载效果
0
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报