Попытка анимировать курсор путем циклического перемещения по изображениям, которые также следуют за положением курсора - PullRequest
0 голосов
/ 13 января 2019

Я хочу, чтобы изображение одновременно следовало за позицией курсора и циклически проходило по массиву изображений. С помощью приведенного ниже кода изображение движется за курсором, но не перебирает мой массив кадров анимации. Вместо этого я получаю "TypeError: Не могу прочитать свойство 'length' из неопределенного at animateCursor ". Помогите, пожалуйста!

Изображение и курсор должны быть отделены друг от друга - потому что курсор имеет уникальный стиль. Я чувствую, что есть что-то в области, которую я не понимаю. По крайней мере, мне удалось получить относительный URL-адрес одного из изображений в массиве. Таким образом, похоже, что цикл ненадежен.

let cursorArray = [
  'media/cursor/cur1.svg',
  'media/cursor/cur2.svg',
  'media/cursor/cur3.svg',
  'media/cursor/cur4.svg',
  'media/cursor/cur5.svg',
  'media/cursor/cur6.svg',
  'media/cursor/cur7.svg',
  'media/cursor/cur8.svg',
  'media/cursor/cur9.svg',
  'media/cursor/cur10.svg',
  'media/cursor/cur11.svg',
  'media/cursor/cur12.svg',
  'media/cursor/cur13.svg',
  'media/cursor/cur14.svg',
  'media/cursor/cur15.svg',
  'media/cursor/cur16.svg',
  'media/cursor/cur17.svg'
];

function animateCursor(cursorArray) {
  let circle = document.createElement('img');

  for (let i = 0; i < cursorArray.length; i++) {
    circle.setAttribute('src', cursorArray[i]);
    circle.setAttribute('class', 'cursor');

    document.body.appendChild(circle);

    circle.style.transition = 'all 0.2s ease';
    circle.style['-webkit-transition'] = 'all 0.2s ease';
    circle.style['-moz-transition'] = 'all 0.2s ease';
    circle.style['-ms-transition'] = 'all 0.2s ease';
    circle.style['-o-transition'] = 'all 0.2s ease';
  }
}

document.addEventListener('mousemove', animateCursor(cursorArray));

document.onmousemove = function position(e) {
  let circle = document.querySelector('.cursor');
  circle.style.position = 'absolute';
  circle.style.left = e.clientX + 'px';
  circle.style.right = e.clientX + 'px';
  circle.style.top = e.clientY + 5 + 'px';
  circle.style.height = '50px';
  circle.style.width = '50px';

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...