Пресъздаване на Ripple Effect част от Google Design

Bulgarian (Български) translation by Mihail Petrov (you can also view the original English article)

Final product image — What You'll Be Creating

Основна тема на разговорите последно време е новият подход на Google към дизайна. Но вместо да говорим за теорията зад концепцията Material Design, ще се съсредоточим върху някой интересни техники които компанията е имплементирала в дизайна на началната страница на технологията, която ни представиха.

Когато потребителите натиснат някой от блоковете пред тях, се наблюдава изпълване на пространството посредством векторен кръг. Google нарича този ефект touch ripple, а ние ще се опитаме да го пресъздадем с помощта на JQuery, HTML и CSS.

Скелет на приложението

Преди да започнем работа ни е необходимо да създадем прост скелет, под формата на мрежа без помощта на никакви външни библиотеки.

<div class="row">
    <div class="col col-1-3 blue"></div>
  <div class="col col-1-3 orange"></div>
  <div class="col col-1-3 green"></div>
</div>
<div class="row">
  <div class="col col-1-2 gray"></div>
  <div class="col col-1-2 blue"></div>
</div>
<div class="row">
  <div class="col col-1-4 orange"></div>
  <div class="col col-1-2 green"></div>
  <div class="col col-1-4 blue"></div>
</div>

В имената на класовете, с тире са отразени дробните размери на колоните на мрежата ( 1-3 => 1/3 ).

Основни стилове

Следващата стъпка е да напишем кода за класовете на колоните. За целта ще ползваме LESS, който ни дава възможност да влагаме стиловете един в друг, както и да използваме оператора &. Няма да навлизаме в подробности касаещи LESS, но въпреки това че обясним значението на оператора &. Преди това вижте кода за класовете на колоните.

.col {
  position: relative;
  display: block;
  float: left;
  margin: 1.25%;
  background-color: #444;
  color: #fff;
  padding: 100px;
  box-sizing: border-box;
  &.orange {
    background-color: #EF8130;
  }
  &.blue {
    background-color: #00ADE2;
  }
  &.gray {
    background-color: #444;
  }
  &.green {
    background-color: #76CE51;
  }
  &-1- {
    &2 {
      width: 47.5%;
    }
    &3 {
      width: 30.8333%;
    }
    &4 {
      width: 22.5%;
    }
  }
}

Оператора &, долепя името на родителският елемент към името на вложеният елемент. Следващият пример илюстрира действието на оператора.

1	.col {
2	&-1 {
3	&-3 {
4	color: #fff;
5	}
6	}
7	}

Ще бъде компилиран до следният код:

1	.col-1-3 { color: #fff; }

Както и този код

&.col {
    &.orange {
    background-color: #EF8130;
  }
}

Ще доведе до следният резултат

1	.col.orange {
2	background-color: #EF8130;
3	}

Ако искате да научите повече за технологията LESS, можете да почерпите повече информация от следните уроци.

Как работи векторната графика (SVG)

Нека сега обясним по какъв начин ще създадем ефекта със запълване на блока при натискане на бутона на мишката. Въпроса е да разберем как да създадем векторен кръг в рамките на натиснатият блок.

Когато потребителя натисне блока, е необходимо да изчислим разстоянието от курсора до краищата на блока, в който се намираме. След това ще ползваме намерените координати за да изчертаем кръг. Векторният елемент ще бъде позициониран с абсолютни координати в рамките на блока, докато той самият ще бъде позициониран релативно спрямо елемента. За целта ще ползваме SVG елемента #, както и няколко jQuery функции които ще ни помогнат с анимацията.

Първата ни работа е да създадем стилови правила за векторните елементи.

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
circle {
  fill: rgba(255,255,255,0.1);
}

За запълване на кръга, използваме алфа канала(прозрачност), даден ни от свойството RGBa, като дефинираме стойност на прозрачност в рамките на 10%.

JavaScript кода

Ще дефинираме слушател за събитието, щракване с мишката върху елемент с клас .col . След това ще вземем релативната позиция на елемент спрямо документа.

Улавяне позицията на мишката

Позицията на мишката е относителна спрямо блока. За да вземем координатите на горният ляв ъгъл използваме метода $(this).offset().

$(".col").on("click", function(e){
      var x = e.pageX;
    var y = e.pageY;
    var clickY = y - $(this).offset().top;
    var clickX = x - $(this).offset().left;
    var box = this;
    // ...
});

Забележка: В рамките на примерите ползваме библиотеката jQuery.

Конвертираме стойностите на променливите clickX и clickY, в целочислени стойности, като така избягваме несъответствия при визуализирането на ефекта в различни браузъри.

1	var setX = parseInt(clickX);
2	var setY = parseInt(clickY);

Премахване на съществуващите векторни елементи.

Налага се да премахнем всички съществуващи SVG елементи които съществуват в рамките на блока върху който щракаме. Ако смятате да добавяте векторно съдържание в рамките на блока, е добре да ползвате метод като jQuery's.not(), в комбинация с някакъв клас, като по този начин гарантирате, че няма да премахнете точно този специфичен елемент.

1	$(this).find("svg").remove();

Добавяне на новият векторен елемент

Следва да добавим векторният елемент, като подадем текстово съдържание на функцията:

1	$(this).append('<svg><circle cx="'+setX+'" cy="'+setY+'" r="'+0+'"></circle></svg>');

Полетата setX и setY, определят центъра на векторният кръг, точно там където активираме щракването с мишката.

Анимация

Остава да анимираме, радиуса на кръга с помощта на jQuery функцията animate. На всяка стъпка се налага да извикаме метод, които ще се погрижи за промяна на радиуса на елемента.

var c = $(box).find("circle");
c.animate(
  {
    "r" : $(box).outerWidth()
  },
  {
    easing: "easeOutQuad",
    duration: 400,
       step : function(val){
      c.attr("r", val);
    }
  }
);

Не забравяйте че елемента box, беше дефиниран по рано. В рамките на този код, използваме изинга(""easeOutQuad"") на jQuery .

Завършеният код

Завършеният вид на кода изглежда така:

$(".col").on("click", function(e){
    var x = e.pageX;
  var y = e.pageY;
  var clickY = y - $(this).offset().top;
  var clickX = x - $(this).offset().left;
  var box = this;
  
  var setX = parseInt(clickX);
  var setY = parseInt(clickY);
  $(this).find("svg").remove();
  $(this).append('<svg><circle cx="'+setX+'" cy="'+setY+'" r="'+0+'"></circle></svg>');
  

  var c = $(box).find("circle");
  c.animate(
    {
      "r" : $(box).outerWidth()
    },
    {
      easing: "easeOutQuad",
      duration: 400,
      step : function(val){
        c.attr("r", val);
      }
    }
  );
});

Заключение

Ефекта, който ви показах може да намери множество приложения различни от демонстрираното. Например можете да идентифицирате позицията, върху която е щракнал потребителя в рамките на произволно изображение, което от своя страна може да създаде ефект на изскачащ прозорец за коментари. Приложенията са наистина много, помислете какви бихте предложили вие.