Add animation when an item is added to the list #2

Manually merged
hulthe merged 2 commits from add-animation into master 2026-10-03 15:56:14 +02:00
5 changed files with 33 additions and 2 deletions

No files matched your search

+9
View File
@@ -5,3 +5,12 @@ members = [
"srv",
"gui",
]
# Enable max optimizations for dependencies, but not for our code:
# Very helpful when developing in Slint.
[profile.dev.package."*"]
opt-level = 3
# Enable only a small amount of optimization in debug mode
[profile.dev]
opt-level = 1
-1
View File
@@ -49,7 +49,6 @@ features = [
"backend-android-activity-06",
]
[target.'cfg(target_os = "linux")'.dependencies]
tokio = { version = "1.48.0", default-features = false, features = ["fs", "rt-multi-thread"] }
xdg = "3.0.0"
+2
View File
@@ -93,6 +93,7 @@ fn update_slint_list(new_list: Vec<Item>, list: &VecModel<ui::SItem>) {
name: item.name.to_shared_string(),
checked: item.data.checked,
amount: item.data.amount as i32,
just_added: false,
})
.for_each(|item| list.push(item));
}
@@ -196,6 +197,7 @@ pub fn run() -> Result<(), anyhow::Error> {
checked: false,
name: item.clone(),
amount: 1,
just_added: true,
});
let conf = conf.clone();
io.spawn(async move || {
+18 -1
View File
@@ -113,6 +113,23 @@ component PlusMinus inherits HorizontalLayout {
component GoodListItemAdd inherits Rectangle {
in-out property <SItem> item;
// Animate when this item appears.
transform-scale: item.just-added ? 90% : 100%;
opacity: item.just-added ? 0 : 100%;
init => {
self.transform-scale = 100%;
self.opacity = 100%;
item.just-added = false;
}
animate transform-scale {
duration: 500ms;
easing: ease-out-bounce;
}
animate opacity {
duration: 300ms;
easing: ease-out;
}
background: Palette.alternate-background;
border-radius: 8pt;
border-width: 10pt;
@@ -169,7 +186,7 @@ component GoodsListAdd {
for item in items: VerticalLayout {
GoodListItemAdd {
item: item;
item <=> item;
}
Rectangle {
+4
View File
@@ -2,6 +2,10 @@ export struct SItem {
name: string,
checked: bool,
amount: int,
/// Whether the item was just added by the user.
/// Determines whether the add-animation plays.
just_added: bool,
}
export struct SButtonItem{