How can I recreate this MouseMove effect?
I am developing a form in WPF using Parallax scrolling method and I need to work through the last step. I would like to recreate this nice mouse effect .
I am trying to get a cool slow-motion decay as the mouse stops moving. When the mouse stops moving, the background slowly stops moving a little later, which is easily achievable due to the weakening of the dots, but I have no clear idea how to do this.
I created 3 backgrounds and when the mouse moves I recreate Parallax scrolling. Now I want to add this function to make it more realistic.
Do you have an idea how I can recreate this mouse effect?
EDIT
I am listing my code snippet to show you how I move 3 backgrounds on mouse move:
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 this will help you understand my question better.
source to share
try this, there is a timer that calls your mouseMove method again which I modified a bit to call the GetPos method which actually returns the 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;
}
}
source to share
You basically need to introduce the concept of speed.
When you start moving the mouse, you don't just need to "follow the mouse", but rather use the mouse movement and speed to create the speed at which you will move. Then you can use a timer that does the movement.
When the mouse stops, you gain speed. Then your timer can simply keep moving based on the current speed and let the speed decrease quickly based on some dampening speed. This will give a slowdown effect.
source to share
It's very simple:
Suppose in mouseX and mouseY are the actual values of the mouse. Then the background should, for example, move to backX, backY, which could be something like this:
backX = -mouseX/2; //background moves in opposite direction and with half the speed of the mouse
backY = -mouseY/2;
But to get good 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 each frame (30fps or faster), we calculate the position of the background at that time:
backX += (destBackX - backX)/DELAY; //backX is now eased to the final position destBackX
backY += (destBackY - backY)/DELAY;
The delay can be set from 2 to 16. The higher the value, the slower it follows your movements.
source to share