လျားချိန်တွင် ဆန့်ကျင်းခြင်း အကြောင်း

လျားချိန်တွင် ဆန့်ကျင်းခြင်း

တိုက်ရိုက် SVG နှင့် JavaScript ကို လျားချိန်တွင် ဆန့်ကျင်းခြင်း - သို့မဟုတ် အချိန် <path> အရာ:}}

အမှတ်

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// "triangle" အဖွဲ့အစည်း အား ရယူ လုပ်ကိုင် လုပ်ငန်း
var triangle = document.getElementById("triangle");
// <path> အကွက် အရွယ် နှင့် လုပ်ကိုင် လုပ်ငန်း
var length = triangle.getTotalLength();
// လုပ်ကိုင် စတင် နေရာ (အနောက်ခြေချိန် ပုံစံ ကို အစိတ်အစိတ် ပြုလုပ် ပါ။ အစိတ်အစိတ် ဖြင့် လက်ဆင့် ပုံ အား လက်ဆင့် ပုံ နှင့် အတူ လုပ်ကိုင် ပါ။
triangle.style.strokeDasharray = length;
/* အနောက်ခြေချိန် ခွဲခြား အချိန် ကို အစိတ်အစိတ် ပြုလုပ် ပါ။ အစိတ်အစိတ် ဖြင့် လက်ဆင့် ပုံ အား ပြသခြင်း ပြုလုပ် ပါ။
လှည့်ခြင်း အခါ ထို ခွဲခြား အချိန် အား အဆင့်ချိန် ပြုလုပ် ပြီး ပုံ ကို ပြသခြင်း ပြုလုပ်ပါ
အက်ယ် ဖြင့် လှည့်ခြင်း အခါ ဖြစ်စေ ထို ပုံ ကို ပြသခြင်း ပြုလုပ်ပါ
triangle.style.strokeDashoffset = length;
// ပေါ်ပေါ် လှည့်ခြင်း အခြုံ အား လေ့လာ လုပ်ကိုင် လုပ်ငန်း myFunction ကို ခေါ်ဆိုလုပ်ကိုင်ပါ
window.addEventListener("scroll", myFunction);
function myFunction() {
  // လှည့်ချိန် သတ်မှတ် လုပ်ကိုင် လုပ်ငန်း = (လက်ရှိ လှည့်ခြင်း အမြင်) / (စံပုံ အရွယ် အထိ လှည့်ခြင်း)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // ပြောင်းလဲခြင်း သတ်မှတ် လုပ်ကိုင် လုပ်ငန်း = စံပုံ အရွယ် * လှည့်ချိန်
  var draw = length * scrollpercent;
  // တိုင်းပြီး တော့ အပေါ်သို့ လှည့်ခြင်း အခါ အားလုံး မှ အမှား အထိ ကြိုးပမ်း လုပ်ကိုင် သည်။ ထို့ကြောင်းဖြင့် အပေါ်သို့ လှည့်ခြင်း အခါ အားလုံး မှ အမှား အထိ လုပ်ကိုင် သည်။
  triangle.style.strokeDashoffset = length - draw;
}

亲自试一试

相关页面

教程：SVG 教程