Question

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

我正在使用此示例作为基础： CameraStarterKit

按钮的旋转已经正常。 o que eu gostaria de implementar eraananimaçã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

将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

查看结果：

Answer 2

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

<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

UWP旋转按钮动画

2 个答案: