Anfängerfrage: Parameterabhängige Animation einer Grafik

[Himbeer-Toni]

Hallo liebe Foren-Community,

im Rahmen meiner Multimedialer Systeme Vorlesung arbeite ich an einem Projekt mit dem schlichten Thema "Animation". Die Aufgabe hierbei ist, mit einer beliebigen Programmiersprache ein Programm schreiben, welches aus gegebenen Keyframes die Interframes berechnen kann. Für mich lag QT nahe, da ich von dem Animation Framework hörte.

In der gängigen Literatur finde ich leider keine anständigen Artikel zum Thema Animation, hier im Forum laß ich dann, dass das Framework wohl noch zu neu und unausgereift ist, um gute Literatur zu finden. Bisher habe ich mich mit der QT-Doc sowie den im SDK mitgelieferten Examples auseinandergesetzt und daraus schon ein kleines Programm geschaffen. Nun stecke ich jedoch in einer Sackgasse. Daher wollte ich hier um Rat fragen.

Die Aufgabenstellung ist folgende:
1. Ein Ball mage) soll von einem Punkt A zu einem Punkt B fliegen können.
2. Der Ball soll sich gleichzeitig auch drehen können.
3. Der Ball soll sich gleichzeitig auch in der Größe ändern können.
4. Der Ball soll einem Pfad folgen.

Den Ball habe ich als Pixmap realisiert. Diesen habe ich in eine QGraphicsScene gepackt, welche von einem QGraphicsView angezeigt wird.
Nun habe ich eine QPropertyAnimation erzeugt. Die Bewegung von A nach B kann bereits realisieren:

Code: Alles auswählen

anima = new QPropertyAnimation(ball, "pos");
anima->setStartValue(x1, y1);
anima->setEndValue(x2, y2);
anima->setDuration(5000);
anima->start();

Leider weiß ich ab hier nicht mehr weiter. Wie schaffe ich es, dass sich der Ball gleichzeitig noch drehen bzw. die Größe ändern kann?

Als Zusatz wäre es besonders toll, wenn ich auch einen Slider hätte, mit dem ich in einen Zustand der Animation springen kann. Geht sowas? (TimeLine?)

Für Hilfe wäre ich sehr dankbar. Ich bin bereits auf die State-Machine gestoßen, bin mir aber nicht sicher ob das die richtige Spur ist. Ist das Framework wohl wirklich noch zu jung für das was ich gerne hätte?

Danke für eure Aufmerksamkeit

Viele Grüße
Himbeer-Toni

[franzf]

Ich bin mir nicht ganz sicher, ob deine Lösung mit den Qt-Mitteln überhaupt Punkte bekommt. Du sollst ja eben aus gegebenen KeyFrames die Initerframes berechnen. Die Anomations-Klassen von Qt nehmen dir da viel Arbeit ab
Im Prinzip wirst du mit <50 Zeilen Code, von denen keine einzige zur Berechnung der InterFrames zuständig ist, ein fertiges Programm bekommen, welches Deinen Ball entlang einer Linie bewegen kann.

Wie lautet denn die genaue Aufgabenstellung? Was darf das Toolkit abnehmen, was MUSST du selber berechnen?

[Himbeer-Toni]

Hallo Franz,

erstmal danke für deine Antwort

Das witzige an der Geschichte ist, dass es keine konkrete Aufgabenstellung gibt. Das Thema meiner Projektarbeit lautete kurz und bündig "Animation". Nachdem ich bereits einen 1,5 Stunden langen Vortrag zu dem Thema gehalten habe, ist es ein weiterer Teil meiner Aufgabe, eine Animation zu erstellen, deren Interframes vom Computer berechnet werden, ganz egal wie ich das mache.

Ich schlug bereits Cinema 4D vor, das wollte der Prof allerdings nicht, er wolle Code sehen. Ich erwähnte QT und er sagte, er hörte bereits davon. Ich solle es nehmen. Ich dürfe nur nicht lügen was den Arbeitsaufwand angeht. Aber bisher habe ich schon locker 10 Stunden mit Einlesen und Rumprobieren verbraten. Einziger Wunsch des Proffessors: mit Verändern von Parametern (z.B. Zielpunkt, Pfad usw) soll die Animation veränderbar sein.

Der Ball war meine Idee :/

[upsala]

Leider weiß ich ab hier nicht mehr weiter. Wie schaffe ich es, dass sich der Ball gleichzeitig noch drehen bzw. die Größe ändern kann?

Schon mal versucht mehrere QPropertyAnimation auf ein Object anzuwenden?

[otternase]

mit QML könnte das etwa so aussehen, aber ich bin mir nicht sicher, ob das wirklich das von Deinem Prof geforderte ist, bezweifle ich:

Code: Alles auswählen

import Qt 4.6

Rectangle {
    width: 200
    height: 200

    SequentialAnimation {
        id: animation
        ParallelAnimation {
            NumberAnimation { target: img; property: "x"; to: 100 }
            NumberAnimation { target: img; property: "y"; to: 100 }
            NumberAnimation { target: img; property: "scale"; to: 0.8 }
            NumberAnimation { target: img; property: "rotation"; to: 360 }
        }
        ParallelAnimation {
            NumberAnimation { target: img; property: "x"; to: 0 }
            NumberAnimation { target: img; property: "y"; to: 0 }
            NumberAnimation { target: img; property: "scale"; to: 1 }
            NumberAnimation { target: img; property: "rotation"; to: 0 }
        }
    }


    Rectangle {
        id: rect
        width: 100; height: 100;
        Image {
            id: img
            source: "../../../1194986802274589086football_ball_brice_boye_01.svg.thumb.png"
            x: 0
            y: 0
            MouseArea {
                anchors.fill: parent
                onPressed: animation.start()
            }
        }
    }
}

[Himbeer-Toni]

Schon mal versucht mehrere QPropertyAnimation auf ein Object anzuwenden?

Super, das funzt
Eigentlich total easy, aber manchmal sieht man den Baum vor lauter Bäumen nicht mehr. Danke euch allen!

Anbei noch die - zugegeben globige - Lösung. Vielleicht hilft sie irgendwann irgendjemandem

Code: Alles auswählen

QPropertyAnimation animation1(ball, "rotation");
    animation1.setDuration(5000);
    animation1.setStartValue(qreal(0));
    animation1.setEndValue(qreal(720));
    animation1.setEasingCurve(QEasingCurve::InOutCubic);

    QPropertyAnimation animation2(ball, "pos");
    animation2.setDuration(5000);
    animation2.setStartValue(QPointF(0,0));
    animation2.setEndValue(QPointF(200,200));
    animation2.setEasingCurve(QEasingCurve::InOutCubic);

    QPropertyAnimation animation3(ball, "scale");
    animation3.setDuration(5000);
    animation3.setStartValue(qreal(1));
    animation3.setEndValue(qreal(2));
    animation3.setEasingCurve(QEasingCurve::InOutCubic);

    animation1.setLoopCount(-1);
    animation1.start();
    animation2.setLoopCount(-1);
    animation2.start();
    animation3.setLoopCount(-1);
    animation3.start();