WinRT中的页面卷曲动画（Windows Phone 8.1）

Question

Below code is working fine for page turn animation for right to left page with curl animation but for left to right page turning is not proper, I have tried to change the logic but I haven't succeed yet, can anyone help me out ?

Or any other work around for page curl animation in WinRT?

Reference :: Path Geometry Clipping Equvalent 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();
        }
    }
}

Answer 1

PageCurl animation is a “flip page”.. Flip page refers to the effect of flipping through the pages of a digital document as if it were a physical document. You can find the WP7 TinyApps: PageTurner7 here.