如何使用 Anime.JS 为我的元素设置动画？

Question

我正在使用 Articulate Storyline 创建一些很酷的 javascript 动画... 首先，我需要找到并 select 我要设置动画的元素... 我通过查找 CSS class 来使用 jQuery 到 select 元素。我几乎可以通过分配给它们的任何数据属性来找到元素，在这种情况下，它是 aria-label。所以我的 selector 看起来像这样：

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

不过我还需要再做一步。发布幻灯片时，Storyline 几乎会将您放在幻灯片上的所有内容都转换为 SVG。它用包含我们的 aria-label 的 HTML DIV 标签包装 SVG。因此，我实际上想在 DIV 内对 SVG 应用我的效果，所以我 select 是这样的：

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

现在我有了自己的元素，我可以使用 GreenSock 的 TweenLite 或任何 JS 动画引擎为其制作一些动画。例如，下面的代码将找到 "myElement" 并将其推到右边...

注意："myElement" 元素是我故事情节舞台上的一张图片。单击按钮时执行代码。

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

现在我想使用 Anime.JS 动画引擎而不是 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',

非常感谢任何想法...

Answer 1

你试过了吗'[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 想要的。

Answer 2

你应该去掉撇号：

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/

如何使用 Anime.JS 为我的元素设置动画？

How to animate my element using Anime.JS?

javascript

jquery

animation

anime.js