Главная > Анимация > Мобильный интернет: разработка анимации загрузки при помощи SVG

Мобильный интернет: разработка анимации загрузки при помощи SVG

17 января 2013, 13:55. Разместил: Design FactoRy

Подробности руководства:

Технология: мобильный интернет
Время на выполнение: 1 час
Сложность: средняя

* Скачать исходные файлы

Внимание! У вас нет прав для просмотра скрытого текста.

Данное руководство расскажет вам о разработке простой анимации загрузки при помощи SVG, которую можно будет использовать на мобильных сайтах. Визуальные индикаторы вроде этого графического элемента, над которым мы сегодня поработаем, используются для обозначения фоновой активности – и это важная составляющая опыта взаимодействия с пользователями.

Предварительные условия

В данном руководстве предполагается, что вы уже имеете базовые знания в Scalable Vector Graphics (SVG), HTML, CSS, javascript и jQuery. Тем не менее, содержимое статьи представлено в пошаговой манере, поэтому вы без труда все поймете.

Что насчет Raphael? В данном руководстве мы воспользуемся проектом Raphael для реализации рисования SVG. Процитируем официальный сайт проекта Raphael:

«Raphael использует рекомендации по SVG от W3C, а также VML в качестве основы для создания графики. Это означает, что каждый графический объект, который вы создаете, также является объектом DOM, поэтому у вас будет возможность привязать к нему контроллеры событий javascript, либо позже модифицировать их. Целью Raphael является предоставить переходное устройство, которое упросит процесс рисования векторной графики с кросс-браузерной совместимостью».

Чтобы использовать Raphael в вашем проекте, вам просто нужно проследовать по следующим этапам:

* Импортируйте библиотеку в вашу веб-страницу.
* Создайте объект Raphael, внеся id div-элемента там, где вы хотите отобразить SVG-элемент, следующим образом:

var paper = Raphael(divID, width, height);

Создайте необходимые вам элементы в только что добавленном объекте Raphael. Например:

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

Довольно теории! Давайте приступать к разработке кода!

Этап 1: Создаем страницу при помощи HTML

Давайте начнем разработку нашей первой демо-страницы на HTML. Она должна выглядеть следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Loading Spinner Example</title>
         <!-- CSS -->
        <link href="spinner/spinner.css" rel="stylesheet">
    </head>
    <body>
        <p>
            <a id="createSpinner" href="">Unleash</a> the power of the loading spinner.
        </p>
        <!-- SPINNER -->
        <div id="spinnerFullScreen">
            <div id="floater">
                <div id="spinner"></div>
            </div>
        </div>
        <!-- Placed at the end of the document so the pages load faster and without blocking -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"
type="text/javascript"></script>
        <script src="spinner/spinner.js" type="text/javascript"></script>
    </body>
</html>

Последнее, но не менее важное заключается в добавлении ссылки, по которой вы можете кликнуть, чтобы «начать» вращение анимационного элемента.

<a id="createSpinner">Unleash</a> the power of the loading spinner.

Этап 2: CSS-оформление

Теперь, когда наша разметка готова, нам нужно начать заполнять отсутствующие стили.

С точки зрения CSS, самый внешний div (id=”spinnerFullScreen”) должен быть черным, и занимать весь экран поверх всех элементов, которые не принадлежат к нашему анимационному элементу.

Два других div’а (id=”floater” и id=”spinner”) используют небольшой хак для правильного центрирования элемента вне зависимости от размеров экрана или расположения ползунка прокрутки. Мы не будем этого объяснять в сегодняшнем руководстве, так как здесь CSS относится лишь к самой странице, а цель нашего руководства заключается совсем в другом.

В самом конце, файл spinner.css будет выглядеть следующим образом:

#spinnerFullScreen {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: black;
    opacity: 0;
    z-index: 9999998;
}
#floater {
    display: table;
    width: 100%;
    height: 100%;
}
#spinner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    z-index:9999999;
}

Этап 3: Разработка функционала javascript

В теории, наш анимационный элемент состоит из конкретного количества отделений (в изображении их 8), у которых есть длина (“sectorLength”) и ширина (“sectorWidth”). Конечно же, эти сектора имеют некоторую отдаленность от центра (“centerRadius”).

Статичен ли он? Что же насчет анимации? Что же, анимация – это просто небольшой трюк: так как у нас у всех секторов уровень непрозрачности варьируется от 0.0 до 1.0, мы можем постепенно изменять параметр непрозрачности каждого сектора. Запутались? Другими словами, сектор будет становиться более прозрачным, как только вы увидите работу JS в действии.

Чтобы создать библиотеку с возможностью повторного использования, мы используем объектно-ориентированную парадигму, основанную на javascript. Библиотека создана вокруг конструктора (function Spinner(data)) и двух разных функций:

* create – при помощи переменных обстоятельств, определенных в конструкторе, она создает SVG-объект анимации и приводит его в движение.
* destroy – уничтожает SVG-объект анимации и скрывает полноэкранный просмотр.

В недавно созданном файле spinner.js мы сначала создаем контруктор анимационного объекта (нашей вертушки), позволяя пользователю библиотеки выставить какие-нибудь значения вроде числа секторов, дистанцию отдаления секторов от центра, и так далее.

/**
 * creates the object Spinner with data values or default values in the case they are missing
 * @param data
 * @constructor
 */
function Spinner(data) {
    //number of sectors of the spinner - default = 12
    this.sectorsCount = data.sectorsCount || 12;
    //the distance from each sector to the center - default = 70
    this.centerRadius = data.centerRadius || 70;
    //the length/height of each sector - default = 120
    this.sectorLength = data.sectorLength || 120;
    //the width of each sector of the spinner - default = 25
    this.sectorWidth = data.sectorWidth || 25;
    //color of the spinner - default = white
    this.color = data.color || 'white';
    //the opacity of the fullScreen
    this.fullScreenOpacity = data.fullScreenOpacity;
    //array of spinner sectors, each spinner is a svg path
    this.sectors = [];
    //array with the opacity of each sector
    this.opacity = [];
    //the raphael spinner object
    this.spinnerObject = null;
    //id of the timeout function for the rotating animation
    this.spinnerTick = null;
}

Теперь перейдем к самому большому методу объекта анимации, методу create. Этот метод запускается каждый раз, когда пользователь хочет отобразить вертушку. Обратите внимание на применение jQuery для выделения наших элементов. Именно здесь используются id, о которых мы говорили выше:

Spinner.prototype.create = function() {
    //shows the full screen spinner div
    $('#spinnerFullScreen').show();
    //animates the opacity of the full screen div containing the spinner from 0 to 0.8
    $('#spinnerFullScreen').animate({
        opacity: this.fullScreenOpacity
    }, 1000, function() {
    });

Продолжая работу уже с методом create, мы производим некоторые вычисления, вроде общего размера вертушки, подготавливаем объект Raphael к рисованию секций:

//center point of the canvas/spinner/raphael object
var spinnerCenter = this.centerRadius + this.sectorLength + this.sectorWidth;
//angle difference/step between each sector
var beta = 2 * Math.PI / this.sectorsCount;
//params for each sector/path (stroke-color, stroke-width, stroke-linecap)
var pathParams = {
    "stroke": this.color,
    "stroke-width": this.sectorWidth,
    "stroke-linecap": "round"
};
/**
 * creates the Raphael object with a width and a height
 * equals to the double of the spinner center
 * “spinner” is the id of the div where the elements will be drawn
 */
var paperSize = 2 * spinnerCenter;
this.spinnerObject = Raphael('spinner', paperSize, paperSize);

Далее производится рисование окружности, и создание массива с учетом текущего значения непрозрачности каждого сектора:

//builds the sectors and the respective opacity
for (var i = 0; i < this.sectorsCount; i++) {
    //angle of the current sector
    var alpha = beta * i;
    var cos = Math.cos(alpha);
    var sin = Math.sin(alpha);
    //opacity of the current sector
    this.opacity[i] = 1 / this.sectorsCount * i;
    /**
     * builds each sector, which in reality is a SVG path
     * note that Upper case letter means that the command is absolute,
     * lower case means relative to the current position.
     * (http://www.w3.org/TR/SVG/paths.html#PathData)
   * we move the "cursor" to the center of the spinner
   * and add the centerRadius to center to move to the beginning of each sector
     * and draws a line with length = sectorLength to the final point
     * (which takes into account the current drawing angle)
    */
    this.sectors[i] = this.spinnerObject.path([
        ["M", spinnerCenter + this.centerRadius * cos, spinnerCenter + this.centerRadius * sin],
        ["l", this.sectorLength * cos, this.sectorLength * sin]
    ]).attr(pathParams);
}

Теперь мы создали и отобразили нашу вертушку, и нам нужно оживить ее. Это и будет последней частью нашего метода create:

    /**
     * does an animation step and calls itself again
     * @param spinnerObject this param needs to be passed
     * because of scope changes when called through setTimeout function
     */
    (function animationStep(spinnerObject) {
        //shifts to the right the opacity of the sectors
        spinnerObject.opacity.unshift(spinnerObject.opacity.pop());
        //updates the opacity of the sectors
        for (var i = 0; i < spinnerObject.sectorsCount; i++) {
            spinnerObject.sectors[i].attr("opacity", spinnerObject.opacity[i]);
        }
        /**
         * safari browser helper
         * There is an inconvenient rendering bug in Safari (WebKit):
         * sometimes the rendering should be forced.
         * This method should help with dealing with this bug.
         * source: http://raphaeljs.com/reference.html#Paper.safari
         */
        spinnerObject.spinnerObject.safari();
        /**
         * calls the animation step again
         * it's called in each second, the number of sectors the spinner has.
         * So the spinner gives a round each second, independently the number of sectors it has
         * note: doesn't work on IE passing parameter with the settimeout function :(
         */
        spinnerObject.spinnerTick = setTimeout(animationStep, 1000 / spinnerObject.sectorsCount, spinnerObject);
    })(this);
};//end of the create method

Наконец, переходим к методу нашей вертушки destroy:

/**
 * destroys the spinner and hides the full screen div
 */
Spinner.prototype.destroy = function() {
    //stops the animation function
    clearTimeout(this.spinnerTick);
    //removes the Raphael spinner object
    this.spinnerObject.remove();
    this.spinnerObject = null;
    //animates the opacity of the div to 0 again and hides it (display:none) in the end
    $('#spinnerFullScreen').animate({
        opacity: 0
    }, 2000, function() {
        $('#spinnerFullScreen').hide();
    });
};

Этап 4: Раскрытие потенциала!

Так как код для вращения уже готов, мы переходим к привязке события к ссылке, чтобы при клике пользователя, с интервалом в 6 секунд отображалась наша вертушка. Лично мы используем асинхронный запрос к серверу, и когда запрос оканчивается, мы просто убираем вертушку.

Учтите, что этот код может быть использован только после загрузки всех библиотек, от которых зависит наш анимационный объект. Вы можете добавить этот код в конец файла spinner.js, либо в другой JS-файл, если вы хотите сохранить spinner.js независимым и с возможностью повторно использовать его в других проектах.

$(document).ready(function() {
    $('#createSpinner').click(unleashSpinner);
});
function unleashSpinner() {
    var data = {};
    data.centerRadius = 35;
    data.sectorLength = 50;
    data.sectorsCount = 10;
    data.sectorWidth = 20;
    data.color = 'white';
    data.fullScreenOpacity = 0.8;
    var spinner = new Spinner(data);
    spinner.create();
    setTimeout(function(){spinner.destroy();}, 6000);
    return false;
}

Мы можем повторно использовать переменную spinner сколько угодно раз.

Подытожим

Вертушка, представленная в данном руководстве, может быть использована не только в страницах, предназначенных для мобильных устройств, но также и в обычных веб-страницах. Мы уже испробовали оба подхода, и все работало прекрасно!

Чтобы проверить ваши знания, вы можете поработать над модернизацией этого анимационного элемента, а затем рассказать об этом нам и другим читателям в комментариях! Например, вы можете изменить формат/форму секций, поработать над движением анимации по и против часовой стрелки, либо позволить разработчикам использовать любой id для вертушки, чтобы избежать возможных повторений id.

На сегодня все! Надеемся, что вам понравилось сегодняшнее руководство!

Вернуться назад