0

我有一个关于 bodymovin & react 的问题（或者实际上也是普通/香草 html&js）。假设图形/动作设计师给了我一个搜索域打开的动画。喜欢这个。然后我想将这个动画集成到我的网站中，这样当用户点击搜索栏时，就会播放这个动画。

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

我将非常感谢这里的一些总体方向。

4

1 回答 1

0

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

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>
我希望这能让您知道该怎么做并且对您有所帮助！

于 2018-08-08T19:36:51.940 回答