如何从零开始建立一个Paytm加载效果

DebugUsery
115 阅读10分钟

从零开始构建一个Paytm加载效果

一个好的用户界面是由几个参数组成的。其中一个参数就是一个吸引人的加载效果。加载效果在移动和网络应用中都是至关重要的。

简介

当网速很好，网页内容很轻的时候，可能看不到好处；但是，在网页内容很重的情况下，优势可能会很明显，给用户界面带来最大的好处。

内容表

本文要求读者对以下工具和语言有一定的了解。

  • Django网页开发框架
  • 对HTML和CSS的良好理解
  • 一个代码编辑器，最理想的是Visual Studio Code

网站预加载器

预加载器是一种静态图片、动画或图形交换格式（GIF），通常在特定网页内容加载时显示在屏幕上。通常情况下，预加载器在向用户显示内容仍在加载而不是空白屏幕方面至关重要。

根据谷歌对提高网站速度的好处的研究，他们发现，如果一个网站的加载时间超过3秒，大约53%的网站用户会放弃该网站。当页面是空白的时候，这个问题就更严重了。因此，使用预加载器可以缓解这一问题。

预加载器的好处

虽然对大多数人来说，网站预加载器只是花哨的动画，使网站对用户友好，但这些工具在减少不可靠的网络造成的收入和与你的网站内容消费者发展有意义的关系方面是引人注目的。

此外，这些预加载器带来的用户体验增加了用户和网站的互动，并保持了网站的专业形象。网站的良好外观和感觉与加载器相结合，很可能会提高客户的等待门槛，直到页面内容被完全加载。

预加载器可以用来描绘公司的形象。当设计成适合公司的颜色、形状、动画和字母时，它可以作为一种品牌资产。它使公司或组织立即可被识别。

从加载旋转器过渡

最近，大多数网站都使用加载旋转器作为基本的网页预加载器。然而，根据苏莱曼-阿里（Suleiman Ali）在2017年的一篇文章，加载旋转器已经变得沉闷，并降低了应用程序的用户界面体验。此外，阿里认为，旋转器是停滞不前的，缺乏随着时间推移开发网站所需的创造力。

由于上述原因，大多数开发人员选择为他们的网站定制加载器。这些加载器很容易定制，以配合网站的主题颜色和外观。Paytm就是一个使用自定义预加载器的公司的例子。本文探讨了预加载器，并从头建立了一个模仿Paytm的预加载器。

文章概述

我们将使用Django框架来创建一个单页应用程序，在访问时显示加载器。该加载器将纯粹使用CSS构建。该动画将描述Paytm的加载动画，但在颜色上可能有所不同。

在从头开始构建加载器时，我们必须理解各种CSS概念和属性。了解和欣赏这些是创建现代和直观的CSS预加载器和动画的基础。

设置应用程序

导航到你想要的文件夹，然后使用下面的命令创建一个虚拟环境。

virtualenv venv

你应该注意，这个命令只有在你的电脑上安装并设置了virtualenv时才会执行。

使用下面的命令来激活虚拟环境，开始安装应用程序开发所需的依赖性。

source venv/bin/activate

一旦你的虚拟环境启动并运行，我们需要安装Django框架并构建应用程序。使用下面的命令来安装Django框架。

pip install Django

下一步是启动一个我们将要工作的项目。这个项目可以用开发者自己选择的任何名字来命名。当我们执行下面的命令时，Django会自动为我们创建这个项目。

Django-admin startproject paytm-loading

该命令创建了一个新的项目，其架构如下。

paytm-loading/
    manage.py
    paytm-loading/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

下一步是启动一个新的应用程序，我们将在此工作。在Django中，一个应用程序就像是整个项目的一个子组件。使用下面的命令来创建一个新的应用程序，名为loader 。

python manage.py startapp loader

新创建的应用程序应该有以下的文件夹组织。

loader/
    __pycache__
    migrations
    templates
    __init__.py
    admin.py
    apps.py
    models.py
    tests.py
    views.py

请务必将新安装的加载器应用程序添加到上述settings.py 文件中的已安装应用程序列表中。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'loader'
]

模板文件夹

每个Django应用程序都需要在应用程序的根目录下有一个templates 文件夹，其中存放着应用程序的所有视图文件。视图是在网页上为网站用户显示的组件。

下一步是设置访问的URL，以显示模板文件夹中的一个特定模板。在paytm-loading 文件夹中找到的urls.py 文件中，添加以下代码段，以允许将索引页作为应用程序的入口查看。

from Django.contrib import admin
from Django.URLs import path
from loader import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index,  name="index"),
]

在模板文件夹中，创建一个名为index.html 的新文件，其中将包含我们的HTML代码。然后前往views.py 文件，添加以下代码段。

from Django.shortcuts import render

# Create your views here.
def index(request):
    template = 'index.html'
    return render(request, template)

在静态文件上下功夫

Django中的静态文件是主要用于增强用户界面的文件，包括字体、CSS和JavaScript。这些文件构成了任何现代网站的基础。

鉴于Django在处理这些文件方面的灵活性，大多数开发者在处理静态文件时更喜欢Django。

在Django中处理静态文件时，将文件夹放在应用程序的根部是至关重要的，这样Django的所有子应用程序都可以访问该文件夹。

例如，我们将在应用程序的根目录下创建一个新的文件夹，并在我们的应用程序中把它命名为static 。

然后，在settings.py 文件中，添加下面的片段。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = '/static/'
MEDIA_URL = '/images/'

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

上面的片段显示，静态文件被存储在应用程序根文件夹的主URL中，这样任何子应用程序都可以访问其子文件夹和文件。

在这一点上，我们几乎已经完成了设置。我们需要将静态文件夹加载到我们的模板中，以便每个HTML文件可以访问static 文件夹中的文件。

由于我们只处理一个模板文件，我们将把它添加到index.html 文件中，如下所示。

{% load static %}

主模板文件

现在我们已经设置好了每一个组件，我们可以按照以下方式开始构建加载器。我们在index.html 文件中需要一个容器，以包含所有其他的组件。

我们有另一个div 元素，将各个 "弹跳球 "包裹起来，如Paytm的加载动画中所示。

我们有几个span 元素来组成 "球"。span元素将有最多的造型，因为它们构成了本文讨论的用户界面概念的基础。

最终的index.html 文件应该如下图所示。你可以用你的配置创建一个全新的文件，或者复制并粘贴以下代码片段到你的index.html 文件中。

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <title>Loading Animation</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

CSS样式设计的核心概念

这个加载效果教程主要是基于CSS的。为了很好地使用CSS，我们需要理解其中的概念，使CSS变得特别。以下是CSS概念的清单。

关键帧

根据开发者Mozilla组织的说法，关键帧是控制动画序列中的中间步骤的规则。它们控制动画动作的开始和结束点。它们告诉你某一帧的动作和它发生的时间。

关键帧用于高级的动画制作，在动画制作过程中，特定的属性需要在特定的实例中被改变。

当我们在关键帧规则内指定一个CSS样式时，动画将慢慢地从当前的样式改变并迁移到下面定义的样式。

CSS变换

CSS变换允许你沿着指定的维度改变一个元素的属性。一般来说，CSS变换会修改一个元素在网站窗口中的线性坐标。

变换的重要参数是旋转、平移、倾斜和缩放。然而，本教程的实施将只关注平移。

css中的第N个孩子

考虑一个给定元素中类似子元素的列表，例如<li></li> 元素。我们可能需要对一个单独的列表元素进行不同的样式。在这种情况下，我们使用:nth-child() 属性。它采用一个单一的样式，并将其应用于一个给定的列表中符合指定模式的所有元素。

样式的使用

在这一点上，你应该了解本教程中如何应用不同的组件。首先，我们需要创建一个CSS文件，并添加我们的CSS片段，以适当地设置网页的样式。

然后，在应用程序根目录下创建的静态文件夹中，创建一个名为CSS 的新文件夹，然后在CSS文件夹中创建另一个名为main.css 的文件。这里将是所有造型的脚本所在。

首先，我们指定主体元素的颜色。我更喜欢使用section.io的主题颜色。因此，在main.css 文件中，添加下面的片段来添加颜色。

body{
    background: #02a86b;
}

接下来，对网页中容纳其他每个元素的容器进行样式设计，并根据下面的代码段中指定的参数对其进行样式设计。

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

下一步是创建一个包装器，其中包含在屏幕上动画的圆点，以完成加载效果。这些点是通过让元素具有相同的高度和宽度来形成的，给它一个50%的边框-半径，使其成为圆形。

.box{
    position: relative;
    width: 120px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

span{
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    animation: effect 1s infinite linear alternate;
    transform: scale(0);    
}

我们使用infinite 属性，在页面不断被重新加载后对这些点进行动画处理。我们从0的比例开始，使用关键帧推进外观，如下所示。

@keyframes effect{
    0% {
        transform: scale(0.5);
    }

    50%{
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

为了确保每个点在每个场合都有不同的比例，我们使用上面讨论的nth child 属性。每个点在被逐渐缩放之前都有一个短暂的时间。

span:nth-child(1){
    animation-delay: .1s
}
span:nth-child(2){
    animation-delay: .3s
}
span:nth-child(3){
    animation-delay: .5s
}
span:nth-child(4){
    animation-delay: .7s
}
span:nth-child(5){
    animation-delay: .9s
}

你最终的加载器应该在造型结束后按照步骤启动和运行。注意，这个加载动画可以被修改，并在主要内容从数据库服务器获取之前用于实际网页。

总结

本教程是在实际网站上使用CSS的一个全面的开端。我们首先了解了使用加载动画的好处，以及当一个网站没有合适的动画时的风险程度。然后，我们讨论了如何从头开始建立一个加载动画效果，并牢记Paytm的效果。

我们研究了用于建立动画模型的CSS的各个方面，以及为有效工作所需的不同参数的变化。最后，我们通过在Django应用程序中实现动画来解决所有这些概念，Django是最流行的网络开发框架之一。

avatar
文章
阅读
粉丝