时间戳

首页 > 解决方案 > 递归动画如何在 SVG 下工作

javascript - 递归动画如何在 SVG 下工作

问题描述

我指的是下面链接中给出的 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 轴应该在某个时候超出屏幕。请帮助我了解这是如何工作的

标签： javascriptsvgsnap.svg

解决方案

Nothing is moving across the page here. The x that is being moved here is the pattern's X offset. An SVG <pattern> is a fill that consists of a "tile" that is repeated infinitely in every direction. The <pattern> has an x and y attribute that tells the browser where to start the tiling from. Animating the pattern's x offset has the effect of making it look like the tile is continuously moving across your object.

Picture a rectangular window lying on a tiled floor. If you slide that window across the floor, it looks to you like the tile pattern moves through the window.

推荐阅读