dnrops
/
zng
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More var docs and changes.

This commit is contained in:
Samuel Guerra 2024-01-30 11:47:24 -03:00
parent 9c15d12bff
commit bfdb1a242e
5 changed files with 110 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
TODO/_current.md
View File

@ -1,3 +1,6 @@
* Review image caching in animation example.
- Memory is growing after multiple changes between modifiers.
# Documentation
* Add build dependencies for each operating system on the main `README.md`.

30
TODO/topics/Layout.md
View File

@ -49,4 +49,32 @@
# Responsive Layout
* Right now we use the `actual_width` to implement something *media query* and give it a margin of error
for different localizations.
for different localizations.
# Easing Layout
* Implement property that a animates between layout and transform changes.
```
/// Chase animate the widget inner bounds layout and transform.
///
/// The `duration` defines the maximum duration used for changes equal or greater then 50dip, smaller changes use
/// a proportional smaller duration.
///
/// Inline widgets only animate the transform, not size.
#[property(WIDGET_INNER, default(0.ms(), EasingFn::None))]
pub fn easing_layout(child: impl UiNode, duration: impl IntoVar<Duration>, easing: impl IntoVar<EasingFn>) -> impl UiNode {
let duration = duration.into_var();
let easing = easing.into_var();
match_node(child, move |c, op| match op {
UiNodeOp::Layout { wl, final_size } => {
if wl.is_inline() {
return;
}
let (uses, _) = LAYOUT.capture_metrics_use(|| c.measure(&mut wl.to_measure(None)));
}
_ => {}
})
}
```

98
examples/animation.rs
View File

@ -10,7 +10,7 @@ use zero_ui::{
var::{
animation::{
self,
easing::{EasingStep, EasingTime},
easing::{EasingFn, EasingTime},
},
ArcVar, VARS,
},
@ -59,8 +59,7 @@ fn example() -> impl UiNode {
// })
// .perm();
use easing::EasingModifierFn::*;
let easing_mod = var(EaseOut);
let easing_mod = var(Txt::from("ease_out"));
Stack! {
direction = StackDirection::top_to_bottom();
@ -92,17 +91,17 @@ fn example() -> impl UiNode {
spacing = 2;
toggle::selector = toggle::Selector::single(easing_mod.clone());
children = {
let mode = |m: easing::EasingModifierFn| Toggle! {
child = Text!(m.to_txt());
value = m;
let mode = |m: Txt| Toggle! {
child = Text!(m.clone());
value::<Txt> = m;
};
ui_vec![
mode(EaseIn),
mode(EaseOut),
mode(EaseInOut),
mode(EaseOutIn),
mode(Reverse),
mode(ReverseOut),
mode(Txt::from("ease_in")),
mode(Txt::from("ease_out")),
mode(Txt::from("ease_in_out")),
mode(Txt::from("ease_out_in")),
mode(Txt::from("reverse")),
mode(Txt::from("reverse_out")),
]
}
},
@ -113,20 +112,20 @@ fn example() -> impl UiNode {
auto_grow_fn = wgt_fn!(|_| grid::Row!(1.lft()));
button::style_fn = Style! { layout::padding = 3 };
cells = ui_vec![
ease_btn(&x, &color, "linear", easing::linear, &easing_mod),
ease_btn(&x, &color, "quad", easing::quad, &easing_mod),
ease_btn(&x, &color, "cubic", easing::cubic, &easing_mod),
ease_btn(&x, &color, "quart", easing::quart, &easing_mod),
ease_btn(&x, &color, "quint", easing::quint, &easing_mod),
ease_btn(&x, &color, "sine", easing::sine, &easing_mod),
ease_btn(&x, &color, "expo", easing::expo, &easing_mod),
ease_btn(&x, &color, "circ", easing::circ, &easing_mod),
ease_btn(&x, &color, "back", easing::back, &easing_mod),
ease_btn(&x, &color, "elastic", easing::elastic, &easing_mod),
ease_btn(&x, &color, "bounce", easing::bounce, &easing_mod),
ease_btn(&x, &color, "step_ceil(6)", |t| easing::step_ceil(6, t), &easing_mod),
ease_btn(&x, &color, "step_floor(6)", |t| easing::step_floor(6, t), &easing_mod),
ease_btn(&x, &color, "none", easing::none, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Linear, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Quad, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Cubic, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Quart, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Quint, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Sine, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Expo, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Circ, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Back, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Elastic, &easing_mod),
ease_btn(&x, &color, "", EasingFn::Bounce, &easing_mod),
ease_btn(&x, &color, "step_ceil(6)", EasingFn::custom(|t| easing::step_ceil(6, t)), &easing_mod),
ease_btn(&x, &color, "step_floor(6)", EasingFn::custom(|t| easing::step_floor(6, t)), &easing_mod),
ease_btn(&x, &color, "", EasingFn::None, &easing_mod),
]
},
Button! {
@ -146,22 +145,17 @@ fn example() -> impl UiNode {
}
}
fn ease_btn(
l: &ArcVar<Length>,
color: &ArcVar<Rgba>,
name: impl Into<Txt>,
easing: impl Fn(EasingTime) -> EasingStep + Copy + Send + Sync + 'static,
easing_mod: &ArcVar<easing::EasingModifierFn>,
) -> impl UiNode {
let in_plot = plot(easing);
let out_plot = plot(move |t| easing::ease_out(easing, t));
let in_out_plot = plot(move |t| easing::ease_in_out(easing, t));
let out_in_plot = plot(move |t| easing::ease_out_in(easing, t));
let reverse_plot = plot(move |t| easing::reverse(easing, t));
let reverse_out_plot = plot(move |t| easing::reverse_out(easing, t));
use easing::EasingModifierFn::*;
fn ease_btn(l: &ArcVar<Length>, color: &ArcVar<Rgba>, name: &'static str, easing: EasingFn, easing_mod: &ArcVar<Txt>) -> impl UiNode {
let name = if name.is_empty() { formatx!("{easing:?}") } else { name.to_txt() };
let easing = easing_mod.map(clmv!(easing, |m| match m.as_str() {
"ease_in" => easing.clone(),
"ease_out" => easing.clone().ease_out(),
"ease_in_out" => easing.clone().ease_in_out(),
"ease_out_in" => easing.clone().ease_out_in(),
"reverse" => easing.clone().reverse(),
"reverse_out" => easing.clone().reverse_out(),
_ => unreachable!(),
}));
Button! {
grid::cell::at = grid::cell::AT_AUTO;
child = Stack! {
@ -169,31 +163,25 @@ fn ease_btn(
spacing = 2;
children_align = Align::TOP;
children = ui_vec![
Text!(name.into()),
Text!(name),
Image! {
img_scale_ppi = true;
img_loading_fn = wgt_fn!(|_| Wgt! {
size = (64, 64);
margin = 10;
});
source = easing_mod.map(move |m| match m {
EaseIn => in_plot.clone(),
EaseOut => out_plot.clone(),
EaseInOut => in_out_plot.clone(),
EaseOutIn => out_in_plot.clone(),
Reverse => reverse_plot.clone(),
ReverseOut => reverse_out_plot.clone(),
});
source = easing.map(|f| plot(f.clone()));
img_cache = false;
},
]
};
on_click = hn!(l, color, easing_mod, |_| {
l.set_ease(0, 300, 1.secs(), easing_mod.get().modify_fn(easing)).perm();
color.set_ease(FROM_COLOR, TO_COLOR, 1.secs(), easing_mod.get().modify_fn(easing)).perm();
on_click = hn!(l, color, |_| {
l.set_ease(0, 300, 1.secs(), easing.get().ease_fn()).perm();
color.set_ease(FROM_COLOR, TO_COLOR, 1.secs(), easing.get().ease_fn()).perm();
});
}
}
fn plot(easing: impl Fn(EasingTime) -> EasingStep + Send + Sync + 'static) -> ImageSource {
fn plot(easing: EasingFn) -> ImageSource {
let size = (64, 64);
ImageSource::render_node(
RenderMode::Software,

24
zero-ui-var/src/animation/easing.rs
View File

@ -158,18 +158,18 @@ impl Eq for EasingFn {}
impl fmt::Debug for EasingFn {
fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
match self {
Self::Linear => write!(f, "easing::linear"),
Self::Sine => write!(f, "easing::sine"),
Self::Quad => write!(f, "easing::quad"),
Self::Cubic => write!(f, "easing::cubic"),
Self::Quart => write!(f, "easing::quart"),
Self::Quint => write!(f, "easing::quint"),
Self::Expo => write!(f, "easing::expo"),
Self::Circ => write!(f, "easing::circ"),
Self::Back => write!(f, "easing::back"),
Self::Elastic => write!(f, "easing::elastic"),
Self::Bounce => write!(f, "easing::bounce"),
Self::None => write!(f, "easing::none"),
Self::Linear => write!(f, "linear"),
Self::Sine => write!(f, "sine"),
Self::Quad => write!(f, "quad"),
Self::Cubic => write!(f, "cubic"),
Self::Quart => write!(f, "quart"),
Self::Quint => write!(f, "quint"),
Self::Expo => write!(f, "expo"),
Self::Circ => write!(f, "circ"),
Self::Back => write!(f, "back"),
Self::Elastic => write!(f, "elastic"),
Self::Bounce => write!(f, "bounce"),
Self::None => write!(f, "none"),
Self::Custom(_) => f.debug_tuple("Custom").finish(),
}
}

25
zero-ui/src/var.rs
View File

@ -85,7 +85,28 @@
//! modified by other widgets.
//!
//! ```
//! !!: TODO
//! use zero_ui::prelude::*;
//! # let _scope = APP.defaults();
//!
//! # let _ =
//! let foo = var(0u8);
//! Wgt! {
//! widget::on_init = async_hn!(foo, |_| {
//! foo.set(1);
//! assert_eq!(0, foo.get());
//! foo.modify(|m| {
//! assert_eq!(1, **m);
//! *m.to_mut() = 2;
//! });
//! assert_eq!(0, foo.get());
//!
//! foo.wait_update().await;
//! assert_eq!(2, foo.get());
//!
//! println!("test ok");
//! });
//! }
//! # ;
//! ```
//!
//! # Mapping
@ -141,7 +162,7 @@ pub mod animation {
pub mod easing {
pub use zero_ui_var::animation::easing::{
back, bounce, circ, cubic, cubic_bezier, ease_in, ease_in_out, ease_out, ease_out_in, elastic, expo, linear, none, quad, quart,
quint, reverse, reverse_out, sine, step_ceil, step_floor, Bezier, EasingFn, EasingModifierFn, EasingStep, EasingTime,
quint, reverse, reverse_out, sine, step_ceil, step_floor, Bezier, EasingFn, EasingStep, EasingTime,
};
}
}