Flickable - no animated scrolling after releasing the mouse

[oklemencic]

Hi everyone,

I am currently evaluating Slint to see if it fits for our embedded touch-based products. I have tried a few things and the Slint language is generally really great :)

One thing which did not work for me is the animated scrolling after the mouse is released.

I have looked at the sources and it seems there should be an animation of the viewport:

slint/internal/core/flickable.rs

Lines 158 to 161 in 4230ac2

	let anim = PropertyAnimation {
	duration,
	easing: EasingCurve::CubicBezier([0.0, 0.0, 0.58, 1.0]),
	..PropertyAnimation::default()

In my demo the flickable only scrolls a very small distance. I tried using the GL backend and the QT backend (both on Windows).
Is this a bug?

    f := Flickable {
        width:  800px;
        height: 420;
        viewport_width: parent.width;
        viewport_height: 2100px;
        interactive: true;

        for data[index] in [
            { text: "Blue", color: #0000ff},
            { text: "Red", color: #ff0000},
            { text: "Green", color: #00ff00},
            { text: "Yellow", color: #ffff00 },
            { text: "Blue", color: #0000ff},
            { text: "Red", color: #ff0000},
            { text: "Green", color: #00ff00},
            { text: "Yellow", color: #ffff00 },
            { text: "Yellow", color: #ffff00 },
            { text: "Blue", color: #0000ff},
            { text: "Red", color: #ff0000},
            { text: "Green", color: #00ff00},
            { text: "Yellow", color: #ffff00 },
        ] : TouchArea {
            y: 10px + index * 200px;
            x: 10px;
            width: 100px;
            height: 90px;
            Rectangle {
                background: parent.pressed ? blue : parent.has_hover ? green : data.color;
            }
        }
    }

[ogoffart]

It seems it is indeed a bug. The computation of the speed might be wrong and the animation might be too short or a combination of the two.

[oklemencic]

Thanks. Tested the new version with the fix efd6c63 and this works fine :)

[oklemencic]

Thanks for the quick reply.

I tried to adapt the flickable source code at

slint/internal/core/flickable.rs

Lines 153 to 169 in 4230ac2

	let duration = 100;
	let final_pos = ensure_in_bound(
	flick,
	inner.pressed_viewport_pos + dist + speed * (duration as f32),
	);
	let anim = PropertyAnimation {
	duration,
	easing: EasingCurve::CubicBezier([0.0, 0.0, 0.58, 1.0]),
	..PropertyAnimation::default()
	};
	(Flickable::FIELD_OFFSETS.viewport + Rectangle::FIELD_OFFSETS.x)
	.apply_pin(flick)
	.set_animated_value(final_pos.x, anim.clone());
	(Flickable::FIELD_OFFSETS.viewport + Rectangle::FIELD_OFFSETS.y)
	.apply_pin(flick)
	.set_animated_value(final_pos.y, anim);
	}

and replaced everything with this code, but unfortunately I get the same behavior. So I guess it's something "deeper".

let final_y = if dist.y > 0.0 { 0. } else { -1000.0 };
println!("Flickable: mouse released. Pos: {} Dist: {}, Animation final value: {}", event.pos().unwrap().y, dist.y, final_y);
let anim = PropertyAnimation {
                duration: 2000,
                easing: EasingCurve::Linear,
                ..PropertyAnimation::default()
            };
(Flickable::FIELD_OFFSETS.viewport + Rectangle::FIELD_OFFSETS.y)
                .apply_pin(flick)
                .set_animated_value(final_y, anim);

I now also tried to manually set the viewport-y upon button click and added an animate directive like shown below, but this only generated only self->f_6.viewport.y.set((- 1000)) and does not generate something with set_animated_value:

Button {
            text: "set -1000px";
            width: 100px;
            height: 40px;
            clicked => { 
                debug("set -1000px");
                f.viewport-y = -1000px;
             }
        }

f := Flickable {
...
animate viewport.y {
            duration: 500ms;
        }

}

Is there some "configuration" which properties can be animated?
Shall I create a issue for this?

[ogoffart]

Maybe the bug is somewhere else. I'll have to investigate. I filled issue #951