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旋轉按鈕動畫

回答

相關問題