使用AnimeJS和FabricJS的对象

Question

感谢你在我上一篇文章中给予的帮助。我有一个问题，可以在AnimeJS对象上使用FabricJS吗？我的意思是，我有一个带有画布(FabricJS)的FabricJS应用程序，我可以在这个画布中创建对象。FabricJS动画并不是AnimeJS动画那么强大，所以我需要使用它。

我已经尝试通过获取对象并在AnimeJS的“目标”param中使用它们来与对象交互。如果我的目标是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
        });

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

Answer 1

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

Answer 2

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

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

注意，left是一个fabric属性。而您试图使用的translateY是一个CSS属性。

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