Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Составная команда из переменной и текста (https://javascript.ru/forum/dom-window/75784-sostavnaya-komanda-iz-peremennojj-i-teksta.html)

Puzikov_Oleg 06.11.2018 02:51

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

В теле объявляю объект <svg>, состоящий с нескольких элементов <circle> с id от circle001 до circle100, например.

Далее скрипт с анимацией, работающий по наведению на элемент:
animate(function(timePassed) {
   circle001.setAttributeNS(null, "cx" , X0 - timePassed*(X0 - X001)/1000);
   circle001.setAttributeNS(null, "cy" , Y0 - timePassed*(Y0 - Y001)/1000);
   circle001.setAttributeNS(null, "r" , 1 + timePassed*0.003);
}, 1000);

Пытаюсь сделать цикл с переменной i:
animate(function(timePassed) {
   var stringx = [];
   var stringy = [];
   var stringr = [];
   var i = 1;
   while (i<5) {
      stringx[i]='circle00'+i+'.setAttributeNS(null, "cx" , X0 - timePassed*(X0 - X00'+i+')/1000)';
      stringy[i]='circle00'+i+'.setAttributeNS(null, "cy" , Y0 - timePassed*(Y0 - Y00'+i+')/1000)';
      stringr[i]='circle00'+i+'.setAttributeNS(null, "r" , 1 + timePassed*0.003)';
      stringx[i];
      stringy[i];
      stringr[i];
      i++;
      }
}, 1000);


Без цикла всё работает, а с циклом нет.
Что я делаю не так?

j0hnik 06.11.2018 06:17

animate(function(timePassed) {
   var stringx = [];
   var stringy = [];
   var stringr = [];
   var i = 1;
   while (i<5) {
      stringx[i]=window['circle00'+i].setAttributeNS(null, "cx" , X0 - timePassed*(X0 - window['X00'+i])/1000);
      stringy[i]=window['circle00'+i].setAttributeNS(null, "cy" , Y0 - timePassed*(Y0 - window['Y00'+i])/1000);
      stringr[i]=window['circle00'+i].setAttributeNS(null, "r" , 1 + timePassed*0.003);
      stringx[i];
      stringy[i];
      stringr[i];
      i++;
      }
}, 1000);


если у вас переменные глобальные, попробуйте так.
а лучше создайте объект со свойствами вместо переменных.

Puzikov_Oleg 06.11.2018 13:15

Спасибо, что ответили!
Так почему-то у меня не работает.
Эти элементы просто не отображаются.
Для проверки запустил:
alert(stringx[3]);

после цикла. Значение stringx[3] выдаёт undefined.
Если использовать мой вариант
stringx[i]='circle00'+i+'.setAttributeNS(null, "cx" , X0 - timePassed*(X0 - X00'+i+')/1000)';

,то знаечение stringx[3] выводиться как
circle003.setAttributeNS(null, "cx" , X0 - timePassed*(X0 - X003)/1000)
Но как не работала, так и не работает.

Цитата:

а лучше создайте объект со свойствами вместо переменных.
А вот это предложение могли бы чуть-чуть раскрыть.
Объектом что будет являться?

j0hnik 06.11.2018 16:48

там где у вас объявлены circle001 и X001 вместо них нужен объект
var circle = {
'1':'какое то ваше значение',
'2':'какое то ваше значение'
...
};

точно так же с X.
тогда к из свойствам можно будет удобно обращаться динамически circle[i] и все будет работать.

j0hnik 06.11.2018 16:52

animate(function(timePassed) {
   var stringx = [];
   var stringy = [];
   var stringr = [];
   var i = 1;
   while (i<5) {
      stringx[i]=eval('circle00'+i).setAttributeNS(null, "cx" , X0 - timePassed*(X0 - eval('X00'+i))/1000);
      stringy[i]=eval('circle00'+i).setAttributeNS(null, "cy" , Y0 - timePassed*(Y0 - eval('Y00'+i))/1000);
      stringr[i]=eval('circle00'+i).setAttributeNS(null, "r" , 1 + timePassed*0.003);
      stringx[i];
      stringy[i];
      stringr[i];
      i++;
      }
}, 1000);

можно вот так сделать, работать должно, но это не гуд.

Puzikov_Oleg 08.11.2018 00:08

Да, так работает. Спасибо!!!

Цитата:

Сообщение от j0hnik (Сообщение 498018)
animate(function(timePassed) {
   var stringx = [];
   var stringy = [];
   var stringr = [];
   var i = 1;
   while (i<5) {
      stringx[i]=eval('circle00'+i).setAttributeNS(null, "cx" , X0 - timePassed*(X0 - eval('X00'+i))/1000);
      stringy[i]=eval('circle00'+i).setAttributeNS(null, "cy" , Y0 - timePassed*(Y0 - eval('Y00'+i))/1000);
      stringr[i]=eval('circle00'+i).setAttributeNS(null, "r" , 1 + timePassed*0.003);
      stringx[i];
      stringy[i];
      stringr[i];
      i++;
      }
}, 1000);

можно вот так сделать, работать должно, но это не гуд.



Часовой пояс GMT +3, время: 04:17.