Как сделать анимацию иконки - разбитое сердце

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

У меня есть две иконки сердечка - целого и разбитого.

 

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

Необходимо, чтобы анимация начиналась при клике по иконке.   

Это учебный пример, допускается любая техника выполнения задачи : SVG, CSS, JS или
их комбинации.
    

Ответы

Ответ 1

Для реализации анимации необходимо нарисовать линию разлома и две половинки иконки. 


Берем первую иконку и загружаем её в векторный редактор.
С помощью инструмента - рисовать кривые Безье и прямые линии -
       

рисуем линию разлома


     


Этим же инструментом обводим контур левой половинки сердца и ещё раз
обводим контур, но правой половинки сердца. Каждый раз делаем контур
замкнутым.   
Сохраняем файл Heart.svg в векторном редакторе
Копируем из файла патчи левой и правой половинок сердца.


Ниже пример правой половинки   








Левая половинка иконки    









Соединяем две половинки сердца в одном файле и начинаем писать код
анимации половинок.    


Пишем код анимации

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




Начало анимации - begin="heart.click"

Вращение на 7 градусов вокруг точки с координатами 50 75.7 - values="0 50 75.7;7
50 75.7"      

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

values="0 50 75.7;-7 50 75.7"    

Собираем всё вместе:      








Анимация начинается при клике на иконку    

Вариант анимации с обратным склеванием половинок