diff options
author | 2023-06-07 15:19:11 -0700 | |
---|---|---|
committer | 2023-06-07 15:42:13 -0700 | |
commit | 2ebc92319711e6fa0dda310939257334625b59c9 (patch) | |
tree | 3643af813fbb72e4308893cd33d383c7a0c12986 /examples | |
parent | cdfb8b30680de164280b8b90fbc08a1638e597e2 (diff) | |
download | iced-2ebc92319711e6fa0dda310939257334625b59c9.tar.gz iced-2ebc92319711e6fa0dda310939257334625b59c9.tar.bz2 iced-2ebc92319711e6fa0dda310939257334625b59c9.zip |
feat: use lyon for easing
Diffstat (limited to 'examples')
-rw-r--r-- | examples/loading_spinners/Cargo.toml (renamed from examples/progress_indicators/Cargo.toml) | 5 | ||||
-rw-r--r-- | examples/loading_spinners/README.md (renamed from examples/progress_indicators/README.md) | 6 | ||||
-rw-r--r-- | examples/loading_spinners/src/circular.rs (renamed from examples/progress_indicators/src/circular.rs) | 47 | ||||
-rw-r--r-- | examples/loading_spinners/src/easing.rs | 132 | ||||
-rw-r--r-- | examples/loading_spinners/src/linear.rs (renamed from examples/progress_indicators/src/linear.rs) | 9 | ||||
-rw-r--r-- | examples/loading_spinners/src/main.rs (renamed from examples/progress_indicators/src/main.rs) | 64 | ||||
-rw-r--r-- | examples/progress_indicators/src/easing.rs | 67 |
7 files changed, 214 insertions, 116 deletions
diff --git a/examples/progress_indicators/Cargo.toml b/examples/loading_spinners/Cargo.toml index 89ceb127..f37017c6 100644 --- a/examples/progress_indicators/Cargo.toml +++ b/examples/loading_spinners/Cargo.toml @@ -1,5 +1,5 @@ [package] -name = "progress_indicators" +name = "loading_spinners" version = "0.1.0" authors = ["Nick Senger <dev@nsenger.com>"] edition = "2021" @@ -10,4 +10,5 @@ flo_curves = "0.7" iced = { path = "../..", features = ["canvas"] } iced_core = { path = "../../core" } iced_widget = { path = "../../widget" } -lazy_static = "1.4" +once_cell = "1" +lyon = "1" diff --git a/examples/progress_indicators/README.md b/examples/loading_spinners/README.md index acacca8f..3573c6f6 100644 --- a/examples/progress_indicators/README.md +++ b/examples/loading_spinners/README.md @@ -1,6 +1,6 @@ -## Progress indicators +## Loading Spinners -Example implementation of animated indeterminate progress indicators. +Example implementation of animated indeterminate loading spinners. <div align="center"> <a href="https://gfycat.com/importantdevotedhammerheadbird"> @@ -10,5 +10,5 @@ Example implementation of animated indeterminate progress indicators. You can run it with `cargo run`: ``` -cargo run --package progress_indicators +cargo run --package loading_spinners ``` diff --git a/examples/progress_indicators/src/circular.rs b/examples/loading_spinners/src/circular.rs index 2a9f7e1e..0d01e7a1 100644 --- a/examples/progress_indicators/src/circular.rs +++ b/examples/loading_spinners/src/circular.rs @@ -14,7 +14,6 @@ use iced_core::{ use super::easing::{self, Easing}; -use std::borrow::Cow; use std::f32::consts::PI; use std::time::Duration; @@ -22,7 +21,7 @@ type R<Theme> = iced_widget::renderer::Renderer<Theme>; const MIN_RADIANS: f32 = PI / 8.0; const WRAP_RADIANS: f32 = 2.0 * PI - PI / 4.0; -const PROCESSION_VELOCITY: u32 = u32::MAX / 120; +const BASE_ROTATION_SPEED: u32 = u32::MAX / 80; #[allow(missing_debug_implementations)] pub struct Circular<'a, Theme> @@ -32,8 +31,9 @@ where size: f32, bar_height: f32, style: <Theme as StyleSheet>::Style, - easing: Cow<'a, Easing>, + easing: &'a Easing, cycle_duration: Duration, + rotation_speed: u32, } impl<'a, Theme> Circular<'a, Theme> @@ -46,8 +46,9 @@ where size: 40.0, bar_height: 4.0, style: <Theme as StyleSheet>::Style::default(), - easing: Cow::Borrowed(&easing::STANDARD), + easing: &easing::STANDARD, cycle_duration: Duration::from_millis(600), + rotation_speed: BASE_ROTATION_SPEED, } } @@ -70,8 +71,8 @@ where } /// Sets the easing of this [`Circular`]. - pub fn easing(mut self, easing: impl Into<Cow<'a, Easing>>) -> Self { - self.easing = easing.into(); + pub fn easing(mut self, easing: &'a Easing) -> Self { + self.easing = easing; self } @@ -80,6 +81,14 @@ where self.cycle_duration = duration / 2; self } + + /// Sets the rotation speed of this [`Circular`]. Must be set to between 0.0 and 10.0. + /// Defaults to 1.0. + pub fn rotation_speed(mut self, speed: f32) -> Self { + let multiplier = speed.min(10.0).max(0.0); + self.rotation_speed = (BASE_ROTATION_SPEED as f32 * multiplier) as u32; + self + } } impl<'a, Theme> Default for Circular<'a, Theme> @@ -121,13 +130,13 @@ impl State { Self::Expanding { procession, .. } => Self::Contracting { start: now, progress: 0.0, - procession: procession.wrapping_add(PROCESSION_VELOCITY), + procession: procession.wrapping_add(BASE_ROTATION_SPEED), }, Self::Contracting { procession, .. } => Self::Expanding { start: now, progress: 0.0, procession: procession.wrapping_add( - PROCESSION_VELOCITY.wrapping_add( + BASE_ROTATION_SPEED.wrapping_add( ((WRAP_RADIANS / (2.0 * PI)) * u32::MAX as f32) as u32, ), ), @@ -143,18 +152,24 @@ impl State { } } - fn timed_transition(&self, cycle_duration: Duration, now: Instant) -> Self { + fn timed_transition( + &self, + cycle_duration: Duration, + rotation_speed: u32, + now: Instant, + ) -> Self { let elapsed = now.duration_since(self.start()); match elapsed { elapsed if elapsed > cycle_duration => self.next(now), - _ => self.with_elapsed(cycle_duration, elapsed), + _ => self.with_elapsed(cycle_duration, rotation_speed, elapsed), } } fn with_elapsed( &self, cycle_duration: Duration, + rotation_speed: u32, elapsed: Duration, ) -> Self { let progress = elapsed.as_secs_f32() / cycle_duration.as_secs_f32(); @@ -164,14 +179,14 @@ impl State { } => Self::Expanding { start: *start, progress, - procession: procession.wrapping_add(PROCESSION_VELOCITY), + procession: procession.wrapping_add(rotation_speed), }, Self::Contracting { start, procession, .. } => Self::Contracting { start: *start, progress, - procession: procession.wrapping_add(PROCESSION_VELOCITY), + procession: procession.wrapping_add(rotation_speed), }, } } @@ -231,7 +246,11 @@ where let state = tree.state.downcast_mut::<State>(); if let Event::Window(window::Event::RedrawRequested(now)) = event { - *state = state.timed_transition(self.cycle_duration, now); + *state = state.timed_transition( + self.cycle_duration, + self.rotation_speed, + now, + ); shell.request_redraw(RedrawRequest::NextFrame); } @@ -263,7 +282,7 @@ where state, style: &self.style, bar_height: self.bar_height, - easing: self.easing.as_ref(), + easing: self.easing, }, &(), renderer, diff --git a/examples/loading_spinners/src/easing.rs b/examples/loading_spinners/src/easing.rs new file mode 100644 index 00000000..04befa15 --- /dev/null +++ b/examples/loading_spinners/src/easing.rs @@ -0,0 +1,132 @@ +use iced_core::Point; +use lyon::algorithms::measure::PathMeasurements; +use lyon::path::builder::NoAttributes; +use lyon::path::path::BuilderImpl; +use lyon::path::Path; + +use once_cell::sync::Lazy; + +pub static EMPHASIZED: Lazy<Easing> = Lazy::new(|| { + Easing::builder() + .cubic_bezier_to([0.05, 0.0], [0.133333, 0.06], [0.166666, 0.4]) + .cubic_bezier_to([0.208333, 0.82], [0.25, 1.0], [1.0, 1.0]) + .build() +}); + +pub static EMPHASIZED_DECELERATE: Lazy<Easing> = Lazy::new(|| { + Easing::builder() + .cubic_bezier_to([0.05, 0.7], [0.1, 1.0], [1.0, 1.0]) + .build() +}); + +pub static EMPHASIZED_ACCELERATE: Lazy<Easing> = Lazy::new(|| { + Easing::builder() + .cubic_bezier_to([0.3, 0.0], [0.8, 0.15], [1.0, 1.0]) + .build() +}); + +pub static STANDARD: Lazy<Easing> = Lazy::new(|| { + Easing::builder() + .cubic_bezier_to([0.2, 0.0], [0.0, 1.0], [1.0, 1.0]) + .build() +}); + +pub static STANDARD_DECELERATE: Lazy<Easing> = Lazy::new(|| { + Easing::builder() + .cubic_bezier_to([0.0, 0.0], [0.0, 1.0], [1.0, 1.0]) + .build() +}); + +pub static STANDARD_ACCELERATE: Lazy<Easing> = Lazy::new(|| { + Easing::builder() + .cubic_bezier_to([0.3, 0.0], [1.0, 1.0], [1.0, 1.0]) + .build() +}); + +pub struct Easing { + path: Path, + measurements: PathMeasurements, +} + +impl Easing { + pub fn builder() -> Builder { + Builder::new() + } + + pub fn y_at_x(&self, x: f32) -> f32 { + let mut sampler = self.measurements.create_sampler( + &self.path, + lyon::algorithms::measure::SampleType::Normalized, + ); + let sample = sampler.sample(x); + + sample.position().y + } +} + +pub struct Builder(NoAttributes<BuilderImpl>); + +impl Builder { + pub fn new() -> Self { + let mut builder = Path::builder(); + builder.begin(lyon::geom::point(0.0, 0.0)); + + Self(builder) + } + + /// Adds a line segment. Points must be between 0,0 and 1,1 + pub fn line_to(mut self, to: impl Into<Point>) -> Self { + self.0.line_to(Self::point(to)); + + self + } + + /// Adds a quadratic bézier curve. Points must be between 0,0 and 1,1 + pub fn quadratic_bezier_to( + mut self, + ctrl: impl Into<Point>, + to: impl Into<Point>, + ) -> Self { + self.0 + .quadratic_bezier_to(Self::point(ctrl), Self::point(to)); + + self + } + + /// Adds a cubic bézier curve. Points must be between 0,0 and 1,1 + pub fn cubic_bezier_to( + mut self, + ctrl1: impl Into<Point>, + ctrl2: impl Into<Point>, + to: impl Into<Point>, + ) -> Self { + self.0.cubic_bezier_to( + Self::point(ctrl1), + Self::point(ctrl2), + Self::point(to), + ); + + self + } + + pub fn build(mut self) -> Easing { + self.0.line_to(lyon::geom::point(1.0, 1.0)); + self.0.end(false); + + let path = self.0.build(); + let measurements = PathMeasurements::from_path(&path, 0.0); + + Easing { path, measurements } + } + + fn point(p: impl Into<Point>) -> lyon::geom::Point<f32> { + let p: Point = p.into(); + lyon::geom::point(p.x.min(1.0).max(0.0), p.y.min(1.0).max(0.0)) + } +} + +impl Default for Builder { + fn default() -> Self { + Self::new() + } +} diff --git a/examples/progress_indicators/src/linear.rs b/examples/loading_spinners/src/linear.rs index 735892e7..eb8a7408 100644 --- a/examples/progress_indicators/src/linear.rs +++ b/examples/loading_spinners/src/linear.rs @@ -13,7 +13,6 @@ use iced_core::{ use super::easing::{self, Easing}; -use std::borrow::Cow; use std::time::Duration; #[allow(missing_debug_implementations)] @@ -25,7 +24,7 @@ where width: Length, height: Length, style: <Renderer::Theme as StyleSheet>::Style, - easing: Cow<'a, Easing>, + easing: &'a Easing, cycle_duration: Duration, } @@ -40,7 +39,7 @@ where width: Length::Fixed(100.0), height: Length::Fixed(4.0), style: <Renderer::Theme as StyleSheet>::Style::default(), - easing: Cow::Borrowed(&easing::STANDARD), + easing: &easing::STANDARD, cycle_duration: Duration::from_millis(600), } } @@ -67,8 +66,8 @@ where } /// Sets the motion easing of this [`Linear`]. - pub fn easing(mut self, easing: impl Into<Cow<'a, Easing>>) -> Self { - self.easing = easing.into(); + pub fn easing(mut self, easing: &'a Easing) -> Self { + self.easing = easing; self } diff --git a/examples/progress_indicators/src/main.rs b/examples/loading_spinners/src/main.rs index 136b8d8c..a78e9590 100644 --- a/examples/progress_indicators/src/main.rs +++ b/examples/loading_spinners/src/main.rs @@ -12,17 +12,17 @@ use circular::Circular; use linear::Linear; pub fn main() -> iced::Result { - ProgressIndicators::run(Settings { + LoadingSpinners::run(Settings { antialiasing: true, ..Default::default() }) } -struct ProgressIndicators { +struct LoadingSpinners { cycle_duration: f32, } -impl Default for ProgressIndicators { +impl Default for LoadingSpinners { fn default() -> Self { Self { cycle_duration: 2.0, @@ -35,7 +35,7 @@ enum Message { CycleDurationChanged(f32), } -impl Application for ProgressIndicators { +impl Application for LoadingSpinners { type Message = Message; type Flags = (); type Executor = executor::Default; @@ -46,7 +46,7 @@ impl Application for ProgressIndicators { } fn title(&self) -> String { - String::from("Progress Indicators - Iced") + String::from("Loading Spinners - Iced") } fn update(&mut self, message: Message) -> Command<Message> { @@ -60,25 +60,39 @@ impl Application for ProgressIndicators { } fn view(&self) -> Element<Message> { - let column = easing::EXAMPLES - .iter() - .zip(["Decelerating:", "Accelerating:", "Standard:"]) - .fold(column![], |column, (easing, label)| { - column.push( - row![ - text(label).width(150), - Linear::new().easing(easing).cycle_duration( - Duration::from_secs_f32(self.cycle_duration) - ), - Circular::new().easing(easing).cycle_duration( - Duration::from_secs_f32(self.cycle_duration) - ) - ] - .align_items(iced::Alignment::Center) - .spacing(20.0), - ) - }) - .spacing(20); + let column = [ + &easing::EMPHASIZED, + &easing::EMPHASIZED_DECELERATE, + &easing::EMPHASIZED_ACCELERATE, + &easing::STANDARD, + &easing::STANDARD_DECELERATE, + &easing::STANDARD_ACCELERATE, + ] + .iter() + .zip([ + "Emphasized:", + "Emphasized Decelerate:", + "Emphasized Accelerate:", + "Standard:", + "Standard Decelerate:", + "Standard Accelerate:", + ]) + .fold(column![], |column, (easing, label)| { + column.push( + row![ + text(label).width(250), + Linear::new().easing(easing).cycle_duration( + Duration::from_secs_f32(self.cycle_duration) + ), + Circular::new().easing(easing).cycle_duration( + Duration::from_secs_f32(self.cycle_duration) + ) + ] + .align_items(iced::Alignment::Center) + .spacing(20.0), + ) + }) + .spacing(20); container( column.push( @@ -87,7 +101,7 @@ impl Application for ProgressIndicators { slider(1.0..=1000.0, self.cycle_duration * 100.0, |x| { Message::CycleDurationChanged(x / 100.0) }) - .width(150.0) + .width(200.0) .into(), text(format!("{:.2}s", self.cycle_duration)).into(), ]) diff --git a/examples/progress_indicators/src/easing.rs b/examples/progress_indicators/src/easing.rs deleted file mode 100644 index 10479659..00000000 --- a/examples/progress_indicators/src/easing.rs +++ /dev/null @@ -1,67 +0,0 @@ -use flo_curves::bezier::Curve; -use flo_curves::*; -use lazy_static::lazy_static; - -use std::borrow::Cow; - -lazy_static! { - pub static ref EXAMPLES: [Easing; 3] = [ - Easing::CubicBezier(Curve::from_points( - Coord2(0.0, 0.0), - (Coord2(0.05, 0.7), Coord2(0.1, 1.0)), - Coord2(1.0, 1.0), - )), - Easing::CubicBezier(Curve::from_points( - Coord2(0.0, 0.0), - (Coord2(0.3, 0.0), Coord2(0.8, 0.15)), - Coord2(1.0, 1.0), - )), - Easing::CubicBezier(Curve::from_points( - Coord2(0.0, 0.0), - (Coord2(0.2, 0.0), Coord2(0.0, 1.0)), - Coord2(1.0, 1.0), - )) - ]; - pub static ref STANDARD: Easing = { - Easing::CubicBezier(Curve::from_points( - Coord2(0.0, 0.0), - (Coord2(0.2, 0.0), Coord2(0.0, 1.0)), - Coord2(1.0, 1.0), - )) - }; -} - -#[derive(Clone, Debug)] -pub enum Easing { - BezierPath(Vec<Curve<Coord2>>), - CubicBezier(Curve<Coord2>), -} - -impl Easing { - pub fn y_at_x(&self, x: f32) -> f32 { - let x = x as f64; - - match self { - Self::BezierPath(curves) => curves - .iter() - .find_map(|curve| { - (curve.start_point().0 <= x && curve.end_point().0 >= x) - .then(|| curve.point_at_pos(x).1 as f32) - }) - .unwrap_or_default(), - Self::CubicBezier(curve) => curve.point_at_pos(x).1 as f32, - } - } -} - -impl<'a> From<Easing> for Cow<'a, Easing> { - fn from(easing: Easing) -> Self { - Cow::Owned(easing) - } -} - -impl<'a> From<&'a Easing> for Cow<'a, Easing> { - fn from(easing: &'a Easing) -> Self { - Cow::Borrowed(easing) - } -} |