如何重新創建此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更高之間的任何位置設置的值，第慢慢跟隨你的動作。