How to do animation on condition and hide parts of sub element outside of its parent

[cppdev123]

I'm trying to implement an ink ripple like effect for buttons. It consists of a circular rectangle (the ripple) and a mouse area to received the mouse clicks to start animations on the radius of the circle and its opacity. what I want to do: when the mouse is pressed (not clicked !) the ripple will start from radius 0 until it reaches the furthest corner of the parent (cover the whole parent) and then it disappears when opacity reaches 1 then circle returns to size 0 again and during all of this the circle should not be visible outside of its parent

what I did so far: first try: circle is initially 0 in size and when the mouse is clicked (not pressed !) animation starts from the point of mouse until it covers the parent then it disappears when opacity reaches 0 and I can't restore it to its original state to start animation again !

second try: used states with transitions to run the animation as long as the TouchArea is pressed and hide it immediately when the mouse button is released, not what I want but animation can be restarted

third try: tried to create the ripple rectangle inside if block when the touch is pressed but I can't animate here !

in all tries the circle is visible outside its parent which is not desired

Any help how to overcome these issues ?

[ogoffart]

What you ask doesn't seem easy to do right now...

I've come up with a hack

preview

Wow := Rectangle {
    property <float> controler: 0;
    animate controler { duration: 1s; }
    background: #33d;
    touch := TouchArea {
       pointer-event(e) => {
          if (e.kind == PointerEventKind.down) {
             controler = controler + 2;
          }
       }
    }
    circle := Rectangle {
        width: 0;
        height: width;
        opacity: 1.;
        border-radius: width/2;
        background: #0005;
        x: touch.pressed-x - width/2;
        y: touch.pressed-y - width/2;

        states [
            pressed when mod(ceil(root.controler), 2) != 0 : {
                circle.width: root.width * 2 * 1.4142;
                circle.opacity: 0.;
            }
        ]
        transitions [
            in pressed : {
                animate circle.width { duration: 1s; easing: ease; }
                animate circle.opacity { delay: 0.5s; duration: 300ms; easing: ease; }
            }
            out pressed : {
            }
        ]

    }

}

export _ := Window {
    width: 300px;
    height: 300px;
    Wow {

    }
}

We definitievly should add some feature to our animation system so such things can be easier to do.

[cppdev123]

Found that clip restricts the visible part to the parent and using your hack I tried to make many circles to display one on each press if the previous is still running (a hack too) but the macro proc panicked due to unreachable code !

export struct SPoint := {
        x: float,
        y: float,
    }

    export global RadiusCalc := {
        callback calc-radius(SPoint, float, float) -> float; // mouse pos, parent pos, width, height
    }

    export RipplCircle := Rectangle {
        property <length> radius: 0;
        property <length> mx: 0;
        property <length> my: 0;
        property <float> fwidth: 0;
        property <float> fheight: 0;
        property <bool> running: false;
        width: radius * 2;
        height: radius * 2;
        x: mx - width / 2;
        y: my - height / 2;
        background: rgba(0,0,0, 0.5);
        border-radius: width / 2;

        property <float> counter: 0;
        animate counter { duration: 800ms; }

        states [
            ripple when counter > 0 && counter < 0.1 : {
                radius: RadiusCalc.calc_radius({ x: mx / 1px, y: my / 1px }, fwidth, fheight) * 1px;
                opacity: 0.;
                running: true;
            }
        ]

        transitions [
            in ripple: {
                animate radius { duration: 800ms; }
                animate opacity { duration: 800ms; }
            }
        ]
    }

    export InkEffect := Rectangle {

        preferred-width: 200px;
        preferred-height: 200px;
        background: white;
        clip: true;

        circle1 := RipplCircle {}
        // un commenting the next line causes macro proc panick
        //circle2 := RipplCircle { background: green; }

        tch := TouchArea {
            width: parent.width;
            height: parent.height;
            pointer-event(ev) => {
                if (ev.kind == PointerEventKind.down && ev.button == PointerEventButton.left) {
                    if (!circle1.running) {
                        circle1.mx = mouse-x;
                        circle1.my = mouse-y;
                        circle1.fwidth = parent.width / 1px;
                        circle1.fheight = parent.height / 1px;
                        circle1.counter = circle1.counter == 0 ? 0.1 : 0;
                    }
                }
            }

        }       
    }

What is needed is a method to create objects dynamically and destroy them on animation end as qml does

[ogoffart]

I think sequence of state would solve this issue: https://github.com/slint-ui/slint/issues/2255 So closing as a duplicate