Методы моделирования ключевых кадров с использованием SVG

Question

Я хочу создать симуляцию ключевого кадра с использованием SVG, идея состоит в том, что объекты анимации/моделирования имеют определенные позиции (или длины линий) в определенное время. Так, например, я, возможно, разделил 1-минутную симуляцию на 60 1-секундных интервалов. Я хочу сделать три вещи:

(а) быть в состоянии играть в кадр моделирования 60-кадр за кадром

(б) иметь возможность выбрать любой кадр, нажав на кнопку кадра (представьте себе 60 малых прямоугольников в нижней части экрана, каждый из которых представляет определенный кадр)

(с) быть в состоянии шаг вперед или назад от данного кадра

что бы хороший способ сделать это с помощью SVG?

Например, представьте, что у меня есть два круга вокруг. В каждый момент времени T (от 1 до 60) каждый из кругов имеет местоположение и радиус и видимость (он может быть невидим во время одного или нескольких кадров). Как структурировать SVG-файл?

Обратите внимание, что я хотел бы избежать использования Javascript (ECMA) для этого. Я надеюсь на чистое решение SVG.

Answer 1

Я боюсь, вам не повезло, если вы сделаете это без JavaScript. Теоретически, вполне возможно сделать анимацию SMIL, к сожалению, поддержка не так хороша или, по крайней мере, очень противоречива. Если вы хотите попробовать в любом случае, или если вы счастливы, чтобы сделать его работу в конкретном браузере, this might give you a starting point:

<svg xmlns="http://www.w3.org/2000/svg" width="110" height="230"> 
    <!-- some moving circle --> 
    <circle cx="50" cy="50" r="50"> 
    <set id="a0" attributeName="cy" to="50" begin="start.click; r0.click"/> 
    <set id="a1" attributeName="cy" to="75" begin="a0.begin+1s; r1.click"/> 
    <set id="a2" attributeName="cy" to="100" begin="a1.begin+1s; r2.click"/> 
    <set id="a3" attributeName="cy" to="125" begin="a2.begin+1s; r3.click"/> 
    </circle> 
    <!-- Rects to address certain frames --> 
    <g fill="#d44"> 
    <rect id="r0" width="20" height="20" y="180"/> 
    <rect id="r1" width="20" height="20" y="180" x="30"/> 
    <rect id="r2" width="20" height="20" y="180" x="60"/> 
    <rect id="r3" width="20" height="20" y="180" x="90"/> 
    </g> 
    <!-- Play button--> 
    <polygon id="start" points="40,210 70,220 40,230" fill="#6d6"/> 
</svg> 

Это пытается решить ваши пункты (а) и (б), но я думаю, что это работает только как предполагалось в классической не-Blink Opera. Я не уверен, поможет ли вам FakeSmile получить более последовательное поведение.