Форма Морфинг иконки в Button на клик онлайн урок.


Идея здесь заключается в использовании значка SVG в кнопке и замене этого значка другим, когда нажимается кнопка. Нажатие кнопки часто предполагает, что было предпринято действие, поэтому значки переключения могут быть приятным пользовательским интерфейсом, чтобы показать изменение в контексте и подтвердить, что действие произошло.

Возможным вариантом использования может быть кнопка загрузки. Значок на кнопке может первоначально указывать на то, что кнопка запускает загрузку, но при нажатии кнопки будет изменена отметка.

См. Pen MorphSVG в кнопке Click Джеффа Грэма ( @geoffgraham ) на CodePen .

Давайте создадим фрагмент, который выполнит этот шаблон, чтобы мы могли использовать его в других подобных контекстах.

# Требования

Пока мы представляем это как фрагмент SVG, мы будем полагаться на TweenMax от GSAP, который является библиотекой JavaScript, специально предназначенной для анимации SVG, и MorphSVG, который является компонентом TweenMax.

Да, SVG действительно имеет встроенную поддержку анимаций, которые позволяют нам выполнять то же самое . Однако с поддержкой SMIL, уменьшающейся в будущих версиях браузеров WebKit и Blink, и это полная нехватка поддержки в IE и Edge, GSAP становится гораздо более привлекательной альтернативой.

Давайте запустим их и построим нам образец!

# Шаг 1: Выберите SVG Shapes

Мы собираемся обменять одну форму на другую. Формы, используемые для этого фрагмента, взяты из IcoMoon, у которого есть множество бесплатных векторных значков, но вы тоже можете сделать свой собственный. В любом случае, подготовьте свои фигуры и добавьте их в HTML внутри элемента кнопки.

<!-- The button element (we could have used `<button>`) -->
<a class="button" href="#">

<!-- The main SVG where both shapes will be drawn -->
<svg id="icons" class="button-icons" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">

<!-- The download icon -->
<path id="download" class="icon" d="M28 16h-5l-7 7-7-7h-5l-4 8v2h32v-2l-4-8zM0 28h32v2h-32v-2zM18 10v-8h-4v8h-7l9 9 9-9h-7z"></path>

<!-- The checkmark icon -->
<path id="checkmark" class="icon" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
</svg>

<!-- The button text -->
<!-- The ID will be used to swap the text with JavaScript -->
<span id="button-text">Download</span>

</a>

# Шаг 2: Стиль кнопки и SVG

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

Обратите внимание, что ключевая часть скрывает форму, в которую мы преобразуем по умолчанию. Мы делаем это, потому что нам нужны обе формы в DOM для MorphSVG, чтобы обменять один на другой, но мы не можем показывать оба одновременно. Это означает, что мы скрываем вторую фигуру и позволяем MorphSVG творить чудеса, чтобы сделать ее видимой, когда нужно.

/* The main SVG */
.button-icons {
width: 1.25em;
}

/* The individual icons */
.icon {
fill: #fff;
}

/* We hide the checkmark by default */
#checkmark {
visibility: hidden;
}

# Шаг 3: Мощные морфины SVG!

Здесь участвуют TweenMax и MorphSVG. Полный код для примера приведен ниже, но он следует этому общему скрипту:

  • Определите несколько переменных, чтобы начать, чтобы мы могли ссылаться на них в течение всего кода, не выписывая их каждый раз:
    • значки: полный элемент SVG
    • button: кнопка (или ссылка), которая содержит наши фигуры
    • buttonText: текст внутри кнопки
    • buttonTL: команда MorphSVG для замены значка загрузки значка галочки
  • Эй, JavaScript, пожалуйста, смотрите кнопку, которую нужно щелкнуть, и играйте в анимацию MorphSVG вперед и в обратном порядке на альтернативные клики.
  • О, и, привет, JavaScript, также поменяйте текст кнопки при нажатии кнопки.
  • Спасибо, JavaScript
// We're going to select some things and make them variables
var select = function(s) {
return document.querySelector(s);
},
icons = select('#icons'),
button = select('.button'),
buttonText = document.getElementById("button-text")

// Morph the Download icon into the Checkmark icon
var buttonTl = new TimelineMax({paused:true});
buttonTl.to('#download', 1, {
morphSVG:{shape:'#checkmark'},
ease:Elastic.easeInOut
})

// On button click, play the animation
button.addEventListener('click', function() {
if (buttonTl.time() > 0) {
buttonTl.reverse();

} else {
buttonTl.play(0);
}
})

// On button click, swap out the button text
button.addEventListener('click', function() {
if (button.classList.contains("saved")) {
button.classList.remove("saved");
buttonText.innerHTML = "Download";
} else {
button.classList.add("saved");
buttonText.innerHTML = "Saved!";
}
}, false);

# Демонстрация

Ниже приведено описание кода, который мы рассмотрели:

См. Pen MorphSVG в Button on Click Джеффа Грэма ( @geoffgraham ) на CodePen .

# Ссылки

  • GreenSock MorphSVG : Документация по использованию плагина.
  • Как работает SVG Shape Morphing : Крис опубликовал эту же концепцию с использованием SMIL и обеспечил хорошую основу для этого шаблона.
  • Happy Sad Pen : демо Chris Gannon, которое помогло построить анимацию для этого шаблона.