如何重新创建此 MouseMove 效果？

Question

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

我正在尝试在鼠标完成移动时获得很酷的延迟缓动。当鼠标完成移动后，背景会慢慢停止移动，这很容易通过缓动点来实现，但我不知道如何做到这一点。

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

你知道如何重现鼠标的这种效果吗？

编辑

我列出了我的代码 sn-p 来向你展示当鼠标移动事件时我是如何移动这 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

试试这个，有一个 Timer 会重复调用你的 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

很简单：

假设 mouseX 和 mouseY 是实际的鼠标值。然后背景应该例如移动到 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 之间的任意值。值越高，它跟随你的动作越慢。