UWP 旋转 SunBurst答案

【问题标题】：UWP Rotating SunBurstUWP 旋转 SunBurst
【发布时间】：2017-10-30 07:22:19
【问题描述】：

在 UWP 中旋转时我还是个新手，所以我可能会走错路。

在我的应用程序中，我想要一个像 video 这样的正方形旋转图像。我创建了一个 1000x1000 像素的旭日形图像。我曾尝试通过 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();

如果有人对获得预期效果有任何专业提示，我将不胜感激。

【问题讨论】：

您需要使图像尺寸大于您正在显示它的屏幕的可视区域..

标签： c# xaml uwp rotation 2d

【解决方案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>

【讨论】：

感谢您的回复。我仍然得到大的旋转正方形。有没有比网格或画布更好的父控件来旋转图像？

【解决方案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>

【讨论】：