How I can recreate this MouseMove effect?

Question

I'm developing a form in WPF with the technique of Parallax Scrolling and I need to work out one last step. I wish recreate this nice effect of the mouse.

I'm trying to get the cool delayed easing when the mouse finishes moving. When the mouse finishes moving, the background slowly stops moving a bit later, which is easily achievable via the easing of points, but I don't have a clear idea on how do it.

I created 3 backgrounds and when the mouse moves, I recreate Parallax Scrolling. Now I wish add this feature to make it all more realistic.

Do you have any idea how I can recreate this effect of the mouse?

EDIT

I list my code snippet to show you how I move the 3 backgrounds when the mouse move event:

private void Window_MouseMove(object sender, MouseEventArgs e)//it is the Layout Root that contain the 3 layouts to create the parallax effect
    {
        Point mouse = e.GetPosition(this);

        TransformGroup group = (TransformGroup)this.grid.RenderTransform; //The first Background

        TranslateTransform translate = (TranslateTransform)group.Children[3];

        translate.X = 400 - mouse.X ;

        translate.Y = 300 - mouse.Y;


        TransformGroup group1 = (TransformGroup)this.grid1.RenderTransform;// 2th Background

        TranslateTransform translate1 = (TranslateTransform)group1.Children[3];

        translate1.X = 400 - (mouse.X - 10) * 2;

        translate1.Y = 300 - (mouse.Y - 10) * 2;


        TransformGroup group2 = (TransformGroup)this.grid2.RenderTransform;// 3th Background

        TranslateTransform translate2 = (TranslateTransform)group2.Children[3];

        translate2.X = 400 - (mouse.X - 20) * 3;

        translate2.Y = 300 - (mouse.Y - 20) * 3;

    }

Maybe that can make you understand my question better.

Answer 1

You basically need to introduce a concept of velocity.

When you start moving the mouse, you need to not just "follow the mouse", but rather use the mouse's movement and speed to create a velocity by which you'll move. You can then have a timer that does the movement.

When the mouse stops, you'll have a velocity. Your timer can then just keep the movement based off the current velocity, and let the velocity reduce quickly based off some dampening rate. This will give the effect of it slowing down.

Answer 2

It's very easy:

Suppose in mouseX and mouseY are the actual mouse values. Then the background should for instance move to backX, backY which could be something like:

 backX = -mouseX/2;    //background moves in opposite direction and with half the speed of the mouse
 backY = -mouseY/2;

But to get the nice fluid movement you don't set the variable directly but do it like this:

 destBackX = -mouseX/2;  //actual position we want the background to move to
 destBackY = -mouseY/2;

And for every frame (30 frames per second or faster) we calculate the background position at this time:

 backX += (destBackX - backX)/DELAY;   //backX is now eased to the final position destBackX
 backY += (destBackY - backY)/DELAY;

The Delay can be set anywhere between 2 and 16. The higher the value, the slower it follows your movements.

Answer 3

Hey,

try this, there is a Timer that call repeatly your mouseMove method that i Modified just a bit to call the GetPos Method that actually return a delayed mousePos.

this should get you started.

    public partial class Window1 : Window
{
 public Window1()
 {
  InitializeComponent();
  this.Loaded += new RoutedEventHandler(Window1_Loaded);
 }

 private void Window1_Loaded(object sender, RoutedEventArgs e)
 {
  System.Windows.Threading.DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer( System.Windows.Threading.DispatcherPriority.Render);
  dispatcherTimer.Tick += new EventHandler(DispatcherTimer_Tick);
  dispatcherTimer.Interval = new TimeSpan(0,0,0,0,15);
  dispatcherTimer.Start();
 }

 double precision = 0.025;

 Point GetPos (Point pt, Point target, double speed) 
 { 
  double xdif = target.X-pt.X; 
  double ydif = target.Y-pt.Y; 
  if (xdif>=-precision && xdif<=precision) pt.X = target.X;
  else                       pt.X += (target.X-pt.X)*speed; 

  if (ydif>=-precision && ydif<=precision) pt.Y = target.Y; 
  else                      pt.Y += (target.Y-pt.Y)*speed; 
  return  pt; 
 }

 double speed          = 0.1;
 Point mouse = new Point();
 private void DispatcherTimer_Tick(object sender, EventArgs e)
 {
  Point mousePos         = Mouse.GetPosition(this); // change 'this' to a transparent element over your view if needed
  mouse = GetPos (mouse, mousePos, speed);

  TransformGroup group = (TransformGroup)this.grid.RenderTransform; 
  TranslateTransform translate = (TranslateTransform)group.Children[3];
  translate.X = 400 - mouse.X ;
  translate.Y = 300 - mouse.Y;

  TransformGroup group1 = (TransformGroup)this.grid1.RenderTransform;
  TranslateTransform translate1 = (TranslateTransform)group1.Children[3];
  translate1.X = 400 - (mouse.X - 10) * 2;
  translate1.Y = 300 - (mouse.Y - 10) * 2;

  TransformGroup group2 = (TransformGroup)this.grid2.RenderTransform;// 3th Background
  TranslateTransform translate2 = (TranslateTransform)group2.Children[3];
  translate2.X = 400 - (mouse.X - 20) * 3;
  translate2.Y = 300 - (mouse.Y - 20) * 3;
 }

}