Как интегрировать анимацию bodymovin с функциями?

У меня есть вопрос относительно bodymovin и реакции (или, на самом деле, простого/ванильного html и js). Скажем, графический / моушн-дизайнер дает мне анимацию открытия поля поиска. Нравится этот. Затем я хочу интегрировать эту анимацию на свой веб-сайт, чтобы эта анимация воспроизводилась, когда пользователь нажимает на строку поиска.

Как бы я это сделал? Все, что у меня есть, это файл bodymovin JSON или svg, возможно, gif. Я знаю, как просто и просто отобразить эту анимацию на моем веб-сайте. Но я действительно не понимаю, как базовая функциональность (фактический компонент панели поиска HTML/JS/CSS) связана с анимацией?

Я был бы очень признателен за какое-то общее направление здесь.


reactjs javascript animation css bodymovin
person George Welder    schedule 24.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно будет написать прослушиватель для событий мыши. Что-то типа:

HTML:

<element onmouseover="myScript"> <script> function mouseOver() { <!-- Script goes here--> } function mouseOut() { <!-- Script goes here--> } </script>

JS:

object.onmouseover = функция () {myScript};

или

object.addEventListener("mouseover", myScript);

Bodymovin запускает анимацию с помощью JavaScript, поэтому просто установите анимацию на остановку после того, как панель поиска расширится при наведении мыши или щелчке мыши, а затем установите анимацию для воспроизведения в обратном направлении при отпускании мыши.

Другой пример: Источник: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover_html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).css("background-color", "yellow");
        }, function(){
        $(this).css("background-color", "white");
    });
});
</script>
</head>
<body>

<p>Hover the mouse pointer over this paragraph.</p>

</body>
</html>
I hope this gives you an idea on what to do and that it helps!

person killsap    schedule 08.08.2018