Coder Social home page Coder Social logo

Configurable Animation Duration about adonis-ui HOT 3 OPEN

benruehl avatar benruehl commented on August 15, 2024
Configurable Animation Duration

from adonis-ui.

Comments (3)

benruehl avatar benruehl commented on August 15, 2024

You're right, that's something I considered would be nice to have as well.
I already tried to make animations configurable in the past but unfortunately WPF is kind of limited here.

The problem is that animations do not support the use of Binding and DynamicResource for their properties. As far as I understood, the reason for this is that animations are freezable. This means that once an animation starts its properties get frozen (read-only) by WPF so that for example the duration cannot be changed while the animation is running. This gives WPF the ability to run animations in a parallel thread as well.

Bindings on the other hand have the purpose of updating their target when the source changes. So in Adonis UI I would like to do something like:

<DoubleAnimation Storyboard.TargetName="Container"
                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)"
                 To="1"
                 Duration="{Binding CustomDuration}"/>

... but it throws an exception because in theory you could change the value of CustomDuration while the animation is running and the binding would try to update the value.

On a personal note, I don't really understand why there is no solution to this. In my limited mind I imagine the binding could update the value only until the animation starts and afterwards updates are rejected until the animation restarts. But I don't know the underlying architecture and cannot evaluate how hard it would be to implement this in WPF. And maybe I even misunderstood something here myself.

The only way I see to get this done would be to create the animations in code-behind. This is also how it is done for the ripple animation which is already configurable. Using C# code I could retrieve some configured duration value, create an animation programmatically and assign the value to its duration property without using bindings and dynamic resources. But this is not really straightforward either because styles normally don't have code-behind (the ripple animation is done by a custom control which is different from a default style). Maybe one could create something like a reusable animation dependency object for this, I don't know. I might check out other UI libraries and see whether they were able to solve this and how.

But until now, I have no idea how to realize this in a clean way.

from adonis-ui.

alexhelms avatar alexhelms commented on August 15, 2024

That is an excellent point and that seems like a strange limitation of WPF.

If the goal is to set animation duration only at compile time I may have a working solution. Please check out this commit on my fork (alexhelms@fb0e88b). The animation duration can be overridden in App's Startup event which happens before resources are loaded.

I think compile-time configuration is a reasonable limitation. I don't see many people wanting to change animation times for core UI elements at runtime.

from adonis-ui.

benruehl avatar benruehl commented on August 15, 2024

Making it static is an option as well, good call. Disadvantages with this approach that come to my mind are the following:

  1. It steps a bit out of line because every other configuration can be done via xaml resources and properties
  2. It can only be configured globally and not individually per control

But hey, better than not configurable at all I guess :)

from adonis-ui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.