reverse page animation

2 posts, 0 answers
  1. Huas
    Huas avatar
    4 posts
    Member since:
    Oct 2012

    Posted 31 Oct 2012 Link to this post

    I've downloaded and opened the example project provided by Kaloyan in reference in this link:
    Page Animation in a WPF Application

    I am new to WPF and Animation. I'm able to follow through the code and understand it quite a bit but I wanted the animation to do the opposite, which I got stuck on. Although Albert from the thread posted code to reverse the animation, there wasn't the same effect as the animation included in the project. The animation provided had the effect of moving right to left. Can anyone please provide me with the animation to do the opposite, please? Here again is the sample animation (right to left) taken from the code.

    public void BeginRight(FrameworkElement mockItem1, Grid container, FrameworkElement newPage)
      {
       this.Container = container;
       this.PageWidth = container.ActualWidth;
       this.item1 = mockItem1;
       this.item2 = newPage;
     
       this.Container.Children.Add(this.item1);
     
       var width = PageWidth;
     
       var scaleFactor = 0.8;
       var halfSrink = (1.0 - scaleFactor) / 2;
     
       this.Container.Children.Add(this.mask1);
       this.Container.Children.Add(this.mask2);
     
       var scaleDownSpline = new Spline(0.504000008106232, 0.256000012159348, 0.458999991416931, 1);
       var moveSpline = new Spline(0.247999995946884, 0, 1, 1);
       var scaleUpSpline = new Spline(0.321000009775162, 0, 0.45100000500679, 1);
       var spacing = 15.0;
     
       this.animation = this.item1
        .Animate()
        .With(this.mask1)
         .EnsureDefaultTransforms()
         .Origin(0, 0.5)
         .Scale(0, 1, 0.2, 1, 0.7, scaleFactor)
          .Splines(2, scaleDownSpline)
         .MoveX(0.7, 0, 1.365, (-width * (scaleFactor - halfSrink)) - spacing, 1.9, (-width * scaleFactor) - spacing)
          .Splines(1, moveSpline)
          .Splines(2, scaleUpSpline)
        .Without(this.item1)
         .Opacity(0, 0, 0.2, 0, 0.7, 1)
          .Splines(1, scaleDownSpline)
        .Animate(this.mask2)
         .Opacity(1.35, 1, 1.9, 0)
          .Splines(scaleUpSpline)
        .With(this.item2)
         .EnsureDefaultTransforms()
         .Origin(0.5, 0.5)
         .Scale(0, scaleFactor, 1.365, scaleFactor, 1.9, 1)
          .Splines(1, moveSpline)
          .Splines(2, scaleUpSpline)
         .MoveX(0.0, ((scaleFactor + halfSrink) * width) + spacing, 0.2, ((scaleFactor + halfSrink) * width) + spacing, 0.7, ((scaleFactor - halfSrink) * width) + spacing, 1.365, 0)
          .Splines(2, scaleDownSpline)
          .Splines(3, moveSpline)
        .Instance;
     
       this.animation.SpeedRatio = 755.0 / width * 1.5;
     
       this.isRunning = true;
     
       this.animation.Completed += (sender, e) =>
       {
                    this.TransitionAnimationCompleted(this, new TransitionEventArgs(item2));
     
        Container.Children.Remove(mask1);
        Container.Children.Remove(mask2);
        RemoveVisualBrush();
        Container.Children.Remove(item1);
        item1 = null;
        item2 = null;
       };
     
       this.animation.Begin();
      }
     

  2. Huas
    Huas avatar
    4 posts
    Member since:
    Oct 2012

    Posted 01 Nov 2012 Link to this post

    I'm finally able to figure this out. Here is the updated code just in case someone may come across this.

    public void BeginLeft(FrameworkElement mockItem1, Grid container, FrameworkElement newPage)
            {
                this.Container = container;
                this.PageWidth = container.ActualWidth;
                this.item1 = mockItem1;
                this.item2 = newPage;
     
                this.Container.Children.Add(this.item1);
     
                var width = PageWidth;
     
                var scaleFactor = 0.8;
                var halfSrink = (1.0 - scaleFactor) / 2;
     
                this.Container.Children.Add(this.mask1);
                this.Container.Children.Add(this.mask2);
     
                var scaleDownSpline = new Spline(0.504000008106232, 0.256000012159348, 0.458999991416931, 1);
                var moveSpline = new Spline(0.247999995946884, 0, 1, 1);
                var scaleUpSpline = new Spline(0.321000009775162, 0, 0.45100000500679, 1);
                var spacing = 15.0;
     
                this.animation = this.item1
                    .Animate()
                    .With(this.mask1)
                        .EnsureDefaultTransforms()
                        .Origin(0.5, 0.5)
                        .Scale(0, 1, 0.2, 1, 0.7, scaleFactor)
                            .Splines(2, scaleDownSpline)
                            .MoveX(0.7, 0, 1.365, (width * (scaleFactor - halfSrink)) + spacing, 1.9, (width + scaleFactor) + spacing)
                            .Splines(1, moveSpline)
                            .Splines(2, scaleUpSpline)
                    .Without(this.item1)
                        .Opacity(0, 0, 0.2, 0, 0.7, 1)
                            .Splines(1, scaleDownSpline)
                    .Animate(this.mask2)
                        .Opacity(1.35, 1, 1.9, 0)
                            .Splines(scaleUpSpline)
                    .With(this.item2)
                        .EnsureDefaultTransforms()
                        .Origin(0, 0.5)
                        .Scale(0, scaleFactor, 1.365, scaleFactor, 1.9, 1)
                            .Splines(1, moveSpline)
                            .Splines(2, scaleUpSpline)
                            .MoveX(0.0, -((scaleFactor + halfSrink) * width) - spacing, 0.2, -((scaleFactor + halfSrink) * width) - spacing, 0.7, -((scaleFactor - halfSrink) * width) - spacing, 1.365, 0)
                            .Splines(2, scaleDownSpline)
                            .Splines(3, moveSpline)
                    .Instance;
     
                this.animation.SpeedRatio = 755.0 / width * 1.5;
     
                this.isRunning = true;
     
                this.animation.Completed += (sender, e) =>
                {
                    this.TransitionAnimationCompleted(this, new TransitionEventArgs(item2));
     
                    Container.Children.Remove(mask1);
                    Container.Children.Remove(mask2);
                    RemoveVisualBrush();
                    Container.Children.Remove(item1);
                    item1 = null;
                    item2 = null;
                };
     
                this.animation.Begin();
            }
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top