如何在QML上使用AnimeJS库

编程问答 2022-08-13

问题描述

在Qt Creator中，我被创建为 QT快速应用程序，并且具有此链接github，但是通过这种方式：

import "qrc:/anime-master/lib/anime.js" as Logic 


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("JS")

    Rectangle{
        id: rec1
        width: 100; height: width
        color: "orange"
        x: 200; y: 250
        MouseArea{
            anchors.fill: parent
            onClicked: {
                getAnime()
            }
        }
    }

    function getAnime(){
        Logic.anime({
                  targets: rec1,translateX: 320
              });
    }
}

但是我有这个错误：

qrc:/anime-master/lib/anime.js:1283: ReferenceError: module is not defined 在其文件中：module.exports = anime; 而且我对js的了解很少

解决方法

简单答案：您应使用QML's internal tools制作动画。
更详细的答案：

  1. 您不能只在QML中使用任何JS库。它们是为JS是一流公民而使用的浏览器而编写的。但是在QML中，它的功能非常有限。
  2. 我几乎可以确定大多数JS动画库都基于setTimeout()函数。 QML中根本没有这样的功能。
  3. 如果您以某种方式使它起作用，它将非常缓慢且不稳定，因为它的作用范围很大。
anime.jsjavascriptqmlqt