အားလုံးပဲ မင်္ဂလာပါခင်ဗျ။
ကျွန်တော်ကတော့ Spiceworks Myanmar Company တွင် Web Designer အဖြစ် ဝင်ရောက် အလုပ်လုပ်ကိုင်နေတဲ့ မောင်ကျော်စိုးနိုင် ဖြစ်ပါတယ်ခင်ဗျ။
ဒီတစ်ပတ်မှာတော့ sine-wave.js အသုံးပြုပုံနဲ့ ပတ်သက်ပြီး ကျွန်တော် လေ့လာမိသလောက် မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။
What is Sine-waves js?
Sine-wave.js ဆိုတာ canvas ကို အသုံးပြုပြီး sine-wave များစွာကို ဖန်တီး အသုံးပြုနိုင်သော javascript library တစ်ခုဖြစ်ပါတယ်။
Installation
Sine-wave.js ကို NPM ကနေတဆင့် install လုပ်ပြီး အသုံးပြုနိုင်ပါတယ်။
npm install sine-waves --save
နောက်ထပ်နည်းလမ်းတစ်ခုကတော့ NPM ကိုအသုံးမပြုဘဲ အောက်ပါ link ကနေတဆင့် ချိတ်ဆက်အသုံးပြုနိုင်ပါတယ်။
https://isuttell.github.io/sine-waves/javascripts/sine-waves.min.js
Easing Function
Sine-wave.js မှာ easing function (၄) မျိုး ရှိပါတယ်။
1.Linear
2.SineIn
3.SineOut
4.SineInOut
Default အနေဖြင့် Linear function ကို အသုံးပြုပြီး wave များကို left to right direction တစ်ခုအနေဖြင့်သတ်မှတ်ထားပါတယ်။
Wave types
Sine-wave.js မှာ wave types (၃)မျိုး ပါဝင်ပါတယ်။
1.Square
2.Sawtooth
3.Triangle တို့ဖြစ်ပါတယ်။
Wave Options
Wave တစ်ခုကို စတင်အသုံးပြုမည်ဆိုပါက wave မှာပါဝင်သော properties များကိုလည်း သိရှိဖို့လိုအပ်ပါတယ်။
1.TimeModifier
Wave တစ်ခုရဲ့ speed ကို သတ်မှတ်ပေးတဲ့ အခါမှာ timeModifier ကို အသုံးနိုင်ပါတယ်။
2.LineWidth
Wave တစ်ခုရဲ့ အထူ၊ အပါး stoke ကို သတ်မှတ်အသုံးပြုချင်တဲ့အခါမှာဆိုရင် lineWidth ကို အသုံးပြုဖို့လိုအပ်ပါတယ်။
3.Amplitude
Wave ရဲ့ အတက်အကျ သတ်မှတ်တဲ့အခါမှာဆိုရင် amplitude ကို အသုံးပြုရပါတယ်။
4.WaveLength
Wave တစ်ခုကို ဘယ်လောက် အရှည် အသုံးပြုချင်တဲ့အခါမှာဆိုရင် wave ရဲ့ width ကို သတ်မှတ်ဖို့အတွက် waveLength ကို အသုံးပြုဖို့လိုအပ်ပါတယ်။
5.Segment Length
Wave တစ်ခုမှာ segment များစွာထည့်ပြီး အသုံးပြုချင်တဲ့အခါမှာဆိုရင် segmentLength ကိုသတ်မှတ်ပေးဖို့ လိုအပ်ပါတယ်။
6.StrokeStyle
Wave တစ်ခုရဲ့ color ကို strokeStyle ဖြင့် သတ်မှတ်အသုံးပြုနိုင်ပါတယ်။
sinewave.js သတ်မှတ်ချက်တွေကို နားလည်ပြီဆိုရင် sine waves လေးတစ်ခုကို ရေးပြသွားမှာ ဖြစ်ပါတယ်။
Create Canvas
ပထမဆုံးအနေဖြင့် HTML file create လုပ်ပြီး body tag ထဲတွင် canvas တစ်ခုတည်ဆောက်ပါမည်။
နောက်ပြီး jquery နှင့် sine-waves.js ကို ဆက်လက်ချိတ်ပါမည်။
<!DOCTYPE html> <html> <head> <title> sine-wave js </title> </head> <body > <canvas id="waves"></canvas> <script src="http://code.jquery.com/jquery-1.11.1.min.js" > </script> <script src="sine-waves.js" > </script> </body> </html>
နောက်ထပ် script tag ထဲတွင် အောက်ပါအတိုင်း object ဆောက်ပြီး wave ကို create လုပ်သွားပါမည်။
$(function(){
var waves = new SineWaves({
el: document.getElementById('waves'),
width: function() {
return $(window).width();
},
height: function() {
return $(window).height();
},
speed: 5,
ease: 'SineInOut',
wavesWidth: '75%',
waves: [
{
timeModifier: 4,
lineWidth: 1,
amplitude: -150,
wavelength: 250
}
],
});
});
Wave တစ်ခုမှာ Color များစွာအသုံးပြုပြီး အရောင်စပ် ဖန်းတီးတဲ့အခါမှာဆိုရင် အောက်ပါအတိုင်း resizeEvent function ကိုအသုံးပြုပြီး ဖန်တီးနိုင်ပါတယ်။
resizeEvent: function() {
var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
gradient.addColorStop(1,"rgba(255, 255, 25, 0");
var index = -1;
var length = this.waves.length;
while(++index < length){
this.waves[index].strokeStyle = gradient;
}
Coding sample အားလုံးကိုတော့ အောက်ပါ codepen link ကနေတဆင့် ဝင်ရောက်လေ့လာနိုင်ပါတယ်။
Examples on Codepen
The Basics
Animated Borders
Rotate
Alternative Wave Types
အခုမှစလေ့လာမယ့် သူတွေအတွက် ဗဟုသုတတိုးပွားပြီး တစ်စုံတစ်ခုအကျိုးရှိမယ်လို့ မျှော်လင့်မိပါတယ်။
အချိန်ပေးပြီး ဖတ်ရှုပေးခဲ့ကြတဲ့အတွက် ကျေးဇူးတင်ပါတယ်ခင်ဗျ။
