pr8x
commented
2 years ago You have to target TranslateTransform.X in the setter IIRC. (see example here: (https://docs.avaloniaui.net/docs/animations/keyframe-animations#keyframes)
Open hhyyrylainen opened 2 years ago
pr8x
commented
2 years ago You have to target TranslateTransform.X in the setter IIRC. (see example here: (https://docs.avaloniaui.net/docs/animations/keyframe-animations#keyframes)
hhyyrylainen
commented
2 years ago I'll test that later.
That page doesn't mention TranslateTransform only RotateTransform. I guess if it works then this is a case of incomplete documentation, but on this page https://docs.avaloniaui.net/docs/animations/transitions there's a whole section about render transforms, and no mention of them in that animation documentation so I assumed it would work the same way.
hhyyrylainen
commented
2 years ago I just now got to around to this this and sure enough this actually works correctly:
<Style Selector="Border.Popup[IsVisible=true]">
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="None">
<KeyFrame Cue="0%">
<Setter Property="TranslateTransform.Y" Value="-500"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="TranslateTransform.Y" Value="0"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>Thanks for the hint!
So I suppose this is mostly just a documentation problem? At least until me or someone else wants to animate with the full power of the RenderTransform property.
This might not be the best place to ask but if anyone knows how to animate something when it is being hidden, let me know.
Edit: I found the solution myself. I basically use a separate property to control when the animations start / end and the animation sets the visibility flag:
<Style Selector="controls|PopupDialog[ShowPopup=true] /template/ Border#Popup">
<Style.Animations>
<Animation Duration="0:0:0.3" FillMode="Forward" Easing="CubicEaseIn">
<KeyFrame Cue="0%">
<Setter Property="TranslateTransform.Y" Value="-500" />
<Setter Property="IsVisible" Value="True" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="TranslateTransform.Y" Value="0" />
<Setter Property="IsVisible" Value="True" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="controls|PopupDialog[ShowPopup=false] /template/ Border#Popup">
<Style.Animations>
<Animation Duration="0:0:0.3" FillMode="Forward" Easing="CubicEaseIn">
<KeyFrame Cue="0%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="TranslateTransform.Y" Value="500" />
<Setter Property="IsVisible" Value="False" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>Full code is here: https://github.com/Revolutionary-Games/Thrive-Launcher/blob/922d90c98e7764cb47e48c427e10c0c19949dcab/ThriveLauncher/Controls/PopupDialog.axaml (implemented as a custom control)
hhyyrylainen
commented
2 years ago Animating TranslateTransform.Y seems to work correctly, however it causes the devtools to crash. I opened a separate issue for that: https://github.com/AvaloniaUI/Avalonia/issues/8695
Describe the bug I'm trying to animate a control sliding in from offscreen but my app crashes on startup.
To Reproduce Steps to reproduce the behavior:
So the animation doesn't even need to start, just existing seems to be enough to crash.
I found that I can get around the startup exception by running this code before the app loads:
But that results in an error later, and an error print:
exception with that extra
TransformAnimator:Which is maybe why the transform animator is not hooked up by default...
Expected behavior I expect that it would be easy to animate the render transform to make controls move around. For example to make a popup alert appear in a much more pleasing way. I also tried animating
RenderTransformOriginwhich did nothing with<Setter Property="RenderTransformOrigin" Value="0,-500"/>, that didn't even bother crashing.I got an opacity value to fade in nicely using the same approach but when I do the same thing with
RenderTransformit crashes.Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context I got the impression that this should work based on reading these documentation pages: