Como faço para animar usando javascript e qml?

Question

Eu pesquisei na internet e não consigo encontrar um guia simples de como animar objetos ui no Ubuntu SDK.

Alguém pode explicar as diferentes partes necessárias e como elas funcionam juntas?

    

Answer 1

O QtQuick oferece um rico conjunto de bibliotecas de transição e animação que você pode encontrar aqui . Basicamente envolve alterar as propriedades de um objeto com o intervalo de tempo especificado.

Aqui está um exemplo de código para animar um bloco retangular para mover caminhos laterais.

     Rectangle {
        id: rect
        color: "Green"
        width: units.gu(20)
        height: width
        x: units.gu(0)
        y: units.gu(0)

        MouseArea {
            anchors.fill: parent
            onClicked: rectAnimation.start()
        }

        NumberAnimation {
            id: rectAnimation
            target: rect
            property: "y"
            from: units.gu(0)
            to: units.gu(20)
            duration: 500
        }
    }

Você pode acionar animações com base em várias coisas, como estados de objetos, comportamento, etc. Por exemplo, se quiser que o retângulo aumente seu tamanho de maneira fluida, defina o seguinte comportamento,

Behavior on width {
    NumberAnimation { duration: 500 }
}

O QtQuick é infinitamente poderoso. Eu recomendaria enfaticamente ler a documentação oficial do Qt para descobrir os diferentes tipos de animações disponíveis e seus gatilhos.

Nota: Embora o desenvolvimento de aplicativos para o Ubuntu Touch exija o SDK do Ubuntu, vale a pena saber que o SDK do Ubuntu usa Qt e, portanto, você obteria mais resultados se procurasse soluções QML em vez de soluções Ubuntu SDK no futuro. / p>