GSAP Trick/TIL ~11.01 #1
18317 ワード
概要
いつのまにか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
1. 자기소개 페이지 만들기 with HTML, CSS, JavaScript
2. 개인 프로젝트 관리자 페이지 만들기 with React, Node.js
<progress value='0' max='100' id='progress_bar'></progress>
// html
gsap.to('#progress_bar',{value:'100', duration:3})
// JS
<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 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: 선의 굵기.
.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
a.お尻を末端からナイフのように切る.
b.roundはborder-radiusで終了する.
c.squareは線の端点を四角く終端する.
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
発表a.0~100%.
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
a.displayプロパティはnoneで、他のdivの位置がスムーズであることを確認します.
b.autoAlphaは、不透明度と同じgsapで使用されます.消えてゆく.
a.display:“none”からdisplay:“block”に切り替えます.
b.autoAlpha:1で徐々に表示されます.
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を用いて外部キーを実現することである.
Reference
この問題について(GSAP Trick/TIL ~11.01 #1), 我々は、より多くの情報をここで見つけました
https://velog.io/@leitmotif/GSAP-Trick-TIL-11.01
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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()
// 작동되지 않는 유사 코드입니다.
Reference
この問題について(GSAP Trick/TIL ~11.01 #1), 我々は、より多くの情報をここで見つけました https://velog.io/@leitmotif/GSAP-Trick-TIL-11.01テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol