概要

いつのまにか11月!
10月の4,5週目は以下のように行われた.

1. 자기소개 페이지 만들기 with HTML, CSS, JavaScript
2. 개인 프로젝트 관리자 페이지 만들기 with React, Node.js

その中で最も役に立つのはGSAPです
頭の中の絵を乞食のように表現する不快な感じがします.
GSAPのおかげで解除されたようです!
今日のポスターは1番自己紹介ページに書いてあります(?)Loading Trick

Loading Trick

これは自己紹介ページに適用されるロードページです.
いいえ.サーバに受信する必要のないデータは偽物ですが.😂
目を覆って昂!
Webサイトで、データベースの応答が遅延または遅延した場合、
Loading.... 最初に名前のページをレンダリングし、応答が完了したらホームページを表示します.
HTMLにはそれに関連するタグがあります.

ソース:https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress
たとえば...

<progress value='0' max='100' id='progress_bar'></progress>
 // html

gsap.to('#progress_bar',{value:'100', duration:3})
 // JS

これにより、0から100までのアニメーションを実現できます.
活躍もせず、個人的にはつまらないと思ったので、円で表現することにしました.

SVG Circle

SVGは、拡張可能ベクトルパターン、拡張可能ベクトルパターンである.
難しい説明は置いておきましょう.簡単に言えば、これは動的に変化する画像フォーマットです.
長方形を表す「rect」、楕円「楕円」、直線「line」などのマークがあります.
もちろん、ここに書いてあるラベルは「円」です.

HTML

<div>
  <svg class='circle_progress' width='120' height='120' viewBox='0 0 120 120'>
      <circle class="frame" cx="60" cy="60" r="54" stroke-width="12" />
          <circle class="bar" cx="60" cy="60" r="54" stroke-width="12" />
          <strong class='value'>0%</strong>
  </svg>
</div>

見慣れないラベルがたくさんありますが.
svgと円のラベルを共有しましょう.

<svg class='circle_progress' width='120' height='120' viewBox='0 0 120 120'>
	~
</svg>
	// SVG 도형은 <svg> 태그로 감싸야한다.
    	// 120의 너비, 120의 높이를 가진 svg 도형을 그릴 것이고
        // viewBox는 120*120의 svg 벡터 공간을 정의한다.

<circle class="frame" cx="60" cy="60" r="54" stroke-width="12" />
<circle class="bar" cx="60" cy="60" r="54" stroke-width="12" />
<strong class='value'>0%</strong>
	// 2개의 circle, %를 보여줄 강조 태그를 선언한다.
    	// cx : x 중심축, cy : y 중심축. viewBox가 120*120 이므로 60으로 설정한다.
        // r : 원의 반지름. 
        // stroke-width: 선의 굵기. 

特に何もありません.半径ごとに大体1枚撮って、自分の好きなものを記入しました.
stroke-widthは枠線の太さと考えられる.border-widthのように

CSS

SVGのバックグラウンドはCSS設定にあります.

.circle_progress { transform: rotate(-90deg); margin:0; }
	/// 1
.frame, .bar { fill: none; }
	/// 2
.frame { stroke: #e6e6e6; } // 옅은 회색
	/// 3
.bar {
  stroke: #03c75a;			// 청록색
  stroke-linecap: round;
}
	/// 4

.value{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:37%;
    text-align: center;
    line-height: 120px;
}
	/// 5

SVGでは、円は+90度の起点である.したがって、12時まで回転(-9 DEG)します.

fill:noneは、枠線のない空の円を描きます.

タッチは線の色です.これは枠線のbackgroundColorロールです.

ストローク-linecapは、直線の両端形状を表します.
a.お尻を末端からナイフのように切る.
b.roundはborder-radiusで終了する.
c.squareは線の端点を四角く終端する.

%のテキスト部分が表示されます.line-heightにより、親タグにタグが埋め込まれ、中央に位置合わせした後にtopが適切に与えられ、真ん中に見えるようにします.

JavaScript

まず、前処理から始めます.

1. 사전 작업
    a. GSAP Animation을 적용하기 위한 변수 선언 문단입니다.
    b. bar, value : animate가 실행될 element를 가져옵니다.
    c. RAD : 원의 반지름입니다.
    d. CIRCUMFERENCE : 원의 둘레입니다.
    e. strokeDasharray 
    	* svg에서 점선을 표시하는 속성.
        * stroke-dasharray='5,5' 라고 하면 5만큼의 길이로 반복될 점선 사이의 간격으로 5로 지정한다.
    f. strokeDashoffset
    	* svg에서 시작지점을 알립니다.

フレーム円のアトリビュートは指定されていません.
すなわち,フレーム円は薄い灰色のエッジ円となる.
JSを使用して青色barのoffset値を調整し、充填運動を実現します.

const CIRCUMFERENCE = 2* Math.PI * RAD;
bar.style.strokeDasharray = CIRCUMFERENCE;
bar.style.strokeDashoffset = 339.292;

私が任意に指定した円の幅は約339.92006587...に続く
多分339.292です.
もちろんMath床で計算できます
2つ目は状態変化検出です.
GSAPにはTextPluginというコンポーネントがあり、特定の条件に従って内部HTMLとCSSを変換することができます.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/TextPlugin.min.js"></script>
	// HTML CDN
    
var box = $("#redBox")
var tl = new TimelineLite()

tl.set(box, {text:"right"})
  .to(box, 2, {left:400})
  	// left:400을 통해 2초간 box element를 오른쪽으로 이동시킴.
    	// 오른쪽으로 이동되는 동안 innerHTML은 right로 표시된다.

同様の方法がありますが、ロードページは最終的に要素の状態に応じて%を変更します.
任意のn秒でどんな仕事をします!このような動作は私には向いていないと思います.
これがMutationObserverであることがわかりました.
MutationObserverは、開発者にDOM変更モニタリングを提供します.DOM 3イベント技術ドキュメントで定義されているマルチステーションイベントに置き換えます.
注意:https://developer.mozilla.org/ko/docs/Web/API/MutationObserver
animateを適用し、barのstrokeDashoffsetプロパティを339.92から0に変更しました.
すなわち、style要素が変更されます.

var observer = new MutationObserver(function(mutations){	// 1
    mutations.forEach(function(mutationRecord){			// 2
        value.innerHTML = Math.floor((Math.abs(Math.floor(bar.style.strokeDashoffset-340)/340))*100)+'%'
    								// 3
    })		
})


observer.observe(bar,{attributes:true,attributeFilter:['style']})	4

発表

MutationObserver.

forEach文を使用して、すべての要素を変更してコールバック関数を作成します.

が変更されるたびに、小数点の最初の四捨五入の割合が表示されます.
a.0～100%.

で宣言されたbar要素をparamとして配置し、スタイル要素の変更点を監視します.

後述するbarアニメーションは2秒間実行されます.
style要素はまた、2秒以内に突然変異が発生することを意味するので、実行点と終了点を考慮する必要はありません.
3つ目はasync/awaitタスクです.

const worker = async () =>{
	await gsap.to('.bar',{strokeDashoffset:0,duration:2})
        await gsap.to('.loadingDiv',{display:'none',autoAlpha:0,duration:1})
        await gsap.to('.rootDiv',{display:'block',autoAlpha:1, duration:1})
}

worker()

	// Loading Trick을 위한 Async / Await #3

barのStrokeDashoffsetを2秒から0に短縮します.

loadingDivは、ロードに関連する要素を組み合わせた親divです.
a.displayプロパティはnoneで、他のdivの位置がスムーズであることを確認します.
b.autoAlphaは、不透明度と同じgsapで使用されます.消えてゆく.

rootDivは、主なコンテンツを含む親divです.
a.display:“none”からdisplay:“block”に切り替えます.
b.autoAlpha:1で徐々に表示されます.

すべてのJavaScript.

const bar = document.querySelector('.bar')
const value = document.querySelector('.value')

const RAD = 54;

const CIRCUMFERENCE = 2* Math.PI * RAD;

bar.style.strokeDasharray = CIRCUMFERENCE;
bar.style.strokeDashoffset = 339.292;

	// 사전 작업 #1

// MutationObserver monitors attribute's status.

var observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutationRecord){
        value.innerHTML = Math.floor((Math.abs(Math.floor(bar.style.strokeDashoffset-340)/340))*100)+'%'
    })
})


observer.observe(bar,{attributes:true,attributeFilter:['style']})

	// DOM Element 상태 변화 체크 #2

const worker = async () =>{
	await gsap.to('.bar',{strokeDashoffset:0,duration:2})
        await gsap.to('.loadingDiv',{opacity:0,display:'none',autoAlpha:1,duration:1})
        await gsap.to('.rootDiv',{display:'block',autoAlpha:1, duration:1})
}

worker()

	// Loading Trick을 위한 Async / Await #3

の最後の部分

上を実現する過程で突然一つのものを思いついた.
後で煩雑なサーバ応答タスクがある場合は、async/awaitとMutationObserverを使用します.

const work1 = () =>{
	get first data....
    	if observer find mutations, gsap.to(value,{progress:33%})
const work2 = () =>{
	get second data....
    	if observer find mutations, gsap.to(value,{progress:66%})
}
const work3 = () =>{
	get final data....
    	if observer find mutations, gsap.to(value,{progress:99.9%})
}

const totalWork = async () =>{
	await work1()
    	await work2()
        await work3()
}
totalWork()
	// 작동되지 않는 유사 코드입니다.

これでLoadingbarを構成すればいいと思います
今は特にありませんが.
次の記事は「管理者」(Administrator)ページです.
Frontendは、GSAPと構成部品の分離を使用して、不要な完全な再レンダリングを阻止します.
Backendの主な内容はMongoDBでrefを用いて外部キーを実現することである.