Vue IOS 기본loading

문서 목록

앞말

효과도

리소스 주소

설치

원리해석

html 소스

scss 소스

해석

전언
웹 쪽이든 app 쪽이든 페이지에서 네트워크 자원을 요청하거나 시간이 많이 걸리는 작업을 수행할 때 불러오는 상태를 보여서 더 좋은 사용자 체험을 해야 한다.본고는 주로 Vue를 바탕으로 IOS 기본 Loading 효과의 실현 원리를 설명한다.
효과도
자원 주소
1. 데모 주소(gitee) 2.데모 주소Github 코드 주소
설치하다.

npm 설치plain-loading

npm i plain-loading -S

plain-loading

import Vue from 'vue'
import PlainLoading from 'plain-loading'
import 'plain-loading/dist/PlainLoading.css'

Vue.use(PlainLoading)

<pl-loading/>

사용

더 많은 사용 방식은 다음과 같다:npm

원리 해석
html 원본 코드

<template>
    <div class="pl-loading-alpha" :class="[`pl-loading-alpha-color-${color}`]">
        <span class="pl-loading-alpha-tag"><span class="pl-loading-tag" v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="i">span>span>
    div>
template>

scss 소스

.pl-loading-alpha {
        display: inline-block;
        vertical-align: middle;
        $size: plVar(icon-size);
        height: $size;
        width: $size;

        .pl-loading-alpha-tag {
            $centerRadius: (0.5*$size)/1.2;
            $itemWidth: (0.35*$size)/1.2;
            $itemHeight: (0.1*$size)/1.2;
            $width: $centerRadius + $itemWidth * 2;
            $height: $width;

            width: $width;
            height: $height;
            position: relative;
            display: block;

            .pl-loading-tag {
                display: inline-block;
                width: $itemWidth;
                height: $itemHeight;
                margin-top: $itemHeight / 2 * -1;
                margin-left: $centerRadius / 2;
                top: 50%;
                left: 50%;
                position: absolute;
                transform-origin: ($centerRadius / 2 * -1) ($itemHeight / 2);
                border-radius: 1px;
                @for $i from 1 through 12 {
                    &:nth-child(#{$i}) {
                        transform: rotate(($i - 1) * 30deg);
                        animation: pl-loading-alpha-tag 1s linear infinite #{-1 + $i / 12}s;
                    }
                }
                @keyframes pl-loading-alpha-tag {
                    0% {
                        opacity: 1;
                    }
                    @for $i from 1 through 11 {
                        #{$i / 12 * 100}% {
                            opacity: 1 - $i / 12;
                        }
                    }
                    100% {
                        opacity: 1;
                    }
                }
            }
        }

        @include pl-colors(pl-loading-alpha) {
            .pl-loading-tag {
                background-color: $colorDeep;
            }
        }

        &.pl-loading-alpha-color-white {
            .pl-loading-tag {
                background-color: white;
            }
        }
    }

해석

먼저 부원소가pl-loading-alpha-tag가 있어야 하고 이 부원소 노드에서 12개의 부원소를 만들어야 한다.

부원소의 상대적 포지셔닝, 부원소의 절대적 포지셔닝은 top,margin-top,left와margin-left를 설정하여 부원소의 위치를 조정한다. 이때 모든 부원소의 위치는 같은 위치이고 중첩된다.

서브 요소를 설정하는transform-origin은 다음과 같다. (c e n t e r r a d i us/2 ∗-1)(center Radius/2 *-1)(center Radius/2 ∗-1)(item Height/2) 이 위치는 부모 요소의 중간 위치이고 각 서브 요소의 회전 각도를 순서대로 설정하면 모든 서브 요소가 흩어져 꽃 모양으로 변한다.

투명도 변화 애니메이션 설정:

@keyframes pl-loading-alpha-tag {
    0% {
        opacity: 1;
    }
    @for $i from 1 through 11 {
        #{$i / 12 * 100}% {
            opacity: 1 - $i / 12;
        }
    }
    100% {
        opacity: 1;
    }
}

모든 하위 요소가 이 애니메이션을 사용하도록 설정하지만 각 하위 요소의 애니메이션은 일정한 지연이 있다. 번호가 클수록 하위 요소의 지연이 크다.

@for $i from 1 through 12 {
     &:nth-child(#{$i}) {
         transform: rotate(($i - 1) * 30deg);
         animation: pl-loading-alpha-tag 1s linear infinite #{-1 + $i / 12}s;
     }
 }

Vue IOS 기본loading

좋은 웹페이지 즐겨찾기