UWP旋转SunBurst

Question

当谈到在UWP中进行旋转时，我是新手，所以我可能会以错误的方式解决这个问题。

在我的应用程序中，我希望一个旭日形象在正方形中旋转，就像这个video一样。我创建了一个1000x1000px的旭日形象。我试过通过XAML和C＃旋转它，但我的努力产生了一个旋转的方形图像。

我尝试过以下方法：

XAML：

<Page.Resources>
        <Storyboard x:Key="Storyboard" x:Name="sb" >
            <DoubleAnimation Storyboard.TargetName="RotateImage" 
                            Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
                            From="0" To="360" RepeatBehavior="Forever" BeginTime="00:00:00.000" Duration="00:00:5.000" />
        </Storyboard>
    </Page.Resources>

<Grid RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignLeftWithPanel="True"
                       Width="300" Height="300">
                    <Image Source="ms-appx:///Assets/SunBurst.png" x:Name="RotateImage" Stretch="Fill">
                        <Image.RenderTransform>
                            <RotateTransform Angle="0" CenterX="150" CenterY="150"  />
                        </Image.RenderTransform>
                    </Image>
            </Grid>

C＃：

BitmapImage btpImg = new BitmapImage();
            btpImg.UriSource = new Uri(@"ms-appx:///Assets/SunBurst.png");

            Image img = new Image
            {
                Source = btpImg,
                RenderTransform = new RotateTransform()
                {
                    CenterX = 150,
                    CenterY = 150
                },
                Stretch = Stretch.Fill
            };

            Grid rect = new Grid
            {
                Width = 300,
                Height = 300,
            };

            rect.Children.Add(img);


            Storyboard storyboard = new Storyboard();
            DoubleAnimation rotateAnimation = new DoubleAnimation()
            {
                From = 0,
                To = 360,
                Duration = new Duration(TimeSpan.FromSeconds(5)),
                RepeatBehavior = RepeatBehavior.Forever,

            };

            Storyboard.SetTarget(rotateAnimation, rect);
            Storyboard.SetTargetProperty(rotateAnimation, "(UIElement.RenderTransform).(RotateTransform.Angle)");

            storyboard.Children.Add(rotateAnimation);

            Board.Children.Add(rect);

            storyboard.Begin();

如果有人有任何关于获得预期效果的专业提示，我将非常感激。

Answer 1

将其放大并设置 RenderTransformOrigin ：

ฐ** exception error: no match of right hand side value 
                    [{0,25075,-2},{0,0,-2},{0,376100,-4}]

Answer 2

好的，我有解决方案！

首先我需要将故事板改为

<Storyboard x:Key="Storyboard" x:Name="sb" >
            <DoubleAnimation Storyboard.TargetName="RotateImage" 
                             EnableDependentAnimation="True"
                            Storyboard.TargetProperty="(Brush.RelativeTransform).(CompositeTransform.Rotation)" 
                            From="0" To="360" RepeatBehavior="Forever" BeginTime="00:00:00.000" Duration="00:00:5.000" />
        </Storyboard>

然后我改变了将网格中的图像保持为矩形。

<Rectangle RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignLeftWithPanel="True"
                       Width="300" Height="300" x:Name="bb">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="ms-appx:///Assets/SunBurst.png" x:Name="RotateImage" Stretch="Fill">
                        <ImageBrush.RelativeTransform>
                                <CompositeTransform CenterY="0.5" CenterX="0.5" ScaleX="1.5" ScaleY="1.5" />
                        </ImageBrush.RelativeTransform>
                    </ImageBrush>
                </Rectangle.Fill>
            </Rectangle>