如何重新创建此MouseMove效果？

Question

我正在使用视差滚动技术在WPF中开发一个表单，我需要制定出最后一步。我希望重新创建this nice effect of the mouse。

我试图让鼠标完成移动时很酷的延迟缓动。当鼠标移动完毕后，背景会慢慢停止移动，这很容易通过点的放松来实现，但我不清楚它是如何实现的。

我创建了3个背景，当鼠标移动时，我重新创建了视差滚动。现在我希望添加此功能，使其更加真实。

你有什么想法我可以重新创建鼠标的这种效果吗？

编辑

我列出我的代码片段来告诉你我是如何移动3个时背景鼠标移动事件：

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; 

    } 

也许可以让你明白我的问题更好。

Answer 1

试试这个，有个重复调用你的mouseMove方法的定时器 我修改了一下就调用了实际返回延迟mousePos的GetPos方法。

这应该让你开始。

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; 
    } 

} 

Answer 2

你基本上需要引入速度的概念。

当您开始移动鼠标时，您不仅需要“遵循鼠标”，而是需要使用鼠标的移动和速度来创建移动的速度。然后你可以有一个定时器来完成移动。

当鼠标停止时，您将获得速度。然后，您的计时器可以保持基于当前速度的运动，并根据某种衰减速度快速减小速度。这会给它减速的效果。

Answer 3

这很容易：

假设在鼠标X和鼠标Y是实际的鼠标值。那么背景应该为实例移动到backX，backY这可能是这样的：

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

但让你不直接设置变量漂亮的流体运动，但不喜欢这样写道：

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

我们计算此时的背景位置

而且对于每帧（每秒或更快30帧）：

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

延迟可以2和16更高之间的任何位置设置的值，第慢慢跟随你的动作。