SVG: Автомобиль на дороге и расписание событий

Демонстрация автомобиля, водящего по дороге и вызывающего событие, когда он добивается своего.

Автомобиль - это образ, который динамично добавляют в декорации. Она поворачивается к табличке «НЬЮ-ЙОРК», которую трогает и наклоняет.
Для реализации этой анимации определяется двойная цель: 1) двигаться вперед и 2) сбить панель, что очень просто записывается в целеориентированном программировании: установить связь И между значением позиции x, которую нужно достичь, и вызовом функции, которая наклоняет панель.

Программа тестирует второй термин отношения И только тогда, когда первый имеет истинное значение. Так что пока положение x не достигнет данного значения, функция не вызывается.

Она возвращает истину при вызове, что приводит к тому, что оба условия будут иметь истинное значение и условие будет выполнено, цель достигнута и анимация прекращается.

x

=

Описание исходного кода...

Составить декор

Красим небо и дорогу двумя прямоугольниками и вставляем два изображения в тег svg для создания статического декора.

<svg id="road" width="640" height="250">
  <rect x="0" y="0" width="640" height="240" style="fill:rgb(240,248,255);" />
  <rect x="0" y="240" width="640" height="8" style="fill:rgb(0,128,0);" />
  <image width="280" height="328" xlink:href="code/tree.svg" transform="scale(0.7) translate(350, 16)"/>
  <image id="sign" width="141" height="140" xlink:href="code/sign.svg" transform="scale(0.8) translate(600, 162)"/>
</svg>

Динамическое добавление изображения

Автомобиль не является частью декора, его нормально динамично добавлять.

Создается тег <image>, который будет добавлен к тегу <svg> методом appendChild DOM.

var road = document.getElementById("road");
var car
function addCar() {
  car = document.createElementNS('http://www.w3.org/2000/svg','image');
  car.setAttributeNS('http://www.w3.org/1999/xlink','href',"code/car.svg");
  car.setAttribute("width", 715);
  car.setAttribute("height", 296);
  car.setAttribute("transform", "scale(0.4) translate(10,305)");
  road.appendChild(car);
}

Двигать изображения

Одна функция создается для перемещения автомобиля, другая - для наклонения знака, когда машина его трогает.

function moveCar(x) {
  var t = "scale(0.4) translate(" + x + " 305)";
  car.setAttribute("transform", t);
}

function toppleSign() {
  var sign = document.getElementById("sign");
  sign.setAttribute("transform", "scale(0.8) translate(600, 162) rotate(30,60,100)");
  return true;
}

Основная программа: просто назначить цель

Основная программа состоит из одной инструкции: определяется цель, которая представлена условием, и говорится, как достичь этой цели: положение x увеличивается и называется функцией moveCar ().

На языке Script :

int x = 10
void move()
  to ((x > 720) and toppleSign()) for 20, 4
    x + 1
    moveCar(x)
  /to
return	

Преобразовано в JavaScript:

var x=10;
function move()
{
   scriptol.goal(function() { 
      return(((x>720)&&toppleSign()))},20*1000,function(){
        x+=1;
        moveCar(x);
   },4);
   return;
}

«For 20,4» в коде Script имеет следующее значение: Анимация имеет время, ограниченное 20 секундами, и каждое движение происходит после задержки в 4 миллисекунды, чтобы сделать скорость не зависящей от скорости компьютера .

Загрузить исходный код и изображения SVG (лицензия MIT):

Файл car.html создается из файла car.sol командой: solj -w car. (См. руководство по языку скриптола).