将 AnimeJS 与 FabricJS 的对象一起使用答案

【问题标题】：Using AnimeJS with FabricJS's objects将 AnimeJS 与 FabricJS 的对象一起使用
【发布时间】：2019-11-26 00:11:14
【问题描述】：

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

我已经尝试通过获取对象并在 AnimeJS 的“目标”参数中使用来与对象进行交互。如果我的目标是 dom 类型（如 div）、类甚至 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
        });

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

【问题讨论】：

标签： angularjs fabricjs anime.js

【解决方案1】：

如果您对织物对象属性进行操作，例如，您可以将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

【讨论】：

很好，没有注意到我可以使用这种观点来做到这一点。感谢您的回答

【解决方案2】：

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

【讨论】：