This is a migrated thread and some comments may be shown as answers.

Page Animation in a WPF Application

13 Answers 258 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
EMRE ANDIC
Top achievements
Rank 1
EMRE ANDIC asked on 22 Apr 2010, 09:55 AM
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.

13 Answers, 1 is accepted

Sort by
0
Accepted
Kaloyan
Telerik team
answered on 28 Apr 2010, 08:17 AM
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.
0
EMRE ANDIC
Top achievements
Rank 1
answered on 28 Apr 2010, 01:31 PM
Thank you so much.
0
Anthony
Top achievements
Rank 1
answered on 15 Jun 2011, 03:52 PM
Nice example, how can i change animation direction to Right -> Left?
0
Kevin White
Top achievements
Rank 2
answered on 24 Feb 2012, 08:13 PM
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
0
Albert
Top achievements
Rank 2
answered on 25 Feb 2012, 12:29 PM
           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();
        }
0
Kevin White
Top achievements
Rank 2
answered on 27 Feb 2012, 02:21 PM
Thanks Albert
0
ITA
Top achievements
Rank 1
answered on 18 May 2012, 09:56 AM
hi,

is it possible to make the animation faster?

thanks
rene
0
Kevin White
Top achievements
Rank 2
answered on 18 May 2012, 01:41 PM

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
0
Marvin
Top achievements
Rank 1
answered on 28 May 2012, 03:42 PM
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
0
Kevin White
Top achievements
Rank 2
answered on 29 May 2012, 02:19 PM
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.
0
Marvin
Top achievements
Rank 1
answered on 30 May 2012, 03:12 AM
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
0
Huas
Top achievements
Rank 1
answered on 29 Oct 2012, 07:46 PM
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();
  }




0
Huas
Top achievements
Rank 1
answered on 30 Oct 2012, 08:01 PM
Any update on this? I'm new to WPF and Animation.
Tags
General Discussions
Asked by
EMRE ANDIC
Top achievements
Rank 1
Answers by
Kaloyan
Telerik team
EMRE ANDIC
Top achievements
Rank 1
Anthony
Top achievements
Rank 1
Kevin White
Top achievements
Rank 2
Albert
Top achievements
Rank 2
ITA
Top achievements
Rank 1
Marvin
Top achievements
Rank 1
Huas
Top achievements
Rank 1
Share this question
or