me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Simplify gallery example a bit

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2025-02-09 08:02:05 +01:00
parent 17395e8320
commit ec4d007a4c
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
3 changed files with 119 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

12
core/src/animation.rs
View file

@ -13,6 +13,7 @@ where
T: Clone + Copy + PartialEq + Float, T: Clone + Copy + PartialEq + Float,
{ {
raw: lilt::Animated<T, Instant>, raw: lilt::Animated<T, Instant>,
duration: Duration, // TODO: Expose duration getter in `lilt`
} }
impl<T> Animation<T> impl<T> Animation<T>
@ -23,6 +24,7 @@ where
pub fn new(state: T) -> Self { pub fn new(state: T) -> Self {
Self { Self {
raw: lilt::Animated::new(state), raw: lilt::Animated::new(state),
duration: Duration::from_millis(100),
} }
} }
@ -58,6 +60,7 @@ where
/// Sets the duration of the [`Animation`] to the given value. /// Sets the duration of the [`Animation`] to the given value.
pub fn duration(mut self, duration: Duration) -> Self { pub fn duration(mut self, duration: Duration) -> Self {
self.raw = self.raw.duration(duration.as_secs_f32() * 1_000.0); self.raw = self.raw.duration(duration.as_secs_f32() * 1_000.0);
self.duration = duration;
self self
} }
@ -133,4 +136,13 @@ impl Animation<bool> {
{ {
self.raw.animate_bool(start, end, at) self.raw.animate_bool(start, end, at)
} }
/// Returns the remaining [`Duration`] of the [`Animation`].
pub fn remaining(&self, at: Instant) -> Duration {
Duration::from_secs_f32(self.interpolate(
self.duration.as_secs_f32(),
0.0,
at,
))
}
} }

2
examples/gallery/src/civitai.rs
View file

@ -69,7 +69,7 @@ impl Image {
.split("/") .split("/")
.map(|part| { .map(|part| {
if part.starts_with("width=") { if part.starts_with("width=") {
format!("width={width}") format!("width={}", width * 2) // High DPI
} else { } else {
part.to_owned() part.to_owned()
} }

213
examples/gallery/src/main.rs
View file

@ -18,7 +18,6 @@ use iced::{
}; };
use std::collections::HashMap; use std::collections::HashMap;
use std::time::Duration;
fn main() -> iced::Result { fn main() -> iced::Result {
iced::application("Gallery - Iced", Gallery::update, Gallery::view) iced::application("Gallery - Iced", Gallery::update, Gallery::view)
@ -68,7 +67,7 @@ impl Gallery {
let is_animating = self let is_animating = self
.previews .previews
.values() .values()
.any(|thumbnail| thumbnail.is_animating(self.now)) .any(|preview| preview.is_animating(self.now))
|| self.viewer.is_animating(self.now); || self.viewer.is_animating(self.now);
if is_animating { if is_animating {
@ -114,28 +113,28 @@ impl Gallery {
Task::none() Task::none()
} }
Message::ThumbnailDownloaded(id, Ok(rgba)) => { Message::ThumbnailDownloaded(id, Ok(rgba)) => {
let blurhash = match self.previews.remove(&id) { let thumbnail = if let Some(preview) = self.previews.remove(&id)
Some(Preview::Blurhash(blurhash)) => Some(blurhash), {
_ => None, preview.load(rgba)
} else {
Preview::ready(rgba)
}; };
let _ = self let _ = self.previews.insert(id, thumbnail);
.previews
.insert(id, Preview::thumbnail(self.now, blurhash, rgba));
Task::none() Task::none()
} }
Message::ThumbnailHovered(id, is_hovered) => { Message::ThumbnailHovered(id, is_hovered) => {
if let Some(Preview::Thumbnail { zoom, .. }) = if let Some(preview) = self.previews.get_mut(&id) {
self.previews.get_mut(&id) preview.toggle_zoom(is_hovered);
{
zoom.go_mut(is_hovered);
} }
Task::none() Task::none()
} }
Message::BlurhashDecoded(id, Ok(rgba)) => { Message::BlurhashDecoded(id, Ok(rgba)) => {
let _ = self.previews.insert(id, Preview::blurhash(rgba)); if !self.previews.contains_key(&id) {
let _ = self.previews.insert(id, Preview::loading(rgba));
}
Task::none() Task::none()
} }
@ -202,59 +201,38 @@ fn card<'a>(
preview: Option<&'a Preview>, preview: Option<&'a Preview>,
now: Instant, now: Instant,
) -> Element<'a, Message> { ) -> Element<'a, Message> {
let image: Element<'_, _> = match preview { let image = if let Some(preview) = preview {
Some(Preview::Blurhash(Blurhash { handle, fade_in })) => image(handle) let thumbnail: Element<'_, _> = if let Preview::Ready {
.width(Fill)
.height(Fill)
.content_fit(ContentFit::Cover)
.opacity(fade_in.interpolate(0.0, Blurhash::MAX_OPACITY, now))
.into(),
// Blurhash still needs to fade all the way in
Some(Preview::Thumbnail {
blurhash: Some(blurhash),
..
}) if blurhash.fade_in.is_animating(now) => image(&blurhash.handle)
.width(Fill)
.height(Fill)
.content_fit(ContentFit::Cover)
.opacity(blurhash.fade_in.interpolate(
0.0,
Blurhash::MAX_OPACITY,
now,
))
.into(),
Some(Preview::Thumbnail {
blurhash,
thumbnail, thumbnail,
fade_in, fade_in,
zoom, zoom,
}) => stack![] ..
// Transition between blurhash & thumbnail over the fade-in period } = &preview
.push_maybe( {
blurhash.as_ref().filter(|_| fade_in.is_animating(now)).map( image(thumbnail)
|blurhash| { .width(Fill)
image(&blurhash.handle) .height(Fill)
.width(Fill) .content_fit(ContentFit::Cover)
.height(Fill) .opacity(fade_in.interpolate(0.0, 1.0, now))
.content_fit(ContentFit::Cover) .scale(zoom.interpolate(1.0, 1.1, now))
.opacity(fade_in.interpolate( .into()
Blurhash::MAX_OPACITY, } else {
0.0, horizontal_space().into()
now, };
))
}, if let Some(blurhash) = preview.blurhash(now) {
), let blurhash = image(&blurhash.handle)
) .width(Fill)
.push( .height(Fill)
image(thumbnail) .content_fit(ContentFit::Cover)
.width(Fill) .opacity(blurhash.fade_in.interpolate(0.0, 1.0, now));
.height(Fill)
.content_fit(ContentFit::Cover) stack![blurhash, thumbnail].into()
.opacity(fade_in.interpolate(0.0, 1.0, now)) } else {
.scale(zoom.interpolate(1.0, 1.1, now)), thumbnail
) }
.into(), } else {
None => horizontal_space().into(), horizontal_space().into()
}; };
let card = mouse_area( let card = mouse_area(
@ -267,7 +245,7 @@ fn card<'a>(
.on_exit(Message::ThumbnailHovered(metadata.id, false)); .on_exit(Message::ThumbnailHovered(metadata.id, false));
if let Some(preview) = preview { if let Some(preview) = preview {
let is_thumbnail = matches!(preview, Preview::Thumbnail { .. }); let is_thumbnail = matches!(preview, Preview::Ready { .. });
button(card) button(card)
.on_press_maybe(is_thumbnail.then_some(Message::Open(metadata.id))) .on_press_maybe(is_thumbnail.then_some(Message::Open(metadata.id)))
@ -289,19 +267,11 @@ fn placeholder<'a>() -> Element<'a, Message> {
.into() .into()
} }
struct Blurhash {
fade_in: Animation<bool>,
handle: image::Handle,
}
impl Blurhash {
const FADE_IN: Duration = Duration::from_millis(200);
const MAX_OPACITY: f32 = 0.6;
}
enum Preview { enum Preview {
Blurhash(Blurhash), Loading {
Thumbnail { blurhash: Blurhash,
},
Ready {
blurhash: Option<Blurhash>, blurhash: Option<Blurhash>,
thumbnail: image::Handle, thumbnail: image::Handle,
fade_in: Animation<bool>, fade_in: Animation<bool>,
@ -309,59 +279,88 @@ enum Preview {
}, },
} }
struct Blurhash {
handle: image::Handle,
fade_in: Animation<bool>,
}
impl Preview { impl Preview {
const WIDTH: u32 = 320; const WIDTH: u32 = 320;
const HEIGHT: u32 = 410; const HEIGHT: u32 = 410;
fn blurhash(rgba: Rgba) -> Self { fn loading(rgba: Rgba) -> Self {
Self::Blurhash(Blurhash { Self::Loading {
fade_in: Animation::new(false).duration(Blurhash::FADE_IN).go(true), blurhash: Blurhash {
handle: image::Handle::from_rgba( fade_in: Animation::new(false).slow().go(true),
rgba.width, handle: image::Handle::from_rgba(
rgba.height, rgba.width,
rgba.pixels, rgba.height,
), rgba.pixels,
}) ),
},
}
} }
fn thumbnail(now: Instant, blurhash: Option<Blurhash>, rgba: Rgba) -> Self { fn ready(rgba: Rgba) -> Self {
// Delay the thumbnail fade in until blurhash is fully Self::Ready {
// faded in itself blurhash: None,
let delay = blurhash
.as_ref()
.map(|blurhash| {
Duration::from_secs_f32(blurhash.fade_in.interpolate(
0.0,
Blurhash::FADE_IN.as_secs_f32(),
now,
))
})
.unwrap_or_default();
Self::Thumbnail {
blurhash,
thumbnail: image::Handle::from_rgba( thumbnail: image::Handle::from_rgba(
rgba.width, rgba.width,
rgba.height, rgba.height,
rgba.pixels, rgba.pixels,
), ),
fade_in: Animation::new(false).very_slow().delay(delay).go(true), fade_in: Animation::new(false).slow().go(true),
zoom: Animation::new(false) zoom: Animation::new(false)
.quick() .quick()
.easing(animation::Easing::EaseInOut), .easing(animation::Easing::EaseInOut),
} }
} }
fn load(self, rgba: Rgba) -> Self {
let Self::Loading { blurhash } = self else {
return self;
};
Self::Ready {
blurhash: Some(blurhash),
thumbnail: image::Handle::from_rgba(
rgba.width,
rgba.height,
rgba.pixels,
),
fade_in: Animation::new(false).slow().go(true),
zoom: Animation::new(false)
.quick()
.easing(animation::Easing::EaseInOut),
}
}
fn toggle_zoom(&mut self, enabled: bool) {
if let Self::Ready { zoom, .. } = self {
zoom.go_mut(enabled);
}
}
fn is_animating(&self, now: Instant) -> bool { fn is_animating(&self, now: Instant) -> bool {
match self { match &self {
Preview::Blurhash(Blurhash { fade_in, .. }) => { Self::Loading { blurhash } => blurhash.fade_in.is_animating(now),
fade_in.is_animating(now) Self::Ready { fade_in, zoom, .. } => {
}
Preview::Thumbnail { fade_in, zoom, .. } => {
fade_in.is_animating(now) || zoom.is_animating(now) fade_in.is_animating(now) || zoom.is_animating(now)
} }
} }
} }
fn blurhash(&self, now: Instant) -> Option<&Blurhash> {
match self {
Self::Loading { blurhash, .. } => Some(blurhash),
Self::Ready {
blurhash: Some(blurhash),
fade_in,
..
} if fade_in.is_animating(now) => Some(blurhash),
_ => None,
}
}
} }
struct Viewer { struct Viewer {