fabulous-dev / Fabulous

Declarative UI framework for cross-platform mobile & desktop apps, using MVU and F# functional programming
https://fabulous.dev
Apache License 2.0
1.15k stars 121 forks source link

Add support for transitions when properties is changed #816

Open Dolfik1 opened 3 years ago

Dolfik1 commented 3 years ago

It would be great to support animated transitions on changed properties.

The main idea is as follows: when property is changed in UpdateIncremental we should check if any transitions is attached to this property. If transition is attached to the property then we should invoke transition callback instead of modifying property value directly.

Take a look at small example:

type ITransition =
  abstract member Property: BindableProperty
  abstract member Execute: (View * obj * obj) -> unit

let transition<'a> property fn =
  { new ITransition with
      member x.Property = property
      member x.Execute(view, fromValue, toValue) =
        fn view (unbox fromValue) (unbox toValue) }

View.Frame(
  translationX = model.TranslationX,
  transitions = [
    transition<float> View.TranslationXProperty (fun view fromValue toValue -> 
        Animation((fun v -> view.TranslationX <- v), fromValue, toValue, Easing.CubicOut)
          .Commit(view, "MyAnimation", 16u, 200u))
  ]
)
edgarfgp commented 1 year ago

@TimLariviere Will this still be possible with v2? It seems like an excellent way to work with animations

TimLariviere commented 1 year ago

I still don't know exactly how to incorporate animations in Fabulous. The issue with having functions inside the widgets is that we need to evaluate them all the time because we can't compare functions like we compare values.

This would require a mechanism to synchronize animations to avoid restarting an animation on each update.