WinRT中的頁面卷曲動畫（Windows Phone 8.1）

Question

下面的代碼對於使用curl動畫從右向左翻頁的翻頁動畫效果很好，但是對於從右翻頁的翻頁動畫不合適，我試圖更改邏輯，但還沒有成功，有人可以幫助我嗎？

還是在WinRT中解決頁面卷曲動畫的其他方法？

參考:: 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>

后面的代碼（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動畫是一個“翻轉頁面”。翻轉頁面是指像翻閱數字文檔一樣，將其視為物理文檔的效果。 您可以在此處找到WP7 TinyApps: PageTurner7 。