递归动画在下面的 SVG 中是如何工作的

Question

我指的是下面给出的 svg 动画 link https://codepen.io/thinkdesign/pen/JybJOq 我无法理解这里的递归是如何工作的

    var offset = 0;
var animation = function() {
  offset -= 100;
  pattern.animate({ x: offset }, 500, mina.ease, animation);
};

这里我们在每次函数调用时更改 x 轴，因此 x 轴在某些时候应该超出屏幕。请帮助我了解这是如何工作的

Answer 1

此处页面上没有任何内容。移动到此处的 x 是模式的 X 偏移量。 SVG <pattern> 是由 "tile" 组成的填充，在每个方向上无限重复。 <pattern> 有一个 x 和 y 属性，告诉浏览器从哪里开始平铺。为图案的 x 偏移设置动画效果，看起来就像瓷砖在您的对象上连续移动一样。

想象一个长方形 window 躺在瓷砖地板上。如果您将 window 滑过地板，您会看到瓷砖图案穿过 window。

递归动画在下面的 SVG 中是如何工作的

How recursive animation works in below SVG

javascript

svg

snap.svg