页面卷曲动画在WinRT (windows phone 8.1)
本文关键字:phone windows WinRT 动画 | 更新日期: 2023-09-27 18:14:31
下面的代码是工作良好的翻页动画从右到左与curl动画页面,但从左到右翻页是不正确的,我试图改变逻辑,但我还没有成功,谁能帮助我吗?
或任何其他工作围绕页面旋转动画在WinRT?
Reference:: Path Geometry clip equivalent in WinRT
XAML
<Grid
x:Name="ManipulationGrid"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
ManipulationMode="TranslateX,TranslateY,TranslateInertia"
ManipulationStarted="ManipulationGrid_OnManipulationStarted"
ManipulationDelta="ManipulationGrid_OnManipulationDelta"
ManipulationCompleted="ManipulationGrid_OnManipulationCompleted">
<Grid
x:Name="Page1">
<Grid.Clip>
<RectangleGeometry
Rect="0,0,80000,80000">
<RectangleGeometry.Transform>
<TransformGroup>
<TranslateTransform
x:Name="Page1ClipTranslateTransform" />
<RotateTransform
x:Name="Page1ClipRotateTransform" />
</TransformGroup>
</RectangleGeometry.Transform>
</RectangleGeometry>
</Grid.Clip>
<Grid
x:Name="Page1ContentGrid">
<Image
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Stretch="UniformToFill"
Source="http://bigbackground.com/wp-content/uploads/2013/07/tropical-beach-screensaver.jpg" />
</Grid>
</Grid>
<Grid
x:Name="Page2"
Opacity="0">
<Grid.Clip>
<RectangleGeometry
Rect="0,0,80000,80000">
<RectangleGeometry.Transform>
<TransformGroup>
<TranslateTransform
x:Name="Page2ClipTranslateTransform" />
<RotateTransform
x:Name="Page2ClipRotateTransform" />
</TransformGroup>
</RectangleGeometry.Transform>
</RectangleGeometry>
</Grid.Clip>
<Grid
x:Name="Page2ContentGrid">
<Image
x:Name="Page2SampleContentImage"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Stretch="UniformToFill"
Source="http://www.photography-match.com/views/images/gallery/Tropical_Lagoon.jpg" />
</Grid>
</Grid>
<Grid
x:Name="TransitionGridContainer">
<Grid
x:Name="TransitionGrid"
Opacity="0">
<Grid.RenderTransform>
<CompositeTransform
x:Name="TransitionGridContainerTransform" />
</Grid.RenderTransform>
<Grid.Clip>
<RectangleGeometry
Rect="0,0,80000,80000">
<RectangleGeometry.Transform>
<TransformGroup>
<TranslateTransform
x:Name="TransitionGridClipTranslateTransform" />
<RotateTransform
x:Name="TransitionGridClipRotateTransform" />
</TransformGroup>
</RectangleGeometry.Transform>
</RectangleGeometry>
</Grid.Clip>
<Image
x:Name="TransitionImage"
Stretch="None" />
</Grid>
</Grid>
</Grid>
CODE BEHIND (c#)
using System;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Media.Imaging;
namespace FlipControls
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
PreloadTransitionGridContentAsync();
}
private async Task PreloadTransitionGridContentAsync()
{
#region Waiting for page 2 content to load
var bi = Page2SampleContentImage.Source as BitmapImage;
if (bi.PixelWidth == 0)
{
bi.ImageFailed += (s, e) => new MessageDialog("Need a different sample image.").ShowAsync();
bi.ImageOpened += (s, e) => PreloadTransitionGridContentAsync();
return;
}
if (Page2ContentGrid.ActualWidth == 0)
{
SizeChangedEventHandler sizeChangedEventHandler = null;
sizeChangedEventHandler = (s, e) =>
{
PreloadTransitionGridContentAsync();
Page2ContentGrid.SizeChanged -= sizeChangedEventHandler;
};
Page2ContentGrid.SizeChanged += sizeChangedEventHandler;
return;
}
#endregion
var rtb = new RenderTargetBitmap();
await rtb.RenderAsync(Page2ContentGrid);
TransitionImage.Source = rtb;
await Task.Delay(40000);
}
private bool isCancellationRequested;
private enum FlipDirections
{
Left,
Right
}
private FlipDirections flipDirection;
private Point manipulationStartPosition;
private double rotationCenterX;
private double rotationCenterY;
private void ManipulationGrid_OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
if (TransitionImage.Source == null)
{
CancelManipulation(e);
return;
}
manipulationStartPosition = e.Position;
if (Page1.Opacity == 1)
{
flipDirection = FlipDirections.Left;
Page2ClipTranslateTransform.X = ManipulationGrid.ActualWidth;
Page2.Opacity = 1;
TransitionGridClipTranslateTransform.X = -80000;
TransitionGridContainerTransform.TranslateX = ManipulationGrid.ActualWidth;
TransitionGrid.Opacity = .975;
}
else
{
if (manipulationStartPosition.X >= this.ManipulationGrid.ActualWidth / 2)
{
// Can't flip left since there is no page after the current one
CancelManipulation(e);
return;
}
flipDirection = FlipDirections.Right;
Page1.Opacity = 1;
}
}
private void ManipulationGrid_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (this.isCancellationRequested)
{
return;
}
if (flipDirection == FlipDirections.Left)
{
var w = this.ManipulationGrid.ActualWidth;
var h = this.ManipulationGrid.ActualHeight;
var cx = Math.Min(0, Math.Max(e.Position.X - w, -w));
var cy = e.Cumulative.Translation.Y;
var angle = (Math.Atan2(cx + manipulationStartPosition.Y - w, -cy) * 180 / Math.PI + +90) % 360;
this.rotationCenterX = w + cx / 2;
if (cy < 0)
{
this.rotationCenterY = h;
}
else
{
this.rotationCenterY = 0;
}
Page2ClipTranslateTransform.X = w + cx / 2;
Page2ClipTranslateTransform.Y = -40000 + h / 2;
Page2ClipRotateTransform.CenterX = this.rotationCenterX;
Page2ClipRotateTransform.CenterY = this.rotationCenterY;
Page2ClipRotateTransform.Angle = angle;
TransitionGridClipTranslateTransform.X = -80000 - (cx / 2);
TransitionGridClipTranslateTransform.Y = -40000 + h / 2;
TransitionGridClipRotateTransform.CenterX = -cx / 2;
TransitionGridClipRotateTransform.CenterY = this.rotationCenterY;
TransitionGridClipRotateTransform.Angle = -angle;
TransitionGridContainerTransform.TranslateX = w + cx;
TransitionGridContainerTransform.CenterX = -cx / 2;
TransitionGridContainerTransform.CenterY = this.rotationCenterY;
TransitionGridContainerTransform.Rotation = 2 * angle;
}
}
private void ManipulationGrid_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
if (this.isCancellationRequested)
{
this.isCancellationRequested = false;
return;
}
var w = this.ManipulationGrid.ActualWidth;
var h = this.ManipulationGrid.ActualHeight;
var sb = new Storyboard();
AddAnimation(sb, Page2ClipTranslateTransform, "X", w / 2);
AddAnimation(sb, Page2ClipRotateTransform, "CenterX", w / 2);
AddAnimation(sb, Page2ClipRotateTransform, "Angle", 0);
AddAnimation(sb, TransitionGridClipTranslateTransform, "X", -80000 + (w / 2));
AddAnimation(sb, TransitionGridClipRotateTransform, "CenterX", w / 2);
AddAnimation(sb, TransitionGridClipRotateTransform, "Angle", 0);
AddAnimation(sb, TransitionGridContainerTransform, "TranslateX", 0);
AddAnimation(sb, TransitionGridContainerTransform, "CenterX", w / 2);
AddAnimation(sb, TransitionGridContainerTransform, "Rotation", 0);
sb.Begin();
}
private static void AddAnimation(Storyboard sb, DependencyObject dob, string path, double to)
{
var da = new DoubleAnimation();
Storyboard.SetTarget(da, dob);
Storyboard.SetTargetProperty(da, path);
da.To = to;
da.Duration = TimeSpan.FromSeconds(.2);
sb.Children.Add(da);
}
private void CancelManipulation(ManipulationStartedRoutedEventArgs e)
{
this.isCancellationRequested = true;
e.Complete();
}
}
}
PageCurl动画是一个"翻页" ..翻页指的是在数字文档中翻页的效果,就好像它是物理文档一样。您可以在这里找到WP7 TinyApps: PageTurner7