UWP旋转按钮动画

Question

我正在尝试为按钮重现动画，例如 Windows 10 Mobile 的原生相机应用按钮的动画，但我迷路了。

我以这个例子为基础： CameraStarterKit

按钮的旋转已经可以了。 o que eu gostaria de implementarar era a animação。

这是旋转按钮的代码：

    private void UpdateButtonOrientation()
    {
        int device = ConvertDeviceOrientationToDegress(_deviceOrientation);
        int display = ConvertDisplayOrientationToDegrees(_displayOrientation);

        if (_displayInformation.NativeOrientation == DisplayOrientations.Portrait)
        {
            device -= 90;
        }

        var angle = (360 + display + device) % 360;

        var transform = new RotateTransform { Angle = angle };

        PhotoButton.RenderTransform = transform;
    }

如何在此代码中包含动画。

已经感谢任何帮助！

Answer 1

您可以在页面资源中将动画定义为 Storyboard：

<Page.Resources>
   <Storyboard x:Name="rotate90">
      ... some animation that changes the RenderTransform of the button
      <DoubleAnimation Storyboard.TargetName="PhotoButtonRotateTransform"
           Storyboard.TargetProperty="Angle"
           Value="90" x:Name="RotationAnimation" />
   </Storyboard>
</Page.Resources>

然后从您的代码隐藏开始动画：

private void UpdateButtonOrientation()
{
    //here you can put some logic that 
    //sets the target value for the RotationAnimation's Value property    
    rotateButtonStoryboard.Begin();
}

有关动画和故事板的更多信息，请查看 MSDN documentation

Answer 2

将 RotateTransform 属性添加到您的按钮

<Button Grid.Row="1"
        x:Name="PhotoButton"
        Content="PhotoButton"
        Click="PhotoButton_Click"
        HorizontalAlignment="Center">
    <Button.RenderTransform>
        <RotateTransform x:Name="PhotoButtonRotateTransform"/>
    </Button.RenderTransform>
</Button>

之后，您可以在代码中创建和管理 Storyboard：

private void PhotoButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    AnimateProgressRingSlice(PhotoButtonRotateTransform.Angle + 90);
}

private void AnimateProgressRingSlice(double to, double miliseconds = 350)
{
    var storyboard = new Storyboard();
    var doubleAnimation = new DoubleAnimation();
    doubleAnimation.Duration = TimeSpan.FromMilliseconds(miliseconds);
    doubleAnimation.EnableDependentAnimation = true;
    doubleAnimation.To = to;
    Storyboard.SetTargetProperty(doubleAnimation, "Angle");
    Storyboard.SetTarget(doubleAnimation, PhotoButtonRotateTransform);
    storyboard.Children.Add(doubleAnimation);
    storyboard.Begin();
}

备注

但是如果你不知道 RenderTransformOrigin 属性，请小心。阅读 More Info

我猜你需要使用这个属性和 0.5, 0.5 值，所以，修改你的 XAML 并添加到 Button

RenderTransformOrigin="0.5, 0.5

查看结果：

UWP旋转按钮动画

UWP rotation button animation

c#

uwp

windows-10-universal