SVG: Анимация роботизированного пальца

Изображение пальца робота отвечает на команды пользователя.

Объяснения...

1) Загружаем изображение в память

<div style="display:none">
  <iframe id="ifinger" width="600" height="400" src="code/finger.svg"></iframe>
</div>

Чтобы согнуть либо кончик пальца, либо две последние фаланги, фаланги объединяются в маяк <g>:

<g id="finger" stroke-width="2" stroke="#000000" fill="url(#metal)">
  <rect id="three" x="340" y="2" width="160" height="100" />
  <g id="onetwo"> 
    <rect id="two" x="180" y="2" width="140" height="100" />
      <g id="one">  
        <path id="svg_2" d="m160,102c-300,-100 20,-100 0,-100"/>   
        <line y2="0" x2="160" y1="100" x1="160"  />
      </g>
    <circle cx="170" cy="50" r="30" />
  </g>
  <circle cx="330" cy="50" r="30" />  
</g>

Первая группа соответствует целому пальцу. Этот тег <g> используется для движения всего пальца.

Хотелось бы сохранить в анимации определение градиентов (которое делается вне группы), но для этого нужно ссылаться на весь образ svg: он работает с Firefox, но не с Chrome или IE. Поэтому мы будем довольствоваться линейным рисунком.

Вторая группа ID «onetwo» объединяет две последние фаланги.

Эта вторая группа включает другую группу, ID «one», которая представляет кончик пальца.

2) Определяется поверхность рисования

<svg id="anim" width="600" height="400"></svg>

2) Мы помещаем палец в поверхность

Атрибут transform со свойством translate помещает его в x = 50 и y = 50.

var ifinger;
var one;
var two;
var three;

function start()
{
  var anim = document.getElementById("anim");
  var ifr = document.getElementById("ifinger");
  var graphics = ifr.contentWindow || ifr.contentDocument;
  ifinger = graphics.document.getElementById("finger");
  ifinger.setAttribute("transform", "translate(50, 50)");
  anim.appendChild(ifinger);
  one = document.getElementById("one");
  two = document.getElementById("onetwo");
}

window.onload=start;

4) В JavaScript определяются возможные действия

Они:

• Сложите палец (slant).
• Выпрямить (неосмотрительно).
• Сложить кончик (slantOne).
• Сложить последние две фаланги (slantTwo).
• Вернуться к старту (restart).

function slant() {
  ifinger.setAttribute("transform", "translate(50, 50) rotate(-40,500,0)");
}

function unslant() {
  ifinger.setAttribute("transform", "translate(50, 50)");
}

function slantOne() {
  one.setAttribute("transform", "rotate(-40, 160, 0)")
}

function slantTwo() {
  two.setAttribute("transform", " rotate(-40, 320, 0)")
}

function restart() {
  ifinger.setAttribute("transform", "translate(50, 50)");
  one.setAttribute("transform", "rotate(0, 0, 0)");	
  two.setAttribute("transform", "rotate(0, 0, 0)");	
}

Эти функции связаны с кнопками интерфейса.

Они идентичны тому, что можно было бы использовать в электронном монтаже. Можно добавить такие дополнительные параметры, как степень давления, скорость. Мы также можем представить их, разработав этот код.

Чтобы загрузить исходный код и файл SVG, нажмите ниже:

Файл finger.html создается из файла finger.sol с командой: solj-w finger. Но язык Script в этом демо не используется.

Следующий шаг будет состоять в том, чтобы собрать несколько пальцев, чтобы сформировать целую руку, а затем оживить их и заставить вручную выполнить задание, например написать.