Question

我对bodymovin＆amp;反应（或实际上也是普通/香草html＆amp; js）。假设图形/动画设计师给我一个开放的搜索域动画。 Like this one。然后，我想将此动画集成到我的网站中，以便当用户点击搜索栏时，此动画正在播放。

我该怎么做？我只有一个bodymovin JSON或svg文件，可能是一个gif。我知道如何在我的网站上显示这个动画简单。但我真的不明白底层功能（实际的HTML / JS / CSS搜索栏组件）如何与动画联系起来？

我非常感谢这里的一些大方向。

Answer 1

您将需要为鼠标事件编写一个侦听器。像这样：

HTML：

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

JS：

object.onmouseover = function（）{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>

我希望这能给您一个思路，对您有帮助！

如何将bodymovin动画与功能集成？

1 个答案: