Как анимировать мой элемент с помощью Anime.JS? - PullRequest
Новая
       27

Как анимировать мой элемент с помощью Anime.JS?

0 голосов
/ 23 ноября 2018

Я использую Articulate Storyline для создания некоторых классных анимаций javascript ... Сначала мне нужно найти и выбрать элемент, который я собираюсь анимировать ... Я использую jQuery для выбора элементов, найдя их класс CSS,Я могу найти элементы практически по любому назначенному им атрибуту данных, в данном случае это aria-label.Так что мой селектор будет выглядеть примерно так: 

 $('[aria-label="my_image"]')

Мне нужно сделать еще один шаг.Storyline преобразует практически все, что вы помещаете на слайд, в SVG, когда он публикуется.Он оборачивает SVG тегом HTML DIV, который содержит наш aria-label.Поэтому я на самом деле хочу применить свои эффекты к SVG в DIV, поэтому я выбираю его так: 

 $('[aria-label="my_image"] svg')

Теперь у меня есть свой элемент, я могу использовать TweenLite из GreenSock или любой движок анимации JS для создания некоторых анимацийк этому.Например, следующий код найдет «myElement» и сдвинет его вправо ...

Примечание: элемент «myElement» - это изображение на моей сцене Storyline.и код выполняется при нажатии кнопки. 

var item = $('[aria-label="myElement"] svg')
go();
function go() {
    TweenLite.to(item, 1, {left:"63px"});
}

Теперь я хочу использовать Anime.JS Animation Engine вместо TweenLite, и я запутался, почему он не работает?и как заставить это работать? 

var item = $('[aria-label="spinner"] svg')
go();
function go() {
    var customBezier = anime({
        targets: '#item',
        translateX: 250,
        easing: [.91,-0.54,.29,1.56]
    });
}

Я не знаю, как ссылаться на мою цель?Я пробовал: 

targets: '#item',
targets: '.item',
targets: 'item',

Любая идея очень ценится ...

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

Вы должны избавиться от апострофа: 

var item = $('[aria-label="spinner"] svg')
go();
function go() {
    var customBezier = anime({
        targets: item,
        translateX: 250,
        easing: [.91,-0.54,.29,1.56]
    });
}

http://animejs.com/documentation/

0 голосов
/ 23 ноября 2018

Вы пробовали '[aria-label="spinner"] svg'? 

function go() {
  var customBezier = anime({
    targets: '[aria-label="spinner"] svg',
    translateX: 250,
    easing: [.91,-0.54,.29,1.56]
  });
}

Мне кажется, что селектор CSS - это то, чего хочет AnimeJS.

...