问题标签 [animejs]

我正在尝试在我的项目中创建惊人的动画效果。我正在使用 vue 3 和animejs 3.2.1。基本上，我像这样动态呈现了一个列表：

这会生成一个包含八个项目的列表，我在使用 flex 的网格布局中拥有这些项目。

如您所见，<ul>将 vue 动画钩子附加到<transition-group>. 在组件实例中，我现在使用animejs来尝试为每个<li>列表进入屏幕时实现一个惊人的效果

无论出于何种原因，列表在他们过渡时都不会错开。

所以我在这里想要实现的是 2 个 SVG 形状之间的平滑变形。

正如您从这两个图像中看到的那样，这些是它应该看起来的开始和结束状态。当我尝试对其进行变形时，问题就来了。

虽然它正在变形，但它会不断关闭形状，如果我查看 devtools，它总是会在标签中我的属性Z末尾附加指示符。dpath

我使用了几个库，截至目前我正在使用 D3 和 Flubber。在此之前 KUTE 和animejs。所有的结果都是一样的。

我与我的设计师来回交流，他们为我提供了几种不同的 svg 供我试用，我还尝试了 svg 软件并手工绘制，结果完全相同。

仅供参考，这将是我的 svg：

我对 D3 的逻辑（现在很混乱）：

所以我基本上在那里定义了开始和结束路径，并希望中间的步骤将由 D3/flubber 完成。我注意到这些形状之间有相同数量的节点（至少 INKSCAPE 和 Illustrator 告诉我）。我真的不知道为什么它总是在变形时关闭形状，而不是仅仅“拖动”节点。这甚至可能吗，还是我在这里尝试无法实现的事情并且会有更好的解决方案？

干杯，丹

请帮帮我。我已经坚持了3天。

我正在尝试为个人项目制作视差效果火车动画。这是通过translateX以不同的速度翻译背景 svgs ( ) 来完成的。我已经使用animejs库实现了这一点。但是，在动画期间，SVG 会在两者之间被切断，如下所示。

我之前尝试过以下方法来解决问题

• overflow : visible
• 摆弄 SVG 的视图框

他们两个都没有工作

不确定这是 SVG 还是用于在网站上呈现它的 CSS 的问题

这是codesandbox链接 Codesandbox火车动画

我正在使用animejs库创建移动火车的无限SVG循环。这是通过一个接一个地交换两个 SVG 背景的移动来完成的，保持火车静止，从而产生火车移动的效果。但是，我现在想在动画仍在运行时实现互换功能。我想在目标翻译超过 4000 时将后面的 SVG 放在前面。

我已经尝试使用属性关键帧来实现，但是，火车在每个关键帧之后停止并继续。我希望它在不停止的情况下移动平移 6400px，但在平移一定距离后执行一个函数。

有什么方法可以使用吗？

我使用的 SVG 的 Codesandboxlink：https ://codesandbox.io/s/react-svg-4td8j

我只是想知道是否可以使用像tween或animejs这样的库来增加基于曲线的值

我的意思是使用缓动曲线将值从 n 增加到 x 。

我的最终目标是为相机制作一个加速动画，所以我想使用类似“缓入出”的 CSS 等效动画。

我尝试使用anime.js来增加对象的属性，然后更新相机的位置

但是 value 属性不会增加，tick 调用正在工作，但它没有更新anime.update函数外部的对象属性。

如果有另一种方法接近我的目标，我会很乐意倾听

我已经用 1px 启动了 div 的边框属性，我想将其设置为 3px，但animejs 方法中的边框属性不起作用。是否有任何关于animejs 的有效css 属性的文档可用？

CSS类

JS代码

上下文： 我有一个副标题“关于我”，只要它在屏幕中出现（每次），就会使用动画库动画。你可以在这里找到动画，我从 Tobia 的 Moving Letters 中得到的。

问题： 当我向下滚动到字幕时，我可以在动画播放之前看到它。换句话说：我向下滚动，我阅读了副标题“关于我”，然后它消失了，只是为了让字母一个一个弹出。

这不是想要的，我正在寻找一种方法来隐藏初始文本“关于我”，然后让每个动画字母出现

我在一些虚拟文本下制作了一个带有字幕的片段，以便可以滚动进入。

作为奖励，我想要一种在每次滚动出屏幕时再次隐藏文本的方法。

这是我的第一个 StackOverflow 问题！我希望有人能帮助我

我正在尝试重新创建我在supercrowds 网站上看到的滑动效果（如果您在标语之后稍等片刻，图像就会移动）。

一个好的起点是使用 SwiperJS 作为滑块，并使用 css 调整动画，或者因为它看起来交错且更复杂，所以使用动画 JS，因为我知道它对此提供支持。

有谁知道如何创建类似的效果？

请原谅问题标题，但我真的不知道如何总结问题。

我正在开发一个 Electron 项目，我们使用 Animejs 创建动画演示。它主要是通过淡入淡出、translateY、translateX 等方式将文本带到屏幕上。然后几秒钟后，文本被动画化，新文本被动画化。

该应用程序的主要目的是用户可以将演示文稿保存为视频。所以我们在绘画事件上使用电子来捕获每个渲染的帧。这工作正常。但我认为这不是正确的方法，因为浏览器的帧速率不是恒定的，而且它只会在有运动时触发“绘画”事件，所以我们必须想办法使用最后写入的帧来填充缺少帧的间隙。这也可以，但它并不完美，而且有一点问题。

我认为最佳解决方案是拥有一个对象数组，其中包含每个帧的每个元素的预定坐标。然后我可以遍历数组/帧并使用 js 正确定位每个元素，然后将该帧作为位图写入磁盘。所以不再缺少帧。

例如，从左到右为两行文本设置动画可能看起来像这样（为简洁起见，只有两帧）：

];

所以我的问题是，有没有人知道一个动画库，它可以让我们像 Animejs 或 Greensock 那样在 js 中编写动画，但库不是实时运行动画，而是吐出类似于上述示例的对象数组？