Search code examples
javascriptqtqmlanime.js

How to use AnimeJS library on QML


in Qt Creator, I was created QT Quick Application and with this link github, but with this way :

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
              });
    }
}

but I have this error:

qrc:/anime-master/lib/anime.js:1283: ReferenceError: module is not defined in its file : module.exports = anime; and my knowledge of js is little


Solution

  • Simple answer: you should use QML's internal tools for animations.
    More detailed answer:

    1. You can't just simply use any JS library in QML. They are written for browser usage where JS is a first class citizen. But in QML it is quite limited in functionality.
    2. I almost sure that most of animation libraries for JS are based on setTimeout() function. There is simply no such function in QML.
    3. If you somehow make it work, it will be painfully slow and unstable, because it's wide of the mark.