Морфинг иконки внутри кнопки svg

#javascript #html #css #svg #анимация

Интересно было бы использовать тему плавного морфинга, то есть изменения контуров
одной фигуры в контуры другой фигуры в svg кнопках.
Дизайн следующий. В начальном состоянии кнопка имеет иконку - желтая звездочка слева
и надпись "Сохранить"         

   

При нажатии на кнопку происходит плавный морфинг звездочки в зеленый чекбокс и надпись
"Сохранить" меняется на надпись "Сохранено!"          

   

Понятно, что плавный морфинг достигается изменением координат узловых точек одной
фигуры на координаты узловых точек другой фигуры. Я знаю, что для реализации этого
должно быть выполнено главное условие - количество узловых точек в обоих фигурах должно
быть одинаковым. И пути (патчи) не должны иметь разрывов.   

Пример иконки звёздочки 








Пример иконки чекбокса







    

Ответы

Ответ 1

Немного ответ не по вопросу, а более общий про svg вообще. 

По какой-то причине разработчики брезгают руками рисовать и вообще трогать его (как
будто боятся jpg в блокноте увидеть). И это касается даже очень крупных компаний.

Взглянем на логотип РБК (ссылка)

Как он выглядит у них и как можно сделать:










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

Ну вернемся к нашей звезде-чекбоксу.
Нет ничего сложного самому нарисовать ее, это не сложнее, чем рисовать ее в тетрадке
в клетку:







Чтобы было проще, можно переносить каждую точку на следующую строчку. Я нарисовал
обычную советскую звезду в редакторе, как рисовали её в школе, одной линией. Подровнял
и получил точки. Кстати теоретически для ровных линий правильнее использовать polygon,
тк path подразумевает возможное наличие кривых безье. 

Анимация из ответа очень топорная, без души и в середине анимации сильная каша. Открываю
редактор, накладываю одну фигуру на другую и смотрю как можно анимировать менее грубо:











var button = document.getElementById("button"),
  buttonText = document.getElementById("btnText"),
  animationToStar = document.getElementById("toStar"),
  animationToCheck = document.getElementById("toCheck");

button.addEventListener('click', function() {

  if (button.classList.contains("keep")) {
    button.classList.remove("keep");
    animationToStar.beginElement();
    buttonText.innerHTML = "Сохранить";
  } else {
    buttonText.innerHTML = "Сохранено!";
    button.classList.add("keep");
    animationToCheck.beginElement();
  }

}, false);
button {
  border: 0;
  background: linear-gradient( to bottom, #444, #111);
  border-radius: 20px;
  padding: 10px 30px 12px;
  width: 235px;
  outline: 0;
  display: inline-block;
  text-align: left;
}

button:hover,
button:active {
  background: black;
}

button svg {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

button span {
  font-size: 22px;
  position: relative;
  top: 4px;
  color: white;
}

body {
  padding: 20px;
  text-align: center;
}





Вставляем в пример из ответа, смотрим что можно улучшить по svg. В принципе все в
порядке, только анимацию цвета можно запускать на старте анимации шэйпа прямо в svg,
это немного лишнего из js выкидывает.


Ответ 2

Пример морфинга иконки звездочки в чекбокс.

Запуск анимации - клик на фигуре.  








Анимация достигается плавным изменением координат узловых точек, которые находятся
в атрибуте "d" патча.     

Анимация изменения цвета выполняет команда: 

   


Осталось написать правила CSS для стилизации кнопки и JS скрипт для переключения
состояний кнопки путем добавления, удаления классов и запуска анимаций.      

Запуск анимации - клик на фигуре.  



var icon = document.getElementById("button"),
  buttonText = document.getElementById("btnText"),
  animationToStar = document.getElementById("anStar"),
  animationToCheck = document.getElementById("anCheck"),
  animationToYellow = document.getElementById("anYellow"),
  animationToGreen = document.getElementById("anGreen");

button.addEventListener('click', function() {

  if (button.classList.contains("keep")) {
    button.classList.remove("keep");
    animationToStar.beginElement();
    animationToYellow.beginElement();
    buttonText.innerHTML = "Сохранить";
  } else {
    buttonText.innerHTML = "Сохранено!";
    button.classList.add("keep");
    animationToCheck.beginElement();
    animationToGreen.beginElement();

  }

}, false);
button {
  border: 0;
  background: -webkit-linear-gradient( top, #444, #111);
  background: linear-gradient( to bottom, #444, #111);
  border-radius: 20px;
  padding: 10px 30px 12px;
  outline: 0;
  display: inline-block;
  width: 235px;
  text-align: left;
}

button:hover,
button:active {
  background: black;
}

button svg {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

button span {
  font-size: 22px;
  position: relative;
  top: 4px;
  color: white;
}

body {
  padding: 20px;
  text-align: center;
}