Question

我使用SVG animate元素使用以下代码为矩形设置动画。

更新代码

public abstract class WorkerThread {

    @Override
    public void run()  {
        // loop 
        while(!isCanceled()) {
            try {
                //  wait() 
                waitUntilResumed():
                // when notified do work 
                doWork():
            } catch (InterruptedException e) {
              // restore interrupted state 
            }
        }
    }

    /**
     * main thread loop
     */
    protected abstract void doWork() throws InterruptedException;

    /**
     * blocks current thread until it is resumed
     */
    private synchronized void waitUntilResumed() throws InterruptedException {
        while (isPaused()) {
            wait();
        }
    }

    /**
     * resume thread 
     */
    public synchronized void resumeAction() {
        notifyAll();
    }

}

动画从-100开始，然后一直移动到svg元素的100％。如何使矩形从其中定义的x位置（x =“200”）开始动画，然后进入屏幕的右端并以连续循环动画从左侧返回？

另外，如何将SVG元素显示到屏幕的100％宽度（像自举流体容器一样）？

提前致谢。

Answer 1

而不是from和to，而是使用values。 values采用以分号分隔的值列表，您希望它在两者之间进行动画处理。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1600 700" enable-background="new 0 0 1600 700" xml:space="preserve">
  <g>
    <rect x="200" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="x" values="-100;100%;-100"
               dur="10s" repeatCount="indefinite"/>
    </rect>
  </g>
</svg>

<强>更新

要让动画从正方形当前位置开始向右退出，然后重新进入左侧，我们需要有一个两阶段动画。

第一阶段是让方块向右移动并退出。第二阶段是一个循环动画，从LHS开始并进入全宽。

要在第一阶段结束时开始第二阶段，我们会将begin arttribute设置为firststage.end。这就是所谓的“同步基数”值。 “firststage”是第一阶段动画元素的id。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1600 700" enable-background="new 0 0 1600 700" xml:space="preserve">
  <g>
    <rect x="200" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="x" to="100%"
               dur="8.2s" id="firststage"/>
      <animate attributeType="XML" attributeName="x" from="-100" to="100%"
               dur="10s" repeatCount="indefinite" begin="firststage.end"/>
    </rect>
  </g>
</svg>

请注意，我们已调整了第一阶段的持续时间。它的行程距离较短，因此我们需要缩短其运行时间，以便在第二阶段方块看起来不那么有趣。

((1600-200) / (1600-(-100))) * 10s = 8.2s

svg animate - 设置自定义起始位置

1 个答案: