代码创建 WPF 旋转、翻转动画(汇总)

时间:2023-03-08 22:40:02

先建立一个button

        <Button  Width="80" Height="60" Content="旋转" Name="trans" Click="trans_Click"  Style="{x:Null}"/>

方法一:绕左上角旋转

 public void Transform1()
{
RotateTransform rtf = new RotateTransform();
trans.RenderTransform = rtf;
DoubleAnimation dbAscending = new DoubleAnimation(, , new Duration (TimeSpan.FromSeconds()));
dbAscending.RepeatBehavior = RepeatBehavior.Forever;
rtf.BeginAnimation(RotateTransform.AngleProperty, dbAscending);
}

方法二:绕左上角旋转

public void Transform2()
{
RotateTransform rtf = new RotateTransform();
trans.RenderTransform = rtf;
DoubleAnimation dbAscending = new DoubleAnimation(, , new Duration(TimeSpan.FromSeconds()));
Storyboard storyboard = new Storyboard();
dbAscending.RepeatBehavior = RepeatBehavior.Forever;
storyboard.Children.Add(dbAscending);
Storyboard.SetTarget(dbAscending, trans);
Storyboard.SetTargetProperty(dbAscending, new PropertyPath("RenderTransform.Angle"));
storyboard.Begin();
}

效果如下:

代码创建 WPF 旋转、翻转动画(汇总)

截图不怎么能看出效果,这两种方法是按某个角进行旋转的。

方法三:Xaml动画,绕X中线或者Y中线翻转

<Window x:Class="Oland.HSS.InHospital.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300">
<Window.Resources>
<Storyboard x:Key="LoadHeadStoryboard" >
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Duration="0:0:5"
RepeatBehavior="Forever"
Storyboard.TargetName="DesignerHead"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame Value="1"/>
<SplineDoubleKeyFrame Value="-1"/>
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames> </Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource LoadHeadStoryboard}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Button Content="旋转" x:Name="DesignerHead" Height="40" Width="60" RenderTransformOrigin="0.4,0.5" Style="{x:Null}">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
</TransformGroup>
</Button.RenderTransform>
</Button>
</Grid>
</Window>

代码创建 WPF 旋转、翻转动画(汇总)

可设置是延X中线或者是Y中线旋转,上边那种是按左上角旋转。

方法四:第一种方式使用Xaml实现(左上)

<Button Content="旋转" Height="32" HorizontalAlignment="Left" Margin="106,176,0,0" Name="button1" VerticalAlignment="Top" Width="58" >
<Button.RenderTransform>
<RotateTransform x:Name="trans" Angle="0"/>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="360" RepeatBehavior="Forever" Duration="0:0:3"
Storyboard.TargetName="trans"
Storyboard.TargetProperty="Angle"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>

效果同第一第二种方法

代码创建 WPF 旋转、翻转动画(汇总)

方法五:绕中点旋转:

 <Button Content="旋转" Height="32" HorizontalAlignment="Left" Margin="106,176,0,0" Name="button1" VerticalAlignment="Top" Width="58" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<RotateTransform x:Name="trans" Angle="0"/>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard >
<Storyboard>
<DoubleAnimation From="0" To="360" RepeatBehavior="Forever" Duration="0:0:3"
Storyboard.TargetName="trans"
Storyboard.TargetProperty="Angle"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>

这段代码和上面差不多,

关键是RenderTransformOrigin,设成0.5,0.5就可以了