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

【问题标题】：How to integrate bodymovin animations with functions?如何将 bodymovin 动画与功能集成？
【发布时间】：2018-04-05 02:19:19
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript css reactjs animation bodymovin

【解决方案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>

我希望这能让您知道该怎么做并且对您有所帮助！

【讨论】：