递归动画如何在 SVG 下工作

Question

我指的是下面链接中给出的 svg 动画 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> 是一种填充，它由一个在各个方向无限重复的“平铺”组成。 <pattern> 有一个 x 和 y 属性告诉浏览器从哪里开始平铺。为图案的x 偏移设置动画效果可以使其看起来像瓷砖在您的对象上不断移动。

想象一下平铺在瓷砖地板上的一扇长方形窗户。如果你在地板上滑动那个窗口，它看起来就像瓷砖图案穿过窗口一样。