将 Anime JS 与 Fabric Js 对象一起使用

Question

感谢您在我之前的 post 中提供的所有帮助。我有一个问题，是否可以在 FabricJS 对象上使用 AnimeJS？我的意思是，我有一个带有 Canvas (FabricJS) 的 AngularJS 应用程序，我可以在这个 canvas 中创建对象。 FabricJS 动画不如 AnimeJS 强大，所以我需要使用它。

我已经尝试通过获取对象并在 AnimeJS 的 "targets" 参数中使用来与对象进行交互。如果我的目标是 dom 类型（如 div）、class 甚至 id，我可以确认 AnimeJS 在 AngularJS 应用程序中运行良好。

var bounce = anime({
            targets: object.get(),
            translateY: '50vh',
            duration: object.get().animation.duration * 1000,
            loop: true,
            direction: 'alternate',
            easing: 'easeInCubic',
            autoplay: true
        });

反弹对象中正确引用了该对象，但没有任何动画。你有好主意吗？是因为目标分配不正确吗？谢谢

Answer 1

我找到了一种方法，不使用 animejs 库。 AnimeJS 库使用 DOM 元素，FabricJS 元素不是 DOM。所以，现在我使用 GSAP 库。真的好用。

Answer 2

如果您对织物对象属性进行操作，则可以将 anime.js 与织物一起使用，例如

const [obj1] = canvas.getObjects();
anime({
    targets: [obj1],
    left: [-300, 300],
    easing: 'linear',
    update: function() {
        canvas.renderAll()
    }
});

请注意 left 是一种面料属性。而您尝试使用的 translateY 是 CSS 属性.

参考：https://animejs.com/documentation/#JSobjProp

将 Anime JS 与 Fabric Js 对象一起使用

Using AnimeJS with FabricJS's objects

angularjs

fabricjs

anime.js