AnimateVisual.axaml代码
<Window xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="300" Width="300" Background="LightGoldenrodYellow" x:Class="AvaloniaUI.AnimateVisual" Title="AnimateVisual"> <Window.Styles> <Style Selector="Rectangle#rectangle"> <Style.Animations> <Animation Duration="0:0:20" IterationCount="Infinite" PlaybackDirection="Alternate" Easing="SineEaseInOut"> <KeyFrame Cue="0%"> <Setter Property="Opacity" Value="1"/> <Setter Property="SkewTransform.AngleY" Value="0"/> <Setter Property="RotateTransform.Angle" Value="0"/> </KeyFrame> <KeyFrame Cue="50%"> <Setter Property="Opacity" Value="0.1"/> <Setter Property="SkewTransform.AngleY" Value="180"/> <Setter Property="RotateTransform.Angle" Value="180"/> </KeyFrame> </Animation> </Style.Animations> </Style> </Window.Styles> <Grid RowDefinitions="auto,auto" Margin="12"> <Button x:Name="visual" Content="Test Button"/> <Rectangle x:Name="rectangle" Margin="0,30" Grid.Row="1" Height="{Binding #visual.Bounds.Height}"> <Rectangle.Fill> <VisualBrush Visual="{Binding #visual}" Stretch="UniformToFill"></VisualBrush> </Rectangle.Fill> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform/> <SkewTransform/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> </Grid> </Window>
AnimateVisual.axaml.cs代码
using Avalonia; using Avalonia.Controls; using Avalonia.Markup.Xaml; using Avalonia.Media; namespace AvaloniaUI; public partial class AnimateVisual : Window { public AnimateVisual() { InitializeComponent(); } }
运行效果