AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
24.67k stars 2.14k forks source link

Animations of controls inside viewbox when scaled up are jagged #4563

Open VoNguyenMinhTriet opened 3 years ago

VoNguyenMinhTriet commented 3 years ago

I have a window with a content like this:

<Viewbox>
    <Grid Width="30" Height="30">
        <Rectangle Stroke="Black" StrokeThickness="1" Fill="Red" Width="10" Height="10"/>
    </Grid>
</Viewbox>

The code behind has this method:

private void Rectangle_Tapped (object sender, Avalonia.Interactivity.RoutedEventArgs e)
{
    Animation anim = new Animation()
    {
        Duration = TimeSpan.FromSeconds(20d),
        Children = {
            new KeyFrame()
            {
                Cue = new Cue(0d),
                Setters = {
                    new Setter { Property = WidthProperty, Value = 10d }
                }
            },
            new KeyFrame()
            {
                Cue = new Cue(1d),
                Setters = {
                    new Setter{ Property = WidthProperty, Value = 30d }
                }
            }
        }
    };
    anim.Apply((Animatable) ((Grid) ((Viewbox) Content).Child).Children[0], null, Observable.Return(true), null);
}

The constructor has this line: ((Rectangle) ((Grid) ((Viewbox) Content).Child).Children[0]).Tapped += Rectangle_Tapped; This is the output: output

@jmacato

jmacato commented 3 years ago

Im curious, why arent you using the styles for animations @VoNguyenMinhTriet ?

jmacato commented 3 years ago

also the gif you linked is broken too

VoNguyenMinhTriet commented 3 years ago

Im curious, why arent you using the styles for animations @VoNguyenMinhTriet ?

Because I wanted the animation able to be triggered in code-behind, and AFAIK, I can't register pseudo-classes.

also the gif you linked is broken too

AnonFiles files changes their position periodically :/ Now I changed the provider to pic8.

jmacato commented 3 years ago

AFAIK, I can't register pseudo-classes.

You could add/remove classes with the "Classes" property btw :) so you can have a certain class removed/added on codebehind then set your animation in styles

danwalmsley commented 3 years ago

@VoNguyenMinhTriet you can add your own psuedoclasses.

i.e.

https://github.com/AvaloniaUI/Avalonia/blob/451eb7337dfdcae3be3da21280480370636fb6ec/src/Avalonia.Controls/Expander.cs#L60

VoNguyenMinhTriet commented 3 years ago

Thanks for the reply! But it's off topic I guess...