lerp_如何使用跟随指针的lerp创建自定义光标

lerp

A front-end developer gets to discover new things every day. Learning to create mesmerizing web experiences is a dream of every creative developer. An example of this is a custom cursor which is used in most of the websites you can find on Awwwards or FWA.

前端开发人员每天都可以发现新事物。 学习创造令人着迷的网络体验是每位创意开发人员的梦想。 一个示例就是自定义光标，您可以在Awwwards或FWA上找到的大多数网站中使用该自定义光标。

When I saw the custom cursor that follows mouse pointer, I was awestruck. And you wouldn’t believe how many google searches I made in order to find something about it. But everything went in vain because I could not reflect any term on what to search for.

当我看到跟随鼠标指针的自定义光标时，我感到非常震惊。 而且您不相信我为了找到有关此内容而进行了多少次Google搜索。 但是，一切都白费了，因为我无法反映搜索条件。

Prerequisites for this tutorial —

本教程的先决条件—

• Basic knowledge of HTML, CSS
  HTML，CSS的基础知识
• JavaScript(objects)
  JavaScript(对象)
• jQuery (selectors and changing CSS properties).
  jQuery(选择器和更改CSS属性)。

When you love a new concept, it is hard to find something about it because you really don’t know the exact term you should search for. I believe this simple guide will help you creating custom cursor that follows mouse pointer. It is similar to using lerp (linear interpolation). So let’s begin to code.

当您喜欢一个新概念时，很难找到关于它的东西，因为您真的不知道应该搜索的确切术语。 我相信这个简单的指南将帮助您创建跟随鼠标指针的自定义光标。 它类似于使用lerp(线性插值)。 因此，让我们开始编码。

为此编写HTML (Writing the HTML for it)

The design of the cursor totally depends on you. You may customize it as you want. I am taking a simple circular ring that follows the mouse. Add the following code between body tags.

光标的设计完全取决于您。 您可以根据需要自定义它。 我正在跟随鼠标的一个简单的圆环。 在body标签之间添加以下代码。

<div id="circle"></div> 

And that’s it. Yep, not much of HTML involved. What a sigh of relief.

就是这样。 是的，涉及HTML不多。 松了一口气。

为我们的光标增加一点美感 (Adding Little Beauty to Our Cursor)

Use the following CSS styles to style the div with id circle. The position fixed is used so that the cursor stays in place when you scroll. Otherwise it will move up along with the page as we scroll down. You don’t want to lose the cursor. Do you?

使用以下CSS样式为div with id circle的div with id circle设置样式。 使用固定位置，以便滚动时光标保持在原位。 否则，当我们向下滚动时，它将随页面一起向上移动。 您不想丢失光标。 你呢？

#circle{
  width: 80px;
  height: 80px;
  border: 1px solid #3c2946;
  position: fixed;
  border-radius:50%;
}

让我们添加一些功能 (Let’s Add Some Functionality)

This is where functionality comes into play. I am using jQuery in this project so make sure you add jQuery.js into your JavaScript files and link it to the HTML along with the index.js file.

这就是功能发挥作用的地方。 我在该项目中使用jQuery ，因此请确保将jQuery.js添加到JavaScript文件中，并将其与index.js文件一起链接到HTML。

First declare the variables to hold current mouse positions and initialize them.

首先声明变量以保存当前鼠标位置并对其进行初始化。

var mouseX=window.innerWidth/2,
    mouseY=window.innerHeight/2;

Now add the circle object. Select the div with id circle using jQuery selectors. In this object, we declare an update function to update translations of cursor so that it is at the tip of actual mouse pointer.

现在添加圆对象。 使用jQuery选择器选择div with id circle的div with id circle 。 在此对象中，我们声明一个更新函数来更新游标的翻译，使其位于实际鼠标指针的顶端。

var circle = { 
     el:$(‘#circle’),
     x:window.innerWidth/2, 
     y:window.innerHeight/2, 
     w:80, 
     h:80, 
     update:function(){
                   l = this.x-this.w/2; 
                   t = this.y-this.h/2; 
                   this.el.css({ 
                            ‘transform’:
                            ’translate3d(‘+l+’px,‘+t+’px, 0)’ }); 
                           }
}

更新位置和动画 (Updating Positions and Animating)

We then update the values of mouseX and mouseY with the current mouse position using e.clientY and e.clientY .

然后，我们使用e.clientY和e.clientY使用当前鼠标位置更新mouseX和mouseY的值。

$(window).mousemove (function(e){
  mouseX = e.clientX;
  mouseY = e.clientY;
})

Use setInterval to animate the cursor. Then we have our move function that calls update circle position.

使用setInterval设置光标动画。 然后，我们有了移动函数，该函数调用更新圆的位置。

setInterval (move,1000/60)function move(){
  circle.x = lerp (circle.x, mouseX, 0.1);
  circle.y = lerp (circle.y, mouseY, 0.1);
  circle.update() 
}

添加有机缓和 (Adding the Organic Easing)

Now, you’ve come this far. Let’s add the lerp function. The factor 0.1 defines how much fraction of the total distance between the start and end, will the cursor move, every time screen is repainted. So it actually never reaches the destination as the distance becomes smaller and smaller, but never becomes zero. But for us, it gives an organic easing effect.

现在，您已经走了这么远。 让我们添加lerp函数。 系数0.1定义每次重新绘制屏幕时，光标将移动的起点和终点之间的总距离的多少。 因此，随着距离越来越小，它实际上从未到达目的地，但永远不会变为零。 但是对我们来说，它提供了有机的放松效果。

function lerp (start, end, amt){
  return (1-amt)*start+amt*end
}

Lerp is a great animation effect. You can use it in your scrolling to give your websites an organic easing while scrolling. It is not the big complex things, but the small things that add up to make a really great web experience. And that delights us.

Lerp是一种很棒的动画效果。 您可以在滚动中使用它，以便在滚动时使网站自然放松。 并不是什么大而复杂的事情，而是总会带来真正出色的Web体验的小事情。 这使我们感到高兴。

结论 (The Conclusion)

Here is the codepen demo to see it live in action.

这是Codepen演示，可以看到它的实际效果。

Having such micro-interactions and effects helps us create immersive web experiences, which is the prime goal of a creative developer. Give yourself a pat on the back, because you are now one step closer to becoming a creative developer.

具有这种微交互作用和效果有助于我们创造身临其境的网络体验，这是创意开发人员的首要目标。 振作起来，因为您现在离成为创意开发人员仅一步之遥。

I hope this helped you and you enjoyed creating this interactive effect. If you are new to front-end development, you might want to read JavaScript strings explained as simple as possible. Thank you for giving your valuable time to this story.

希望这对您有所帮助，并且您喜欢创造这种互动效果。 如果您不熟悉前端开发，则可能希望阅读尽可能简单JavaScript 字符串 。 感谢您为这个故事付出宝贵的时间。

翻译自: https://medium.com/javascript-in-plain-english/how-to-make-a-custom-cursor-with-lerp-that-follows-pointer-6aa6f92fe48a

lerp