دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

در طراحی تجربه کاربر ، ریزتعاملات لحظه های کوچکی از بازخورد هستند که به کاربر کمک می کند تا یک رابط را دنبال کند. غالباً در طراحی وب سایت ریزتعاملات با انیمیشن ظریف ساخته می شوند.
در این آموزش دکمه دانلود کاربردی با ریزتعاملات ایجاد خواهید کرد. برای اینکه این کار عملی شود ، ما از گذارها و انیمیشن های CSS به همراه کتابخانه انیمیشن کم حجم anime.js و segment.js برای انیمیشن های مسیر SVG استفاده خواهیم کرد.
در پایان آموزش ، دکمه دانلود مانند این را دریافت خواهیم کرد:

طراحی اصلی دکمه دانلود متعلق به Pedro Aquino است و در این عکس Dribbble می توان آن را یافت. کد کامل را می توانید در این مخزن Github پیدا کنید ، و در اینجا صفحه نسخه ی نمایشی آمده است.
مرحله 1 – ساخت ساختار HTML
بیایید کد HTML مورد استفاده را ببینیم:
<!– Button container –>
<div class=”download-button-container”>
<!– The real button –>
<button class=”download-button”>
<span class=”button-text-real hidden”>download</span>
<!– Extra elements to perform the animations –>
<span class=”button-icon”>
<span class=”button-linear-progress”>
<span class=”button-linear-progress-bar”></span>
</span>
<svg class=”button-icon-svg” viewBox=”0 0 60 60″>
<path class=”button-icon-path button-icon-path-square” d=”M 20 40 l 0 -20 l 20 0 l 0 20 Z”></path>
<path class=”button-icon-path button-icon-path-line” d=”M 40 20 l -20 20″></path>
</svg>
</span>
</button>
<!– Extra elements to perform the animations –>
<svg class=”border-svg” width=”240px” height=”100px” viewBox=”0 0 240 100″>
<path class=”border-path hidden” d=”M 40 3.5 a 36.5 36.5 0 0 0 -36.5 36.5 a 36.5 36.5 0 0 0 36.5 36.5 C 70 76.5 90 76.5 120 76.5 S 170 76.5 200 76.5 a 36.5 36.5 0 0 0 36.5 -36.5 a 36.5 36.5 0 0 0 -36.5 -36.5 Z”></path>
</svg>
<span class=”button-text button-text-download”>download</span>
<span class=”button-text button-text-done”>done!</span>
<div class=”button-wave”></div>
<div class=”button-progress-container”>
<svg class=”button-svg”>
<path class=”button-circular-progress” d=”M 50 50 m 0 -32.5 a 32.5 32.5 0 0 1 0 65 a 32.5 32.5 0 0 1 0 -65″></path>
</svg>
<span class=”button-ball”></span>
</div>
</div>

توجه به این نکته ضروری است که عناصر مسیر SVG به صورت دستی کشیده شده اند تا نتیجه مورد نظر خود را بگیریم. به عنوان مثال ، در بعضی از مواقع می خواهیم مرز دکمه دانلود حالت یک انیمیشن الاستیک را داشته باشد ، بنابراین به یک مسیر SVG نیاز داریم که برای آن انیمیشن مورفینگ با anime.js آماده باشد (همان ساختار در هر دو مسیر):

مرحله 2 – اضافه کردن سبک ها
با آماده شدن نشانه گذاری ، برای دکمه خود طرحی ایجاد کنید. لطفاً توجه داشته باشید که ما کل صفحه استایل را در اینجا نمی گنجانیم ، بلکه مهمترین بخش ها را آورده ایم. می توانید کل کد را در منبع Github پیدا کنید. برای درک بهتر، کد به طور کامل اظهار نظر شده است.
بیایید متغیرهای SCSS را که تعریف کرده ایم و کلاس ککی برای مخفی کردن عناصر را ببینیم:
// Some variables to use later
$button-width: 300px;
$button-height: 70px;
$button-border: 3px;
$icon-padding: 5px;
$icon-width: $button-height – ($icon-padding * 2);
$ball-width: 18px;

// Helper class to hide elements
.hidden {
visibility: hidden !important;
opacity: 0 !important;
}

سبک های عنصر دکمه واقعی به این شکل هستند:
// Real button styles
.download-button {
position: relative;
display: inline-block;
width: $button-width;
height: $button-height;
background-color: #2C2E2F;
border: none;
box-shadow: 0 0 0 $button-border #02D1FF; // This will be our ‘border’
border-radius: 100px;
cursor: pointer;
transition: 1s width, 0.3s box-shadow;

// Remove the custom behavior in some browsers
&, &:focus {
padding: 0;
outline: none;
}
&::-moz-focus-inner {
border: 0;
}

// Styles for the different states of the button
&:hover, &:active, &:focus {
box-shadow: 0 0 0 $button-border #02D1FF, 0 0 20px $button-border darken(#02D1FF, 20%);
}
}
دکمه ما می تواند در سه حالت مختلف باشد: downloading ، progressing و completed. بنابراین ما سبک های مورد نیاز برای هر ناحیه را با استفاده از ساختار زیر تعریف کرده ایم:
// Button container
.download-button-container {
// …CODE…

// Following are the different states for the button: downloading, progressing and completed
// We have defined the states in the container to have access to all descendants in CSS

// Downloading: The download button has been pressed
&.downloading {
// …CODE…
}

// Progressing: The progress starts
&.progressing {
// …CODE…
}

// Completed: The progress ends
&.completed {
// …CODE…
}
}

یکی دیگر از کد های جالب برای دستیابی به انیمیشن توپ پس از اتمام دانلود، استفاده می شود:
.button-ball {
left: 50%;
transition: none;
// CSS animations for the ball. All of them start at the same time, so we need to take care of delays
animation:
ball-throw-up 0.5s ease-out forwards, // Throw up the ball for 0.5s
ball-throw-down 0.5s 0.5s ease-in forwards, // Wait 0.5 seconds (throw up), and throw down the ball for 0.5s
ball-rubber 1s forwards; // Move the ball like a rubber deformation during 1s (throw up + throw down)
}

// Throw up animation
@keyframes ball-throw-up {
from {
transform: translate(-50%, 17.5px);
}
to {
transform: translate(-50%, -60px);
background-color: #00FF8D;
}
}

// Throw down animation
@keyframes ball-throw-down {
from {
transform: translate(-50%, -60px);
}
to {
transform: translate(-50%, 80px);
}
}

// Rubber animation
@keyframes ball-rubber {
from {
width: $ball-width;
}
25% {
width: $ball-width * 0.75;
}
50% {
width: $ball-width;
}
to {
width: $ball-width / 2;
}
}

تمام سبک های دیگر مورد استفاده را می توان در منبع Github یافت.
مرحله 3 – انیمیشن سازی با Javascript
برای کمک به انیمیشن سازی از هر دو کتابخانه کم حجم anime.js و segment.js استفاده خواهیم کرد.
لطفاً توجه داشته باشید که ما خاطر شفافیت ، برخی اعلامیه های متغیر را در قطعه کد زیر نمی گنجانیم. اگر شک دارید ، منبع Github را بررسی کنید.
در اینجا کد اصلی ما برای ثبت رویدادهای کلیک بر روی button و اجرای رفتار مورد نظر ما آورده شده است:
// Capture click events
button.addEventListener(‘click’, function () {
if (!completed) { // Don’t do anything if downloading has been completed
if (downloading) { // If it’s downloading, stop the download
stopDownload();
} else { // Start the download
startDownload();
}
}
});

// Start the download
function startDownload() {
// Update variables and CSS classes
downloading = true;
buttonContainer.classList.add(‘downloading’);
animateIcon();
// Update progress after 1s
progressTimer = setTimeout(function () {
buttonContainer.classList.add(‘progressing’);
animateProgress();
}, 1000);
}

// Stop the download
function stopDownload() {
// Update variables and CSS classes
downloading = false;
clearTimeout(progressTimer);
buttonContainer.classList.remove(‘downloading’);
buttonContainer.classList.remove(‘progressing’);
// Stop progress and draw icons back to initial state
stopProgress();
iconLine.draw(0, ‘100%’, 1, {easing: anime.easings[‘easeOutCubic’]});
iconSquare.draw(‘30%’, ‘70%’, 1, {easing: anime.easings[‘easeOutQuad’]});
}

پیشروی انیمیشن در نسخه ی نمایشی واقعی نیست. برای نمونه واقعی ، با داده های پیشرفت واقعی جایگزین خواهند شد. این تابعی است که پیشروی را انجام می دهد:
// Progress animation
function animateProgress() {
// Fake progress animation from 0 to 100%
// This should be replaced with real progress data (real progress percent instead ‘100%’), and maybe called multiple times
circularProgressBar.draw(0, ‘100%’, 2.5, {easing: anime.easings[‘easeInQuart’], update: updateProgress, callback: completedAnimation});
}

سرانجام ، در اینجا قطعه کد استفاده شده برای انجام انیمیشن سازی هنگام اتمام دانلود آورده شده است ، جایی که انیمیشن توپ آغاز می شود و عناصر مسیر را اصلاح می کنیم.
// Animation performed when download has been completed
function completedAnimation() {
// Update variables and CSS classes
completed = true;
buttonContainer.classList.add(‘completed’);
// Wait 1s for the ball animation
setTimeout(function () {
button.classList.add(‘button-hidden’);
ball.classList.add(‘hidden’);
borderPath.classList.remove(‘hidden’);
// Morphing the path to the second shape
var morph = anime({
targets: borderPath,
d: ‘M 40 3.5 a 36.5 36.5 0 0 0 -36.5 36.5 a 36.5 36.5 0 0 0 10.5 26.5 C 35 86.5 90 91.5 120 91.5 S 205 86.5 226 66.5 a 36.5 36.5 0 0 0 10.5 -26.5 a 36.5 36.5 0 0 0 -36.5 -36.5 Z’,
duration: 100,
easing: ‘linear’,
complete: function () {
// Morphing the path back to the original shape with elasticity
morph = anime({
targets: borderPath,
d: ‘M 40 3.5 a 36.5 36.5 0 0 0 -36.5 36.5 a 36.5 36.5 0 0 0 36.5 36.5 C 70 76.5 90 76.5 120 76.5 S 170 76.5 200 76.5 a 36.5 36.5 0 0 0 36.5 -36.5 a 36.5 36.5 0 0 0 -36.5 -36.5 Z’,
duration: 1000,
elasticity: 600,
complete: function () {
// Update variables and CSS classes, and return the button to the original state
completed = false;
setTimeout(function () {
buttonContainer.classList.remove(‘completed’);
button.classList.remove(‘button-hidden’);
ball.classList.remove(‘hidden’);
borderPath.classList.add(‘hidden’);
stopDownload();
}, 500);
}
});
}
});
}, 1000);
}

نتیجه
این مقاله قسمتهای اصلی کد مورد استفاده در ساخت این دکمه دانلود را نشان می دهد:

می توانید با DEMO زنده آن را پخش کنید ، یا کد کامل را در Github دریافت کنید. لطفاً توجه داشته باشید که این مؤلفه برای تولید کاملاً نیست ، زیرا به داده های پیشرفت واقعی و برخی ملاحظات در مورد چگونگی تأثیر بر روی ریزتعاملات نیاز دارد.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade