Add support for keyframes binary format

Some models/animations may contain a large amount of keyframes,
leading to a lot of Keyframe QML elements. This can make QML
file large and not perform well.

This commit adds support for 'keyframeSource' TimelineGroup
property which can be used to load keyframes data from a file in
CBOR binary format. Format specification included in commit.

Contains keyframeBinaryGenerator manual test to assist in
generating these keyframe files. This was used for test10.qml
manual test content. Also adds missing Circles.qml

Task-number: QTBUG-85148
Change-Id: I5f4dc8e5f21e41310def8416fd1e7abc951229f2
Reviewed-by: Andy Nichols <andy.nichols@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

12 files changed, 509 insertions, 3 deletions

diff --git a/tests/manual/keyframeBinaryGenerator/keyframeBinaryGenerator.pro b/tests/manual/keyframeBinaryGenerator/keyframeBinaryGenerator.pro
new file mode 100644
index 0000000..f73c4bf
--- /dev/null
+++ b/tests/manual/keyframeBinaryGenerator/keyframeBinaryGenerator.pro
@@ -0,0 +1,27 @@
+QT += gui
+
+CONFIG += c++11 console
+CONFIG -= app_bundle
+
+# The following define makes your compiler emit warnings if you use
+# any Qt feature that has been marked deprecated (the exact warnings
+# depend on your compiler). Please consult the documentation of the
+# deprecated API in order to know how to port your code away from it.
+DEFINES += QT_DEPRECATED_WARNINGS
+
+# You can also make your code fail to compile if it uses deprecated APIs.
+# In order to do so, uncomment the following line.
+# You can also select to disable deprecated APIs only up to a certain version of Qt.
+#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
+
+SOURCES += \
+        main.cpp
+
+# Add 'timeline' path and include keyframedatautils
+INCLUDEPATH += $$PWD/../../../src/imports/timeline/
+HEADERS += ../../../src/imports/timeline/keyframedatautils_p.h
+
+# Default rules for deployment.
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target
diff --git a/tests/manual/keyframeBinaryGenerator/keyframes_file_specification.txt b/tests/manual/keyframeBinaryGenerator/keyframes_file_specification.txt
new file mode 100644
index 0000000..827aa2f
--- /dev/null
+++ b/tests/manual/keyframeBinaryGenerator/keyframes_file_specification.txt
@@ -0,0 +1,79 @@
+
+This document explains the format of QQuickTimeline binary keyframes.
+Timeline KeyframeGroup 'keyframeSource' property can be used to load
+these keyframes into KeyframeGroup.
+
+Binary format is using CBOR binary data serialization format: https://cbor.io
+
+The format of keyframes CBOR data is following:
+
+[
+  "QTimelineKeyframes", // string
+  version, // integer
+  propertyType, // integer
+  [
+    frame, // double
+    easing, // integer
+    [n items depending on propertyType]
+    frame,
+    ...
+  ]
+]
+
+The content of keyframes array depend on propertyType. So for qreal
+each dataset is 3 numbers (frame + easing + qreal), for QVector3D
+5 numbers (frame + easing + QVector3D) and for QQuartenion
+6 numbers (frame + easing + QQuartenion).
+
+Value of propertyType is the QMetaType::Type of the keyframe property.
+
+Value of frame (time) is double.
+
+Value of easing is the QEasingCurve::Type of the keyframe easing.
+
+
+Example 1. CBOR content for qreal property (e.g. Item opacity):
+
+[
+  "QTimelineKeyframes",
+  1,
+  6,
+  [
+    0,
+    0,
+    0.0,
+    500,
+    0,
+    0.2,
+    1000,
+    0,
+    1.0
+  ]
+]
+
+
+Example 2. CBOR content for QVector3D property (e.g. Node position):
+
+[
+  "QTimelineKeyframes",
+  1,
+  83,
+  [
+    0,
+    0,
+    0.123,
+    0.123,
+    0.123,
+    10,
+    0,
+    0.234,
+    0.123,
+    0.123,
+    20,
+    0,
+    0.334,
+    0.334,
+    0.334,
+    ...
+  ]
+]
diff --git a/tests/manual/keyframeBinaryGenerator/main.cpp b/tests/manual/keyframeBinaryGenerator/main.cpp
new file mode 100644
index 0000000..be89a3d
--- /dev/null
+++ b/tests/manual/keyframeBinaryGenerator/main.cpp
@@ -0,0 +1,177 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Timeline Add-on.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QCoreApplication>
+#include <QtCore/QCborStreamWriter>
+#include <QtCore/QFile>
+#include <QtCore/QDir>
+#include <QtCore/QMetaType>
+#include <QtGui/QColor>
+#include <QtGui/QVector3D>
+#include "keyframedatautils_p.h"
+
+struct Keyframe
+{
+    double frame;
+    QVariant value;
+    int easing = 0;
+};
+
+struct KeyframeData
+{
+    QString filename;
+    QMetaType::Type propertyType;
+    QList<Keyframe> keyframes;
+};
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication app(argc, argv);
+
+    QList<KeyframeData> data;
+
+    // Animate real ('opacity' property)
+    KeyframeData keyframeData1;
+    keyframeData1.filename = "animate_real.cbor";
+    keyframeData1.propertyType = QMetaType::QReal;
+    Keyframe key1_1;
+    key1_1.frame = 0;
+    key1_1.value = 0.0;
+    key1_1.easing = 0;
+    keyframeData1.keyframes.append(key1_1);
+    Keyframe key1_2;
+    key1_2.frame = 1000;
+    key1_2.value = 1.0;
+    key1_2.easing = 0;
+    keyframeData1.keyframes.append(key1_2);
+    Keyframe key1_3;
+    key1_3.frame = 2000;
+    key1_3.value = 0.0;
+    key1_3.easing = 0;
+    keyframeData1.keyframes.append(key1_3);
+    data.append(keyframeData1);
+
+    // Animate bool ('visible' property)
+    KeyframeData keyframeData2;
+    keyframeData2.filename = "animate_bool.cbor";
+    keyframeData2.propertyType = QMetaType::Bool;
+    Keyframe key2_1;
+    key2_1.frame = 0;
+    key2_1.value = true;
+    key2_1.easing = 0;
+    keyframeData2.keyframes.append(key2_1);
+    Keyframe key2_2;
+    key2_2.frame = 1000;
+    key2_2.value = false;
+    key2_2.easing = 0;
+    keyframeData2.keyframes.append(key2_2);
+    Keyframe key2_3;
+    key2_3.frame = 2000;
+    key2_3.value = true;
+    key2_3.easing = 0;
+    keyframeData2.keyframes.append(key2_3);
+    data.append(keyframeData2);
+
+    // Animate color
+    KeyframeData keyframeData3;
+    keyframeData3.filename = "animate_color.cbor";
+    keyframeData3.propertyType = QMetaType::QColor;
+    Keyframe key3_1;
+    key3_1.frame = 0;
+    key3_1.value = QColor("green");
+    key3_1.easing = 0;
+    keyframeData3.keyframes.append(key3_1);
+    Keyframe key3_2;
+    key3_2.frame = 1000;
+    key3_2.value = QColor(255, 255, 0);
+    key3_2.easing = 0;
+    keyframeData3.keyframes.append(key3_2);
+    Keyframe key3_3;
+    key3_3.frame = 2000;
+    key3_3.value = QColor(255, 255, 255);
+    key3_3.easing = 0;
+    keyframeData3.keyframes.append(key3_3);
+    data.append(keyframeData3);
+
+    // Animate vector3d
+    KeyframeData keyframeData4;
+    keyframeData4.filename = "animate_vector3d.cbor";
+    keyframeData4.propertyType = QMetaType::QVector3D;
+    Keyframe key4_1;
+    key4_1.frame = 0;
+    key4_1.value = QVector3D(500.0, 500.0, 500.0);
+    key4_1.easing = 0;
+    keyframeData4.keyframes.append(key4_1);
+    Keyframe key4_2;
+    key4_2.frame = 1000;
+    key4_2.value = QVector3D(100.0, 200.0, 300.0);
+    key4_2.easing = 0;
+    keyframeData4.keyframes.append(key4_2);
+    Keyframe key4_3;
+    key4_3.frame = 2000;
+    key4_3.value = QVector3D(-1000.0, 0.0, 0.0);
+    key4_3.easing = 0;
+    keyframeData4.keyframes.append(key4_3);
+    data.append(keyframeData4);
+
+    for (auto keyframeData : data) {
+        // Output into current running path
+        QString path = QDir::currentPath();
+        QString outputFile = path + "\\" + keyframeData.filename;
+        QFile output(outputFile);
+
+        qDebug() << "Generating:" << outputFile;
+
+        if (!output.open(QIODevice::WriteOnly)) {
+            qWarning() << "Unable to open output file:" << outputFile;
+            exit(0);
+        }
+
+        QCborStreamWriter writer(&output);
+
+        writeKeyframesHeader(writer, keyframeData.propertyType);
+
+        // Start keyframes array
+        writer.startArray();
+        for (auto keyFrame : keyframeData.keyframes) {
+            writer.append(keyFrame.frame);
+            writer.append(keyFrame.easing);
+            writeValue(writer, keyFrame.value);
+        }
+        // End Keyframes array
+        writer.endArray();
+
+        // End root array
+        writer.endArray();
+
+        output.close();
+    }
+
+    return app.exec();
+}
diff --git a/tests/manual/timelineTestApp/Circle.qml b/tests/manual/timelineTestApp/Circle.qml
new file mode 100644
index 0000000..c5a9e65
--- /dev/null
+++ b/tests/manual/timelineTestApp/Circle.qml
@@ -0,0 +1,43 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Timeline Add-on.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: rootItem
+
+    property color borderColor
+    property real borderWidth
+
+    width: 100
+    height: 100
+    radius: width / 2
+    border.color: rootItem.borderColor
+    border.width: rootItem.borderWidth
+}
diff --git a/tests/manual/timelineTestApp/animate_bool.cbor b/tests/manual/timelineTestApp/animate_bool.cbor
new file mode 100644
index 0000000..bb16839
--- /dev/null
+++ b/tests/manual/timelineTestApp/animate_bool.cbor
diff --git a/tests/manual/timelineTestApp/animate_color.cbor b/tests/manual/timelineTestApp/animate_color.cbor
new file mode 100644
index 0000000..955eaf3
--- /dev/null
+++ b/tests/manual/timelineTestApp/animate_color.cbor
diff --git a/tests/manual/timelineTestApp/animate_real.cbor b/tests/manual/timelineTestApp/animate_real.cbor
new file mode 100644
index 0000000..8942f90
--- /dev/null
+++ b/tests/manual/timelineTestApp/animate_real.cbor
diff --git a/tests/manual/timelineTestApp/animate_vector3d.cbor b/tests/manual/timelineTestApp/animate_vector3d.cbor
new file mode 100644
index 0000000..47afffe
--- /dev/null
+++ b/tests/manual/timelineTestApp/animate_vector3d.cbor
diff --git a/tests/manual/timelineTestApp/main.cpp b/tests/manual/timelineTestApp/main.cpp
index 921babd..b6e2d9a 100644
--- a/tests/manual/timelineTestApp/main.cpp
+++ b/tests/manual/timelineTestApp/main.cpp
@@ -24,6 +24,7 @@
 
 int main(int argc, char *argv[])
 {
+    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
     QGuiApplication app(argc, argv);
 
     QQmlApplicationEngine engine;
diff --git a/tests/manual/timelineTestApp/main.qml b/tests/manual/timelineTestApp/main.qml
index 67f50b4..e525764 100644
--- a/tests/manual/timelineTestApp/main.qml
+++ b/tests/manual/timelineTestApp/main.qml
@@ -43,9 +43,9 @@ Window {
     }
 
     Row {
-        x: 8
-        y: 457
-
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 10
+        spacing: 4
         Text {
             text: "Test 01"
             font.pixelSize: 12
@@ -126,5 +126,14 @@ Window {
                 onClicked: loader.source = "test09.qml"
             }
         }
+
+        Text {
+            text: "Test 10"
+            font.pixelSize: 12
+            MouseArea {
+                anchors.fill: parent
+                onClicked: loader.source = "test10.qml"
+            }
+        }
     }
 }
diff --git a/tests/manual/timelineTestApp/qml.qrc b/tests/manual/timelineTestApp/qml.qrc
index dc804bd..1bc2485 100644
--- a/tests/manual/timelineTestApp/qml.qrc
+++ b/tests/manual/timelineTestApp/qml.qrc
@@ -11,5 +11,10 @@
         <file>test08.qml</file>
         <file>Circle.qml</file>
         <file>test09.qml</file>
+        <file>test10.qml</file>
+        <file>animate_color.cbor</file>
+        <file>animate_vector3d.cbor</file>
+        <file>animate_bool.cbor</file>
+        <file>animate_real.cbor</file>
     </qresource>
 </RCC>
diff --git a/tests/manual/timelineTestApp/test10.qml b/tests/manual/timelineTestApp/test10.qml
new file mode 100644
index 0000000..705d2ba
--- /dev/null
+++ b/tests/manual/timelineTestApp/test10.qml
@@ -0,0 +1,165 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Timeline Add-on.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+// Note: KeyframeGroup keyframeSource requires 1.1 version
+import QtQuick.Timeline 1.1
+
+Item {
+    id: rootItem
+    property vector3d v3: Qt.vector3d(0,0,0)
+
+    Rectangle {
+        id: rectangle1
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 10
+        width: 120
+        height: 120
+        color: "red"
+        radius: width / 2
+    }
+    Rectangle {
+        id: rectangle2
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 10
+        width: 120
+        height: 120
+        color: "blue"
+        radius: width / 2
+    }
+    Rectangle {
+        id: rectangle3
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 120
+        height: 120
+        color: "black"
+        radius: width / 2
+    }
+    Text {
+        font.pixelSize: 20
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 10
+        text: "value: " + (rootItem.v3.x).toFixed(2)
+              + ", " + (rootItem.v3.y).toFixed(2)
+              + ", " + (rootItem.v3.z).toFixed(2)
+        color: "black"
+    }
+
+    Timeline {
+        id: timeline1
+        enabled: true
+        startFrame: 0
+        endFrame: 1000
+
+        animations: [
+            TimelineAnimation {
+                running: true
+                duration: 2000
+                from: 0
+                to: 2000
+                loops: Animation.Infinite
+            }
+        ]
+        KeyframeGroup {
+            target: rectangle1
+            property: "opacity"
+            keyframeSource: "animate_real.cbor"
+        }
+    }
+
+    Timeline {
+        id: timeline2
+        enabled: true
+        startFrame: 0
+        endFrame: 2000
+
+        animations: [
+            TimelineAnimation {
+                running: true
+                duration: 2000
+                from: 0
+                to: 2000
+                loops: Animation.Infinite
+            }
+        ]
+        KeyframeGroup {
+            target: rectangle2
+            property: "visible"
+            keyframeSource: "animate_bool.cbor"
+        }
+    }
+
+    Timeline {
+        id: timeline3
+        enabled: true
+        startFrame: 0
+        endFrame: 2000
+
+        animations: [
+            TimelineAnimation {
+                running: true
+                duration: 2000
+                from: 0
+                to: 2000
+                loops: Animation.Infinite
+            }
+        ]
+        KeyframeGroup {
+            target: rectangle3
+            property: "color"
+            keyframeSource: "animate_color.cbor"
+        }
+    }
+
+    Timeline {
+        id: timeline4
+        enabled: true
+        startFrame: 0
+        endFrame: 2000
+
+        animations: [
+            TimelineAnimation {
+                running: true
+                duration: 10000
+                from: 0
+                to: 2000
+                loops: Animation.Infinite
+            }
+        ]
+        KeyframeGroup {
+            target: rootItem
+            property: "v3"
+            keyframeSource: "animate_vector3d.cbor"
+        }
+    }
+}