我有一个关于 bodymovin 和 react(或者实际上也是普通/普通 html 和 js)的问题。假设图形/动画设计师给我一个搜索字段打开的动画。 Like this one .然后我想将这个动画整合到我的网站中，这样当用户点击搜索栏时，就会播放这个动画。
我该怎么做？我只有一个 bodymovin JSON 或 svg 文件，可能是一个 gif。我确实知道如何在我的网站上简单明了地显示此动画。但是我真的不明白底层功能(实际的 HTML/JS/CSS 搜索栏组件)是如何与动画联系在一起的？
如果能提供一些总体指导，我将不胜感激。
最佳答案
您需要为鼠标事件编写一个监听器。像这样的东西:
HTML:
<element onmouseover="myScript"> <script> function mouseOver() { <!-- Script goes here--> } function mouseOut() { <!-- Script goes here--> } </script>
JS:
object.onmouseover = function(){myScript};
或
object.addEventListener("鼠标悬停", 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>关于javascript - 如何将 bodymovin 动画与函数集成？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46907912/