如何在WPF中沿X轴旋转图像然后用另一个图像进行更改 [英] How to rotate image along X axis and then change with another, in WPF
本文介绍了如何在WPF中沿X轴旋转图像然后用另一个图像进行更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个想要沿X轴旋转的图像，当动画结束时，我想将其更改为另一个图像。
这个04秒的视频是我打算实现的一个例子
< a href =https://www.youtube.com/watch?v=gzyAemyU0Rs>< ; / A>
我尝试过：
< pre lang =HTML>< Window.Resources>
< Style x：Key =AnimationImageTargetType ={x：Type Image}>
< Setter Property =RenderTransform>
< Setter.Value>
<！ - < RotateTransform Angle =0CenterX =0.5CenterY =0.5/> - >
< ScaleTransform ScaleX =1ScaleY =1CenterX =0.5CenterY =0.5/>
< /Setter.Value>
< / Setter>
< Style.Triggers>
< Trigger Property =IsEnabledValue =true>
< Trigger.EnterActions>
< BeginStoryboard>
< Storyboard>
< DoubleAnimation Storyboard.TargetProperty =RenderTransform.ScaleX
From =1To = - 1Duration =0：0：1AutoReverse =False/>
< / Storyboard>
< / BeginStoryboard>
< /Trigger.EnterActions>
< / Trigger>
< /Style.Triggers>
< / Style>
< /Window.Resources>
< StackPanel Margin =0,25,0,0>
< Button Name =buPruebaContent =RotarHeight =25Width =150HorizontalAlignment =CenterClick =buPrueba_Click/>
< Image Name =imgPeruSource =/ Peru1.pngHeight =150Margin =0,25,0,0/>
< / StackPanel>
< / Window>
private void buPrueba_Click（ object sender，RoutedEventArgs e）
{
imgPeru.Style = FindResource（ AnimationImage） as 风格;
}
解决方案
在这里，您将全部使用XAML并完成Blend2017：
< pre lang =xml> < 窗口 x：Class = WpfRotateImage.MainWindow
xmlns = http://schemas.microsoft。 com / winfx / 2006 / xaml / presentation
xmlns：x = http://schemas.microsoft.com/winfx/2006/xaml
mc：Ignorab le = d
xmlns：d = http://schemas.microsoft.com/expression/blend/2008
xmlns：mc = http：// schemas .openxmlformats.org / markup-compatibility / 2006
< span class =code-attribute>标题 = WPF CodeProject Answer - Rotate Image 高度 = 350 宽度 = 525 >
< Window.Resources >
< Storyboard x：Key = 旋转 >
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = （UIElement.Visibility） Storyboard.TargetName = Image1 >
< DiscreteObjectKeyFrame KeyTime = 0 值 = {x：静态可见性.Hidden} / >
< DiscreteObjectKeyFrame KeyTime = 0：0：0.1 值 = {x：静态可见性。隐藏} / < span class =code-keyword>>
< DiscreteObjectKeyFrame KeyTime = 0：0：1 值 = {x：Static Visibility.Visible} / >
< DiscreteObjectKeyFrame < span class =code-attribute> KeyTime = 0：0：1.01 值 = {x：Static Visibility.Hidden } / >
< / ObjectAnimationUsingKeyFrames >
< ObjectAnimationUsingKeyFrames Storyboard。 TargetProperty = （UIElement.Visibility） Storyboard.TargetName = Image2 >
< DiscreteObjectKeyFrame KeyTime = 0 值 = {x：Static Visibility.Visible} / < span class =code-keyword>>
< DiscreteObjectKeyFrame KeyTime = 0：0：0.1 值 = {x：Static Visibility.Hidden} / >
< DiscreteObjectKeyFrame KeyTime = 0：0：1.01 值 = {x：静态Visibility.Visible} / >
< / ObjectAnimationUsingKeyFrames >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = （UIElement.RenderTransform）。（TransformGroup.Children）[0] 。（ScaleTransform.ScaleX） Storyboard.TargetName = 图片1 >
< EasingDoubleKeyFrame KeyTime = 0：0：0.1 值 = 1 / >
< EasingDoubleKeyFrame KeyTime = 0：0：1 值 = - 1 / >
< EasingDoubleKeyFrame KeyTime = 0：0： 1.2 值 = 1 / >
< / DoubleAnimationUsingKeyFrames >
< / Storybo ard >
< /Window.Resources >
< Window.Triggers >
< EventTrigger RoutedEvent = ButtonBase.Click SourceName = 按钮 >
< BeginStoryboard 故事板 < span class =code-keyword> = {StaticResource Rotate} / < span class =code-keyword>>
< / EventTrigger >
< / Window。触发器 >
<！ - < Window.Triggers>
< EventTrigger RoutedEvent =FrameworkElement.Loaded>
< BeginStoryboard Storyboard ={StaticResource Rotate}/>
< / EventTrigger>
< /Window.Triggers> - >
< 网格 >
< Grid.Resources >
< span class =code-keyword>< 样式 TargetType = 图片 >
< Setter 属性 = HorizontalAlignment 值 = 中心 / >
< Setter 属性 = VerticalAlignment 值 = 热门 / >
< Setter 属性 = 保证金 值 = 0 10 0 0 / >
< Setter 属性 = Grid.ColumnSpan 值 = 8 / >
< Setter 属性 = Grid.RowSpan Valu e = 8 / >
< Setter 属性 = 宽度 值 = 100 / >
< Setter 属性 = 高度 值 = 100 / >
< / Style >
< 样式 TargetType = 按钮 >
< Setter 属性 = HorizontalAlignment 值 = 中心 / >
< Setter 属性 = VerticalAlignment 值 = 底部 / >
< Setter 属性 = 保证金 值 = 0 10 / >
< < span class =code-leadattribute> Setter Property = 填充 值 = 10 5 / >
< Setter 属性 = Grid.ColumnSpan 值 = 8 / >
< Setter 属性 = Grid.RowSpan 值 = 8 / >
< / Style >
< / Grid.Resources >
< Image x：名称 = Image1 来源 = https：// vc .vse.cz / wp-content / uploads / 2014/08 / Accept-icon.png RenderTransformOrigin = 0.5,0.5 可见性 = 隐藏 < span class =code-keyword>>
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform / >
< SkewTransform / >
< RotateTransform / >
< TranslateTransform / >
< / TransformGroup >
< / Image.RenderTransform >
< / Image >
< 图像 x：名称 = Image2 来源 = https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/MUTCD_R1- 1.svg / 2000px-MUTCD_R1-1.svg.png / >
< 按钮 x：名称 = 按钮 内容 = 动画 / >
< / Grid >
< / Window >
I have an image that I want to rotate along the X axis and when the animation ends, I want to change it to another image.
This 04 second video is an example of what I intend to achieve
<a href="https://www.youtube.com/watch?v=gzyAemyU0Rs"></a>
What I have tried:
<pre lang="HTML"><Window.Resources>
<Style x:Key="AnimationImage" TargetType="{x:Type Image}">
<Setter Property="RenderTransform">
<Setter.Value>
<!--<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5" />-->
<ScaleTransform ScaleX ="1" ScaleY ="1" CenterX="0.5" CenterY="0.5"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
From="1" To="-1" Duration="0:0:1" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel Margin="0,25,0,0">
<Button Name="buPrueba" Content="Rotar" Height="25" Width="150" HorizontalAlignment="Center" Click="buPrueba_Click"/>
<Image Name="imgPeru" Source="/Peru1.png" Height="150" Margin="0,25,0,0"/>
</StackPanel>
</Window>
private void buPrueba_Click(object sender, RoutedEventArgs e)
{
imgPeru.Style = FindResource("AnimationImage") as Style;
} 解决方案
Here you go, all in XAML and done with Blend2017:
<Window x:Class="WpfRotateImage.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="WPF CodeProject Answer - Rotate Image" Height="350" Width="525"> <Window.Resources> <Storyboard x:Key="Rotate"> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image1"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"/> <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/> <DiscreteObjectKeyFrame KeyTime="0:0:1.01" Value="{x:Static Visibility.Hidden}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image2"> <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Hidden}"/> <DiscreteObjectKeyFrame KeyTime="0:0:1.01" Value="{x:Static Visibility.Visible}"/> </ObjectAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Image1"> <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/> <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/> <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button"> <BeginStoryboard Storyboard="{StaticResource Rotate}"/> </EventTrigger> </Window.Triggers> <!--<Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource Rotate}"/> </EventTrigger> </Window.Triggers>--> <Grid> <Grid.Resources> <Style TargetType="Image"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="Margin" Value="0 10 0 0"/> <Setter Property="Grid.ColumnSpan" Value="8"/> <Setter Property="Grid.RowSpan" Value="8"/> <Setter Property="Width" Value="100"/> <Setter Property="Height" Value="100"/> </Style> <Style TargetType="Button"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="Margin" Value="0 10"/> <Setter Property="Padding" Value="10 5"/> <Setter Property="Grid.ColumnSpan" Value="8"/> <Setter Property="Grid.RowSpan" Value="8"/> </Style> </Grid.Resources> <Image x:Name="Image1" Source="https://vc.vse.cz/wp-content/uploads/2014/08/Accept-icon.png" RenderTransformOrigin="0.5,0.5" Visibility="Hidden"> <Image.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Image.RenderTransform> </Image> <Image x:Name="Image2" Source="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/MUTCD_R1-1.svg/2000px-MUTCD_R1-1.svg.png"/> <Button x:Name="button" Content="Animate"/> </Grid> </Window>
这篇关于如何在WPF中沿X轴旋转图像然后用另一个图像进行更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
