Qt 3D Studio: Dynamic Keyframes Example

This example demonstrates using dynamic keyframes with QML in Studio


The presentation displayed in this example consists of three simple slides with ping-pong animations:

  • Slide 1: Move ball to the right side of the screen
  • Slide 2: Move ball to center of the screen and scale it up
  • Slide 3: Move ball back to the initial position on the left side of the screen

Because the animations in the presentation are defined dynamic, the current position and scale of the ball are used as the initial keyframes for animations whenever a slide is changed.


Change Slide

Changes the current slide to next slide in sequence using a DataInput item:

property int slideIndex: 0
property var slideArray: [


// This DataInput item is used to control current slide. The presentation has
// a corresponding data input of "String" type linked to main Scene slides.
DataInput {
    id: slideInput
    name: "slideInput"
    value: presentation.slideArray[presentation.slideIndex]

Reset Time

Resets the animation time to the beginning using another DataInput item:

// This DataInput item is used to control animation time. The presentation has
// a corresponding data input of "Ranged Number" type linked to main Scene timeline.
DataInput {
    id: animationInput
    name: "animationInput"
    value: 0


function resetTime() {
    animationInput.value = 0;

Change Color

Changes the current color to the next one in an array of predefined colors using an Element item:

property int colorIndex: 0
property var colorArray: [
    [1.0, 1.0, 1.0],
    [1.0, 0.0, 0.0],
    [0.0, 1.0, 0.0],
    [0.0, 0.0, 1.0],
    [0.0, 1.0, 1.0],
    [1.0, 0.0, 1.0],
    [1.0, 1.0, 0.0]


// Element item is used to change element attributes.
// Note that the preferred API for changing element attribute values would be
// the DataInput API, but changing colors is not yet supported via DataInput in 1.1.
Element {
    id: materialElement
    elementPath: "Scene.Layer.Sphere.Material"


function changeColor() {
    colorIndex = colorIndex >= colorArray.length - 1 ? colorIndex = 0 : colorIndex + 1;
    materialElement.setAttribute("diffuse.r", colorArray[colorIndex][0]);
    materialElement.setAttribute("diffuse.g", colorArray[colorIndex][1]);
    materialElement.setAttribute("diffuse.b", colorArray[colorIndex][2]);
    changeColorButton.color = Qt.rgba(colorArray[colorIndex][0],
                                      colorArray[colorIndex][2], 1.0);


Available under certain Qt licenses.
Find out more.