UWP 旋转 SunBurst

Question

我对 UWP 中的旋转很陌生，所以我可能会以错误的方式解决这个问题。

在我的应用程序中，我希望朝阳图像像这样在正方形中旋转 video. I have created a 1000x1000px sunburst image. I have tried rotating it via XAML and C#, but my efforts produce a rotating square see image.

我试过以下方法：

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:

<Image Source="ms-appx:///Assets/SunBurst.png" x:Name="RotateImage" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="2" ScaleY="2"/>
                <RotateTransform Angle="0"/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>

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>

UWP 旋转 SunBurst

UWP Rotating SunBurst

c#

xaml

2d

rotation

uwp