لطفا صبر کنید ...

رسم و متحرک سازی اشکال ژله ای با Canvas

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 343
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در سال‌های اخیر مشاهده می‌کنیم که وب دیگر صفحه‌ای مملو از اشکال مربعی در یک مرورگر نیست. در این مقاله از لیداوب به نحوه ایجاد و متحرک سازی اشکال با افکت jelly یا ژله‌ای در css می‌پردازیم.


رسم و متحرک سازی اشکال ژله ای با Canvas

قواعد ریاضی دخیل در این افکت بسیار پیچیده هستند. به همین دلیل، ما سعی کردیم کدهای مورد نیاز برای ایجاد و متحرک سازی اشکال ژله‌ای را در یک کتابخانه به صورت گروه بندی ایجاد کنیم تا استفاده از آن برای برنامه نویسان ساده‌تر باشد. پیاده سازی این کار در کتابخانه‌ای به صورت یک پکیج درآمده که نام آن jelly.js است و هر آنچه که برای ایجاد اشکال ژله‌ای نیاز داریم به آن اضافه اضافه شده است.

رسم و متحرک سازی اشکال ژله ای با Canvas

ایجاد اشکال با path SVG

ما path SVG را برای ایجاد اشکال انتخاب کردیم چون این راحت‌ترین و قابل تغییر‌ترین روش برای انجام این کار است. در این روش ما می‌توانیم اشکالی که می‌خواهیم را در یک ویرایشگر وکتور (مثل Inkscape یا Illustrator) ایجاد کرده و آن‌ها را مستقیما به سند HTML خود وارد کنیم یا حتی آن‌ها را از جاوا اسکریپت ایمپورت کنیم. برای مثال، می‌توانیم شکل ساده‌ای مانند این را رسم کنیم:

رسم و متحرک سازی اشکال ژله ای با Canvas

سپس، می‌توانیم کد SVG مربوط به آن را مستقیما در کد HTML بگنجانیم:

<!-- SVG with a pentagon path -->
<!-- Note the `display: none` style, because we don't want to show the SVG, but just get the path from JavaScript -->
<svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="400" height="400" style="display: none">
    <path id="pentagon-path" d="m200 97.218 108.07 78.524-41.28 127.04h-133.58l-41.281-127.04z"/>
</svg>

ایجاد Markup

ما به یک canvas برای رسم اشکال و چند المان دیگر با هدف حرکت دادن یک حرف، منطبق با نقطه کانونی شکل هم نیاز داریم:

<div class="jelly-container">
    <!-- Canvas to draw the jelly pentagon -->
    <canvas class="jelly-canvas"></canvas>

    <!-- Text in the centroid of the jelly pentagon -->
    <div class="centroid-container">
        <div class="centroid-text">S</div>
    </div>
</div>

در این مثال ما به استایل کمی نیاز داریم که کد آن در اینجا قرار دارد:

/* General styles */

html, body {
  margin: 0;
}

body {
  background-color: #D98327;
  overflow: hidden;
}


/* Jelly styles */

.jelly-container {
  position: relative;
  display: inline-block;
  left: 50%;
  margin-left: -200px;
}

.jelly-container, .jelly-canvas {
  width: 400px;
  height: 400px;
}

/* It's important to position the `.centroid-container` in the top-left corner
   This way the `.centroid-text` will be positioned in the center (with JavaScript) */
.centroid-container {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.centroid-text {
  font-size: 100px;
  color: white;
}

ژله ای کردن شکل

در این قسمت، می‌خواهیم پنج ضلعی را روی canvas رسم کرده و ببینیم چگونه می‌توانیم آن را به صورت یک شکل ژله و متحرک درآوریم. نگران نباشید، با استفاده از کتابخانه‌ای که ایجاد کردیم این کار بسیار ساده است. فقط به چند خط کد برای رسم پنج ضلعی و عکس العمل نشان دادن آن به صورت ژله‌ای در زمان حرکت ماوس روی لبه‌های شکل نیاز داریم:

/* Setup options */

var options = {
    paths: '#pentagon-path',     // Shape we want to draw
    pointsNumber: 10,            // Number of points
    maxDistance: 70,             // Max distance among points
    color: '#5C1523',
    centroid: '.centroid-text'   // Element to move accordingly with the centroid of the shape
    // debug: true               // Uncomment this to see the points
};

/* Initializing jelly */

var jelly = new Jelly('.jelly-canvas', options);

توجه داشته باشید که ساختار کتابخانه ما jelly  از یک المان canvas و چند ایده تشکیل شده است. می‌توانیم برای هر شکلی که رسم می‌کنیم، یک مجموعه از ایده‌ها را داشته باشیم.

پیاده سازی عمل Drag کردن ژله ای

برای نشان دادن ایده‌های بیشتر و سرگرم کننده‌تر، می‌خواهیم ببینیم چگونه می‌توانیم پنج ضلعی را در حین drag کردن آن در نقاط مختلف صفحه، بلرزانیم. ابتدا، باید بدانیم چه زمانی موس در داخل شکل قرار دارد تا عمل drag کردن فقط در آن زمان انجام شود. کد زیر این کار را انجام می‌دهد:

/* Check hover item (shape) and update cursor */

var container = document.querySelector('.jelly-container');
var hoverIndex = -1;

function checkHover() {
    // The `getHoverIndex` function will return the index of the shape being hovered, or -1
    hoverIndex = jelly.getHoverIndex();
    container.style.cursor = hoverIndex === -1 ? 'default' : 'pointer';
    window.requestAnimationFrame(checkHover);
}
window.requestAnimationFrame(checkHover);

حالا می‌خواهیم ببینیم چطور یک drag ساده را پیاده سازی کنیم. لطفا برای درک آنچه که رخ می‌دهد به کامنت‌ها توجه کرده و توجه ویژ‌ه‌ای به تابع shake داشته باشید:

/* Drag and drop */

var startX, startY, dx, dy, endX = 0, endY = 0, x = 0, y = 0, lastX = 0, lastY = 0;
var down = false;
// This will be the max distance for shaking
var shakeLimit = 5;

container.addEventListener('mousedown', function (e) {
    if (hoverIndex >= 0) {
        startX = e.clientX;
        startY = e.clientY;
        down = true;
    }
});

document.addEventListener('mousemove', function (e) {
    if (down) {
        x = e.clientX - startX;
        y = e.clientY - startY;
        container.style.transform = 'translate(' + (endX + x) + 'px, ' + (endY + y) + 'px)';

        dx = x - lastX;
        dy = y - lastY;
        if (dx > shakeLimit || dx < - shakeLimit) dx = dx < 0 ? - shakeLimit : shakeLimit;
        if (dy > shakeLimit || dy < - shakeLimit) dy = dy < 0 ? - shakeLimit : shakeLimit;

        // The `shake` function will "move" the half of the points (alternately) the distance defined
        jelly.shake({x: - dx, y: - dy});

        lastX = x;
        lastY = y;
    }
});

function mouseUp() {
    if (down) {
        down = false;
        endX += x;
        endY += y;
    }
}

document.addEventListener('mouseup', mouseUp);

document.addEventListener('mouseout', function (e) {
    if (e.target.nodeName == 'HTML') {
        mouseUp();
    }
});

عملکرد و پشتیبانی مرورگر

پشتیبانی مرورگر برای این کار بسیار خوب است چون تمام مرورگرهای مدرن از canvas پشتیبانی می‌کنند اما jelly.js از Promises استفاده می‌کند. بنابراین، ما برای هر مرورگری که از promiseهای native استفاده نمی‌کند نیاز به یک polyfill داریم. از سوی دیگر عملکرد با توجه به مرورگرها و سیستم عامل، بسیار متغیر است. علت آن هم کار زیاد CPU در هر یک از فریم‌های انیمیشن است. بنابراین، در استفاده از این افکت زیاده‌روی نکنید چون کارایی وب سایت شما را به شدت کاهش می‌دهد.

مطالعه مقالات بیشتر در لیداوب:

می‌توانید در لیداوب، سایر مقالات کاربردی CSS و طراحی سایت را دنبال کنید.

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.