Question

我想要沿X轴旋转图像，当动画结束时，我想将其更改为另一幅图像。

这个04秒的视频是我打算实现的一个例子Video Link

  <Style x:Key="AnimationImage" TargetType="{x:Type Image}">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <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>private void buPrueba_Click(object sender, RoutedEventArgs e)
    {
        imgPeru.Style = FindResource("AnimationImage") as Style;
    }

Answer 1

您需要使用缩放变换和不透明度的组合来操纵两个图像之间的动画。第一个图像在这里被命名为“image”，第二个图像在这里被命名为“image1”。

步骤： 1.开始于：图像和图像1在网格上的相同位置。图像位于image1之上。 Image1处于不透明度0％并翻转（<ScaleTransform ScaleY="1" ScaleX="-1"/>）。这些是开始条件，可以在关键时间0嵌入动画本身。我们希望在启动时使image1不可见并且镜像翻转，这样当我们稍后再次旋转时它将被正确定向。

在image1不透明度为100％时创建最终状态的动画，图像不透明度为0％。 ScaleX上的图像运行比例变换从1到-1。 Image1在ScaleX上运行比例变换从-1到1.我们现在想要隐藏图像并使image1可见，同时在两者上运行ScaleTransform动画;一个去+1，而另一个去-1。
保持变换原点为0.5,0.5;即图像的中心。我们希望保持旋转原点相同且位于中心。

以下xaml显示了上述步骤。您可以使用blend来创建类似的xaml。按钮在这里运行动画。将示例代码中引用的JPG图像替换为实际的JPG和右Uri源。

<强>的Xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="640">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="image">
                <EasingPointKeyFrame KeyTime="0:0:0.4" Value="0.5,0.5"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="image">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image1">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="image1">
                <EasingPointKeyFrame KeyTime="0:0:0.4" Value="0.5,0.5"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="image1">
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Image x:Name="image1" Source="DSC_0068.JPG" Margin="50,50" Opacity="0" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="1" ScaleX="-1"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="image" Source="DSC_0052.JPG" Margin="50,50">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Button x:Name="button" Content="Button" Click="button_Click" HorizontalAlignment="Left" Margin="25.41,23.25,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
</Window>

代码

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private Storyboard storyboard;

        public MainWindow()
        {
            InitializeComponent();
            this.storyboard = this.Resources["Storyboard1"] as Storyboard;

        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            this.storyboard.Begin();
        }
    }
}

如何在WPF中沿X轴旋转图像

1 个答案: