Question

我定义了一个像这样的Polygon：

    <Storyboard x:Name="Storyboard2">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                                       Storyboard.TargetName="polygon">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:2"
                                  Value="-360" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

我还定义了一个这样的故事板：

        Storyboard2.BeginTime = new TimeSpan( 0 );
        Storyboard2.Begin();

我像这样开始多边形旋转：


select s.name as Name, round(avg(r.score),2) as Rating, c.comment as Comment
from songs s , ratings r, comments c
where s.id = r.songId And s.id = c.songId And c.id = (select id from comments order by id DESC LIMIT 1)
group by s.id

上面的代码按预期旋转整个多边形。但是，我想修改它，并使多边形静止，只是旋转多边形内的位图。

我该怎么做？ THX

Answer 1

要旋转多边形内的图像，可以尝试ImageBrush.RelativeTransform property，如下所示：

<Polygon x:Name="polygon"
         Margin="25, 0, 25, 25"
         Points="0,50 0,120 50,170 120,170 170,120 170,50 120,0 50,0"
         Stroke="Red">
    <Polygon.Fill>
        <ImageBrush x:Name="imageBrush" ImageSource="Assets/Capture.PNG" Stretch="Fill">
            <ImageBrush.RelativeTransform>
                <CompositeTransform CenterX="0.5" CenterY="0.5" />
            </ImageBrush.RelativeTransform>
        </ImageBrush>
    </Polygon.Fill>
</Polygon>

并改变您的Storyboard，如下所示：

<Storyboard x:Name="Storyboard2">
    <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
                                   Storyboard.TargetName="imageBrush"
                                   Storyboard.TargetProperty="(Brush.RelativeTransform).(CompositeTransform.Rotation)">
        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-360" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

此处，由于目标为ImageBrush，因此我们需要将Storyboard.TargetProperty更改为(Brush.RelativeTransform).(CompositeTransform.Rotation)。因为动画的目标是Brush.RelativeTransform，所以它是一个依赖动画。我们需要将EnableDependentAnimation属性设置为true才能启用此动画。有关从属动画的详细信息，请参阅Dependent and independent animations。

在此之后，您可以致电Storyboard2.Begin();开始动画。

Answer 2

由于我目前无法在UWP enviro上进行测试，这里是如何在WPF中完成的，同样的概念...但我认为语法可能有点不同，因此我想测试。< / p>

故事板：

<Storyboard x:Key="SpinThisBugger" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="polygon">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

触发启动它：

<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource SpinThisBugger}"/>
    </EventTrigger>
</Window.Triggers>

The Poly：

<Polygon x:Name="polygon"
                     Points="0,50 0,120 50,170 120,170 170,120 170,50 120,0 50,0"
                        HorizontalAlignment="Center" VerticalAlignment="Center"
                     Stroke="Red"
                     RenderTransformOrigin="0.5,0.5">
            <Polygon.Fill>
                <ImageBrush x:Name="imageBrush"
                                ImageSource="Images/learn-hypnosis.jpg"
                                Stretch="Fill">
                    <ImageBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                            <SkewTransform CenterY="0.5" CenterX="0.5"/>
                            <RotateTransform CenterY="0.5" CenterX="0.5"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ImageBrush.RelativeTransform>
                </ImageBrush>
            </Polygon.Fill>

        </Polygon>

...和我使用的图像，因为它很漂亮lol：

如何在多边形内旋转位图？

2 个答案: