fabulous-dev / Fabulous

Declarative UI framework for cross-platform mobile & desktop apps, using MVU and F# functional programming

Home Page:https://fabulous.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add support for transitions when properties is changed

Dolfik1 opened this issue · comments

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))
  ]
)

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

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.