1

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

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

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

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

$(document).data("initialSVG", $("#svg1").clone(true));
// animate... then reset
$(document).data("initialSVG").replaceAll("#svg1");

还：

var clonedSVG = $("#svg1").clone();
// animate... then reset
$("#svg1").remove();
$(".container").append(clonedSVG);

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

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

4

0 回答 0