- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望向从 After Effects 导出的 SVG 添加鼠标悬停事件。我希望 SVG 在鼠标悬停时播放。到目前为止,我已经尝试过animation-play-state 属性,但它没有起作用。我还尝试在脚本中使用 onmouseover
并尝试为 mouseover
添加事件监听器,但仍然没有任何结果。我做错了什么?
var params = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
};
var anim;
anim = bodymovin.loadAnimation(params);
最佳答案
我这样做,它对我有用:
animContainer = document.getElementById('bodymovin');
var params = {
container: animContainer,
renderer: 'svg',
loop: true,
autoplay: true,
autoplay:false,
autoloadSegments: false,
path: 'data.json'// path to your data.json file you rendered from AE
};
var anim;
anim = bodymovin.loadAnimation(params);
animContainer.addEventListener("mouseover", myScript);
function myScript(){
anim.play();
}
关于javascript - Bodymovin JS 的鼠标悬停事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36869593/
我有一堆动画矢量图形文件,我想将其转换为 bodymovin(我假设我需要先将它们转换为 After Effects 并使用 bodymovin 扩展)。 我对 swf、fla、svg(使用 svg
我有几个图标,它们有一个介绍动画 [0,20],当你将鼠标悬停在图标上时,它们会被绘制出来,并有一个循环动画 [21, 100]。将 loop 设置为 true 将使我所有的片段循环,这不是我想要的,
我使用后效创建了以下动画: https://imgur.com/G7bPnNc After Effects 上有一个按钮,用于设置沿 z 轴的移动: https://imgur.com/a/dq2oc
我希望向从 After Effects 导出的 SVG 添加鼠标悬停事件。我希望 SVG 在鼠标悬停时播放。到目前为止,我已经尝试过animation-play-state 属性,但它没有起作用。我还
好吧,我刚刚开始使用 bodymovin,想知道是否有办法延迟动画。 我的网页淡入,因此在动画淡入期间发生,这不是我想要的。所以如果我能延迟 2 秒那就太好了。 这是我的代码: var animati
我有一个关于 bodymovin 和 react(或者实际上也是普通/普通 html 和 js)的问题。假设图形/动画设计师给我一个搜索字段打开的动画。 Like this one .然后我想将这个动
让我的动画在悬停时触发播放。我一切正常,但当我尝试将鼠标悬停再次播放时,似乎没有任何效果。 有什么想法我写错了吗? var squares = document.getElementById("tes
我在我的项目中使用 bodymovin 脚本。即使我的一些动画 SVG 正在浏览器中渲染,我仍然收到此错误 Uncaught TypeError: Cannot read property 'appe
slider和 shuffle lottie 动画应该从 0 运行至100然后返回 0切换时;喜欢 box动画。 但是您可以看到 slider动画在最后一帧消失,shuffle动画在停止之前似乎只完成
react-bodymovin 非常适合我的 reactjs 应用程序,但是当迁移到 nextjs 时,它不起作用。我收到以下错误: ReferenceError: window is not def
react-bodymovin 非常适合我的 reactjs 应用程序,但是当迁移到 nextjs 时,它不起作用。我收到以下错误: ReferenceError: window is not def
我正在构建一个充满 SVG 插图的网站,其中包含使用 Bodymovin 进行动画处理的动画组件。 。 但背景有时也会通过动画来显示运动(运行者 SVG 的 ARM 和腿在移动,背景 SVG 从右到左
我正在尝试使用 lottie 为 After Effects 中创建的 SVG 动画制作动画。我使用 bodymovin 扩展来导出 JSON 数据文件。但是,我也注意到导出包含一些 PNG 图像。我
我有一个后效 bodymovin.js SVG 动画,其 ID 位于某些路径上(附图)。我在这些上放置了一些 css 样式(cursor:pointer),效果很好,但使用 jquery onClic
我一直在搜索多个论坛,寻找此问题的解决方案 - 我正在尝试编写多个 Lottie 动画,以便在每个动画进入 HTML 网页上的浏览器窗口时播放。有人有可行的解决方案吗? 我尝试过使用 Waypoint
我有 4 个 bodymovin 动画要放在网站上。目前,我正在使用每个动画/json 导出来上传播放器。我是否需要这样做,或者我可以只包含播放器一次,然后单个 Json 将使用此播放器来减小文件大小
我在客户的网站上播放了一个后效动画。 使用:body.js数据.json 和以下代码: $(".animation").click(function () { var ani
我是一名动画师,不是一名编码员,但学得很快......我一直在尝试使用位图图像制作 Angular 色动画的 After Effects Bodymovin 扩展,我想在网络和移动设备上部署。 结果非
刚开始处理 bodymovin。在将导出的 SVG 解析到浏览器后,有没有办法通过使用 Javascript 或编辑 data.json 来更改它的 View 框?基本上我希望 View 框的最终输出
我是一名优秀的程序员,十分优秀!