UWP旋转按钮动画

我想重现一个按钮的动画，就像Windows 10 Mobile的本机相机应用按钮的动画一样，但我迷路了。UWP旋转按钮动画

我用这个例子作为基础： CameraStarterKit

按钮的旋转已经确定。 o que eu gostaria de implementationar era aanimaçã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; 
    }

怎样包括在此代码的动画。

已经感谢您的帮助！

来源

2016-07-28 Renan Gueiros

将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

看看结果：

来源

2016-07-28 06:31:23

您可以定义动画在网页的资源故事板：

<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

来源

2016-07-28 06:16:15

UWP旋转按钮动画

回答

相关问题