问题标签 [velocity.js]

我的 html 代码中有一个内联的 SVG 图像（一个矩形）

然后，我尝试使用 jQUery 和 velocity.js 对其进行动画处理，以填充除一个边缘之外的所有屏幕（大约 90%/90% 右侧/底部）。看起来像这样：

这个解决方案有两个问题：

• 如何缩放它以完全适合屏幕的 90%？
• 如果比例大于约 2-3，则 SVG 的边缘会变得模糊。我读到如果您不直接针对 SVG，就会发生这种情况（但我正在这样做？！）

有什么好的解决办法吗？

我还尝试将 svg 设置为 100%/100% 并使用视口并稍后将其放大......但我似乎无法在那里使用百分比..

我需要创建约 20 个连续闪烁的点。出于性能原因，我选择了 Velocity.js + SVG。对结果满意（动画运行流畅），我对 CPU/GPU 过载感到困惑。

这是一个代码片段，为了这个问题而简化（http://codepen.io/anon/pen/NPjLVq?editors=101）：

SVG 对象：

连续播放五分钟，CPU 温度高达 150%。我在 OS X Yosemite 10.10 上使用 Chrome 39（64 位）。

缓存选择器和使用 Velocity.js 序列进行操作并没有帮助。

我试图在 Chrome 中使用 Timeline Tool 查找任何内存泄漏，但徒劳无功。

为什么这么简单的动画会导致我的笔记本电脑着火？

我很难找出正确的技术来构建一个具有光滑前端的现代 Web 应用程序。

基本上，我正在考虑在我的 Web 应用程序中的某处放一张幻灯片，在那里放一个自动滚动，并在某处放一个动画弹跳。没什么太花哨的。也许如果它更高级的动画有意义的话，但没有什么比具有许多粒子的快速动画序列更好的了。

我最近与http://famo.us/合作，发现它对于大多数现代 Web 应用程序的需求来说负载很重。我认为http://julian.com/research/velocity/也很有趣。你会推荐使用什么，也许还有别的？

我的意思是这样的。如何使用 GSAP、Transit 或 VelocityJS 等库获得该结果？

http://www.echocapital.com/

提前致谢 ：）

我正在使用velocity.js (1.2.1) 创建一个相当复杂的多步svg 动画。我希望用户能够在最后重置动画并再次运行它 - 重置我的意思是如果几个元素已经移动并且不透明度发生了变化，它们都会回到原来的起始位置和不透明度，这可以是即时的，不需要反向播放动画。我想创建可应用于多个不同 svg 动画的可重用代码。

似乎没有办法倒带 UI 包序列。我能想到的其他解决方案：

• 在每个元素的查找对象中记录原始属性，然后循环并重置每个元素 - 我怀疑这可能会很慢。
• 克隆 SVG，在末尾删除原始文件并附加克隆 - 这会导致 IE 中的 ID 引用重复，结果 SVG 变黑

我尝试了以下克隆解决方案：

还：

两者都导致 IE 中的黑色 svgs。

请问有没有人对这些方法有改进或使用velocity.js的替代建议？

我正在尝试为一组先前已翻译到新位置的 svg 元素设置动画。我正在使用 Velocity.js 将组动画到视口中心。
但是，我正在努力将组动画到视口的中心。

下面附加的jsfiddle和速度函数显示该组是从左上角到视口右侧的动画，这不是我想要的。

如何将组从新位置动画到屏幕中心？

这是我的 Jsfiddle http://jsfiddle.net/KashifMKH/kd0s27vq/3/

我无法弄清楚如何控制通过<object>标签嵌入页面的 SVG 中动画元素的重绘。

当我使用内联 SVG 并检查重绘（使用 Chrome 的“显示重绘矩形”）时，我可以看到只有 SVG 中的动画元素被重绘。但是，当包含相同的 SVG 时<object>，动画元素似乎会导致整个图像不断地重新绘制。

我尝试过使用velocity.js 和CSS 动画（嵌入在SVG 本身中的关键帧+ 样式）来制作动画。对于后者，当我单独查看 SVG 时，只有动画元素会重新绘制，但是当它嵌入<object>到整个元素中时，它会重新绘制。

这似乎效率低下，我想修复它，但我似乎找不到任何关于为什么会发生这种情况或如何防止它的信息。我会很感激任何指示。

运行它的最佳方法是什么？我得到了所有的错误

我需要在序列完成后添加一个函数。

将 jquery 与velocity.js 一起使用

我想结合使用 velocity.js 和 ng-animate 来为我的应用程序创建自定义 js 动画。我在网上搜索了很多答案和教程，这些答案和教程都引用了旧版本的 ng-animate，随着时间的推移，这显然已经改变了很多 API。所以现在，这就是我的动画的样子：

我这样使用它：

这种工作，但我有两个问题：

1. 承诺有时会提前解决（在动画完成之前）。看起来它是随机发生的。
2. 如何将参数传递给动画？例如，我希望我的一些 lb-fade 动画使用速度延迟选项。我可以创建多个动画 (!DRY) 或访问动画内的元素范围（这对我来说似乎很 hacky）。有正确的方法吗？

将 ng-animate 与速度一起使用是否有意义，或者我应该创建自己的函数来保存动画代码？

我一直在用 Javascript 中的（我所理解的）模块模式（或显示模块模式）进行实验。目前我的主要目标是代码组织和清理项目中的全局空间，但我确信还有许多其他好处。

我一直遵循的基本模式看起来大多是这样的：

通过隐藏 obj 的内部方法和属性，我可以看到这样做的主要好处是更简洁的代码和更好的结构。还有其他我没有看到的显而易见的好处吗？我真的很想知道什么时候什么时候不使用这种模式。

问题 1：所以我喜欢的一件事是能够将 w 和 $ 作为对 window 和 jQuery 的速记引用传递，但是当我尝试向其中添加另一个库时，它似乎不起作用（特别是速度.js）。

编辑：因为我已经包含了 jQuery，velocity 将其自身附加到全局 jQuery obj，导入是针对速度不是的全局变量，因此我不能以相同的方式导入它。

问题 2：其次，我在某处读到，无论加载顺序如何，都可以使这种模式工作，这是真的吗？如果是，应该如何修改？

注意：至关重要的是，我试图理解这种模式以及它的可能性，而不是诸如实现 require 或 borwserify 之类的替代。