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();
    }
}

运行效果

image

 

posted on 2025-10-16 11:17  dalgleish  阅读(3)  评论(0)    收藏  举报