slint/examples/sprite-sheet/demo.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { ComboBox } from "std-widgets.slint";
import { SpriteSheet } from "SpriteSheet.slint";

enum TravelDirection { left, right }

export component AppWindow inherits Window {
    preferred-width: 1024px;
    preferred-height: 720px;

    property <TravelDirection> travel-direction: TravelDirection.right;

    cb := ComboBox {
        x: 10px;
        y: 10px;
        model: ["Boing Ball", "Static"];
        current-value: "Boing Ball";
    }

    if cb.current-value == "Static": SpriteSheet {
        source: @image-url("images/sprite.png");
        frames-wide: 5;
        frames-high: 5;
        total-frames: 21;
        playing: true;
        duration: 700ms;
    }

    if cb.current-value == "Boing Ball":  ball := SpriteSheet {
        property <int> frameTick: animation-tick() / 16ms;
        function updateX(){

            if ball.x > root.width - ball.width {
                travel-direction = TravelDirection.left;
                ball.x = 0;
            }
            if ball.x <= 0 {
                travel-direction = TravelDirection.right;
                ball.x = root.width;
            }
        }

        source: @image-url("images/sprite.png");
        frames-wide: 5;
        frames-high: 5;
        total-frames: 21;
        x: 0px;
        animate x { duration: 3s; }
        y: (-400px * abs(sin(360deg * animation-tick() / 3s))) + parent.height - ball.height;

        changed x => { updateX() }

        changed frameTick => {
            if travel-direction == TravelDirection.left {
                ball.frame = ball.frame + 1;
            } else {
                ball.frame = ball.frame - 1;
            }
         }

        // Update X on start or the ball will be stuck at 0 as no 'changed x' happens
        init => { updateX() }
    }
}