Page Animation in a WPF Application

[EMRE ANDIC]

Hi,
I want to learn how can i create page animation for a wpf applicattion like your RadControls for WPF Demos Application. As you know, it has left TreeView Menu with icons, and when you click a TreeView item, pages are sliding to left, and dissappearing.

[Kaloyan]

Hello EMRE ANDIC,

Find the attached animation.

Kind regards,
Kaloyan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[EMRE ANDIC]

Thank you so much.

[Anthony]

Nice example, how can i change animation direction to Right -> Left?

[Kevin White]

Kaloyan,

I am using your example for a little WPF project I am writing, but I would also like to know how to make the animation slide out to the right.  I am a storyboard newbie and any help you can provide is appreciated.

Kevin

[Albert]

          public void BeginRight(FrameworkElement mockItem, Grid container, FrameworkElement newPage)
        {
            Container = container;
            PageWidth = container.ActualWidth;
            item1 = mockItem;
            item2 = newPage;

            Container.Children.Add(item1);

            var width = PageWidth;

            var scaleFactor = 1.0;
            var halfSrink = (1.0 - scaleFactor) / 2;

            var spacing = 15.0;

            animation = item1
                .Animate()
                    .EnsureDefaultTransforms()
                    .MoveX(0.0, 0, 1.5, -(width * (scaleFactor - halfSrink)) - spacing, 1.9, -(width * scaleFactor) - spacing)
                .Animate(item2)
                    .EnsureDefaultTransforms()
                    .MoveX(0.0, ((scaleFactor + halfSrink) * width) + spacing, 0.2, ((scaleFactor + halfSrink) * width) + spacing, 0.0, ((scaleFactor - halfSrink) * width) + spacing, 1.5, 0)
                .Instance;

            animation.SpeedRatio = 755.0 / width * 5;

            IsRunning = true;

            animation.Completed += OnCompleted;

            animation.Begin();
        }

        public void BeginLeft(FrameworkElement mockItem, Grid container, FrameworkElement newPage)
        {
            Container = container;
            PageWidth = container.ActualWidth;
            item1 = mockItem;
            item2 = newPage;

            Container.Children.Add(item1);

            var width = PageWidth;

            var scaleFactor = 1.0;
            var halfSrink = (1.0 - scaleFactor) / 2;

            var spacing = 15.0;

            animation = item1
                .Animate()
                    .EnsureDefaultTransforms()
                    .MoveX(0.0, 0, 1.5, (width * (scaleFactor - halfSrink)) + spacing, 1.9, (width * scaleFactor) + spacing)
                .Animate(item2)
                    .EnsureDefaultTransforms()
                    .MoveX(0.0, -((scaleFactor + halfSrink) * width) - spacing, 0.2, -((scaleFactor + halfSrink) * width) - spacing, 0.0, -((scaleFactor - halfSrink) * width) - spacing, 1.5, 0)
                .Instance;

            animation.SpeedRatio = 755.0 / width * 5;

            IsRunning = true;

            animation.Completed += OnCompleted;

            animation.Begin();
        }

[Kevin White]

Thanks Albert

[ITA]

hi,

is it possible to make the animation faster?

thanks
rene

[Kevin White]


In the beginleft and beginright methods change the speed ratio value from 

    animation.SpeedRatio = 755.0 / width * 5;
to
animation.SpeedRatio = 755.0 / width * 10;

the higher the value constant value at the end, the faster the animation

[Marvin]

Thank you for your snippet, I'm a newbie and I've made much progress with it for a single day. I'm stuck however in the navigation. Unlike in your example, my links are within the page content so changing frame source is giving me a terrible headache. Please point me to the right direction.

Thanks in advace

[Kevin White]

What i did wth mine is (using the MVVM light toolkit) register a message listener on the main window.  All content in the frame doesnt actually do the navigation but rather sends a request to navigate to a page and specifies the direction.   You could also have a common base class for all your content and have it expose an event that the main window could monitor, or perhaps put in the constructor of your base class a required parameter of the frame so you can control the navigation from the content.

[Marvin]

thanks for getting back. being a newbie to WPF, C# development, I have very little clues on how to proceed. would you be kind enough to write a minor snippet based on the example posted? I will be really thankful for this

[Huas]

I'm looking through the example annimation that's included in the project that Kaloyan provided. Although Albert did provide sample code for animation of BeginLeft/BeginRight, I want the same animation and effect as provided in the project just opposite direction. I believe the one provided in the project is from Right to Left. Can anyone advise on this?

public void Begin(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();
  }

[Huas]

Any update on this? I'm new to WPF and Animation.