Question

我有一个球形图像，我想围绕它的z轴旋转。我尝试了以下代码，它可以工作，但图像围绕x轴旋转。

<Image Name="logo" Grid.Column="1" Source="MyLogo.png"
           Width="140" Height="140" VerticalAlignment="Top" 
           HorizontalAlignment="Left" Margin="80,10,0,0" Grid.Row="1"
           >
        <Image.RenderTransform>
            <RotateTransform x:Name="TransRotate" CenterX="70" CenterY="70" />
        </Image.RenderTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetProperty="Angle">
                        <DoubleAnimation
                     Storyboard.TargetName="TransRotate" 
                     Storyboard.TargetProperty="Angle"
                     By="360" 
                     Duration="0:0:10"  
                     AutoReverse="False" 
                     RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>

Answer 1

如果RotateTransform不绕右轴旋转，请尝试ScaleTransform

<Image Name="logo" Grid.Column="1" Source="MyLogo.png"
       Width="140" Height="140" VerticalAlignment="Top" 
       HorizontalAlignment="Left" Margin="80,10,0,0" Grid.Row="1"
       RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <ScaleTransform  x:Name="TransScale" />
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="ScaleX"
                        Storyboard.TargetName="TransScale"
                        To="-1" 
                        Duration="0:0:10"  
                        AutoReverse="True"
                        RepeatBehavior="Forever">
                        <DoubleAnimation.EasingFunction>
                            <SineEase EasingMode="EaseInOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

我在Image控件上使用RenderTransformOrigin而不是CenterX和CenterY因为它的大小无关。而且我添加了正弦EasingFunction以获得更流畅的动画效果。

WPF如何围绕z轴旋转球形图像

1 个答案: