指針和指針的指針

a week ago I saw a new IPad Pointer presentation and was very excited about what they did. It was very interesting to see how they design different pointer modes and attention to details. Here is the presentation:

一周前，我看到了一個(gè)新的IPad Pointer演示文稿，并對(duì)他們的工作感到非常興奮。 看到他們?nèi)绾卧O(shè)計(jì)不同的指針模式并關(guān)注細(xì)節(jié)非常有趣。 這是演示：

Some of their approaches were very interesting, and I immediately start to think if I can recreate the same cursor effects on the web.

他們的一些方法非常有趣，我立即開始考慮是否可以在網(wǎng)絡(luò)上重新創(chuàng)建相同的光標(biāo)效果。

Today, the article will be written as a diary — separated into days, it will be easier to track the progress and fallow the story.

今天，該文章將以日記形式寫成-分成幾天，可以更輕松地跟蹤進(jìn)度并了解故事。

But before let me share my “contextCursor” module, so, you will know what I’m talking about👇🏽

但是在讓我分享我的“ contextCursor”模塊之前，您將了解我在說(shuō)什么👇🏽

重現(xiàn)效果 (Effects to recreate)

There was a very interesting feature like custom cursor — when we can morph the standard cursor into any shape/image we want, but today I’ll try to recreate these effects:

有一個(gè)非常有趣的功能，例如自定義光標(biāo)-當(dāng)我們可以將標(biāo)準(zhǔn)光標(biāo)變形為所需的任何形狀/圖像時(shí)，但是今天我將嘗試重新創(chuàng)建以下效果：

Shape morphing and parallax形狀變形和視差 Lift Effect提升效果

The general challenges here will be:

這里的一般挑戰(zhàn)將是：

Morphing/transitions smoothness.

變形/過(guò)渡平滑度。

Parallax for the cursor and the target element on hover.

光標(biāo)和懸停目標(biāo)元素的視差。

Cursor morphing in the “Lift” mode.

“提升”模式下的光標(biāo)變形。

The rest of the day I spend on my thoughts and research.

余下的時(shí)間，我會(huì)全神貫注于思想和研究。

I knew that perhaps I use GSAP library. I used it before and can say that it’s a problem solver for interactive animation. But I decided to start on my own, just to check how easy it will be and fill all layers of pain when something doesn't work.

我知道也許我使用了GSAP庫(kù) 。 我以前使用過(guò)它，可以說(shuō)它是交互式動(dòng)畫的問(wèn)題解決者。 但是我決定獨(dú)自一人開始，只是檢查它會(huì)變得多么容易，并在某些不起作用的情況下彌補(bǔ)所有的痛苦。

The first shot was based on the collision tracking of an object with another object and the hover animation was solved with CSS transitions.

第一個(gè)鏡頭基于一個(gè)對(duì)象與另一個(gè)對(duì)象的碰撞跟蹤，并且懸停動(dòng)畫通過(guò)CSS過(guò)渡解決。

I had some trouble with collisions. For some reason, the collision fired only for the last element.

我在碰撞時(shí)遇到了麻煩。 由于某種原因，碰撞僅針對(duì)最后一個(gè)元素觸發(fā)。

The rest of the day I spend torture myself mentally. I fell asleep thinking about waking up and solve this question.

剩下的一天，我會(huì)在精神上折磨自己。 我睡著了，想著醒來(lái)解決這個(gè)問(wèn)題。

Gees what? I gave up. I ask Gods on the StackOverflow. It solved my issue.

什么？ 我放棄。 我在StackOverflow上問(wèn)諸神。 它解決了我的問(wèn)題。

The reason was in the wrong understanding of how forEach works. It doesn’t wait when a function returns. And instead of this:

原因是對(duì)forEach工作方式的錯(cuò)誤理解。 當(dāng)函數(shù)返回時(shí)，它不會(huì)等待。 而不是這樣：

I should use this:

我應(yīng)該使用這個(gè)：

Not so elegant, but works! I mean with forEach we can use one loop function for all props.

不太優(yōu)雅，但是有效！ 我的意思是，對(duì)于forEach我們可以對(duì)所有道具使用一個(gè)循環(huán)函數(shù)。

Here is the first implementation. Simple and… twitchy. Always start the cursor transformation from the top-left position.

這是第一個(gè)實(shí)現(xiàn)。 簡(jiǎn)單而又抽搐。 始終從左上角開始光標(biāo)轉(zhuǎn)換。

To be able to click through the overlay cursor I added pointer-events: none; to the fake cursor and added transition property for border-radius, width, height and background-color. The collision function:

為了能夠通過(guò)覆蓋光標(biāo)單擊，我添加了pointer-events: none; 到偽造的光標(biāo)，并為border-radius ， width, height和background-color添加了transition屬性。 碰撞功能：

The issue — cursor morphing start not from the cursor center but from the top/left position of the target element.

問(wèn)題-光標(biāo)變形不是從光標(biāo)中心開始，而是從目標(biāo)元素的頂部/左側(cè)位置開始。

So, I tried another approach — I tried to correct the start position with transform property.

因此，我嘗試了另一種方法-我嘗試使用transform屬性糾正起始位置。

But it was a bad idea to move the cursor with top and left positioning and use transform at the same time to correct the point of transformation. This only worked only on the “input” but not the “output”.

但是，將光標(biāo)移動(dòng)到頂部和左側(cè)位置并同時(shí)使用transform來(lái)校正transforming point是一個(gè)壞主意。 這僅對(duì)“輸入”有效，而對(duì)“輸出”無(wú)效。

“Input” direction and “output” direction“輸入”方向和“輸出”方向

And to make a proper output animation I had to calculate a cursor position inside the target element and correct top/left and transform y, x in parallel. And I did it but the result was too glitchy.

為了制作適當(dāng)?shù)妮敵鰟?dòng)畫，我必須計(jì)算目標(biāo)元素內(nèi)的光標(biāo)位置，并校正頂部/左側(cè)并并行轉(zhuǎn)換y，x。 我做到了，但是結(jié)果太小故障了。

I wrote this module with Typescript. Because it helped me to keep my code clean and helped me to handle errors + very convenient tips.

我用Typescript編寫了這個(gè)模塊。 因?yàn)樗梢詭椭冶３执a干凈，并幫助我處理錯(cuò)誤和非常方便的提示。

Body styles

體型

I added a property that will reset margin and padding for the body, due to this the mouse can be positioned wrong.

我添加了一個(gè)屬性，該屬性將重置主體的邊距和填充，因此，鼠標(biāo)可能定位錯(cuò)誤。

I fell asleep with a thought that the next day I’ll try GSAP.

我睡著了，想到第二天我將嘗試GSAP 。

The GreenSock Animation Platform (GSAP for short) is a powerful JavaScript library that enables front-end developers and designers to create robust timeline based animations. This allows for precise control for more involved animation sequences rather than the sometimes constraining keyframe and animation properties that CSS offers.

GreenSock動(dòng)畫平臺(tái)(簡(jiǎn)稱GSAP )是一個(gè)功能強(qiáng)大JavaScript庫(kù)，使前端開發(fā)人員和設(shè)計(jì)人員可以創(chuàng)建基于時(shí)間軸的強(qiáng)大動(dòng)畫。 這允許對(duì)更多涉及的動(dòng)畫序列進(jìn)行精確控制，而不是CSS有時(shí)提供的約束keyframe和animation屬性。

So, GSAP. GSAP forums it’s a powerful thing. But many examples you can find on Codepen as well. A simple and small example that I found as a reference.

因此，GSAP。 GSAP論壇是一項(xiàng)強(qiáng)大的功能。 但是，您也可以在Codepen上找到許多示例。 我找到一個(gè)簡(jiǎn)單的小例子作為參考。

And I tried the same approach. With GSAP it works like a charm

我嘗試了相同的方法。 借助GSAP，它就像魅力一樣運(yùn)作

A few interesting examples. A library that can morp the cursor to the target element and without external libraries 👇🏽

一些有趣的例子。 無(wú)需外部庫(kù)即可將光標(biāo)拖到目標(biāo)元素的庫(kù)👇🏽

And really awesome cursor effects on Codrops including source code 👇🏽

而且對(duì)Codrops的光標(biāo)效果非常好，包括源代碼👇🏽

I also learned the difference between mouseleave / mouseenter and mouseout / mouseover 👇🏽

我也學(xué)會(huì)之間的區(qū)別mouseleave / mouseenter和mouseout / mouseover 👇🏽

“mouseover” + “mouseout” on the left and “mouseenter” + “mouseleave” on the right. Find the difference :-)左側(cè)為“ mouseover” +“ mouseout”，右側(cè)為“ mouseenter” +“ mouseleave”。 找不同:-)

?T?h?e? ?n?e?x?t? ?t?h?i?n?g? ?I? ?d?i?d? ?i?s? ?s?e?p?a?r?a?t?e?d? ?e?x?e?c?u?t?e? ?f?u?n?c?t?i?o?n?s? ?b?y? ?t?y?p?e?s?.? ?B?e?c?a?u?s?e? ?I? ?p?l?a?n?n?e?d? ?t?o? ?m?a?k?e? ?s?e?v?e?r?a?l? ?m?o?d?e?s? ?o?f? ?t?h?e? ?c?u?r?s?o?r?.? ?T?h?e? ?f?i?r?s?t? ?a?n?d? ?t?h?e? ?d?e?f?a?u?l?t? ?o?n?e? ?w?i?l?l? ?b?e? ?c?o?n?t?e?x?t? ?c?u?r?s?o?r?.? UPD: I leave only one mode — context-cursor

接下來(lái)的事情我所做的是分開執(zhí)行的功能由?t?y?p?e?s?.?因?yàn)槲矣?jì)劃做幾種模式的?c?u?r?s?o?r?.?第一和一個(gè)默認(rèn)將上下文?c?u?r?s?o?r?.?UPD：我只留下一個(gè)模式-上下文光標(biāo)

I also separated cursor effects. You can add specify these types in the data attribute data-cursor.

我還分離了光標(biāo)效果。 您可以在data屬性data-cursor添加指定這些類型。

因此，我們有以下效果： (So we have these effects:)

— noPadding. By default will add small padding to the cursor.

— noPadding。 默認(rèn)情況下會(huì)向光標(biāo)添加小填充。

— noParallax. Will switch off the parallax effect.

— noParallax。 將關(guān)閉視差效果。

— Lift effect. The cursor will be dissolved in the button. Reincarnating the cursor into a button — we will lift the button a little and add a shadow to it.

—提升效果。 光標(biāo)將是 溶解在按鈕上。 將光標(biāo)重新變成按鈕-我們將按鈕稍微抬起并為其添加陰影。

視差效果 (Parallax effect)

First, we need to do is detect when the mouse moves right and left when it is on a hovered element mouseenter. To do so we need to take the relative mouse position:

首先，我們要做的是檢測(cè)鼠標(biāo)在懸停元素mouseenter上時(shí)何時(shí)左右移動(dòng)。 為此，我們需要采用鼠標(biāo)的相對(duì)位置：

and then we need to subtract half the width of the element from the relative position:

然后我們需要從相對(duì)位置減去元素的一半寬度：

And the last thing we have to do to make it work is to add the speed variable. This variable will slow down the movement. We will add this variable to the module as a changeable argument.

為了使它起作用，我們要做的最后一件事是添加speed變量 。 此變量將減慢運(yùn)動(dòng)速度。 我們將此變量作為可變參數(shù)添加到模塊中。

You can see how numbers changing from positive to negative from the button center.您可以從按鈕中心看到數(shù)字如何從正變?yōu)樨?fù)。

Let’s make a function that will count the parallax.

讓我們做一個(gè)計(jì)算視差的函數(shù)。

Now we need to implement the same effect to the hovered element but with the negative sign:

現(xiàn)在，我們需要對(duì)懸停的元素實(shí)現(xiàn)相同的效果，但帶有負(fù)號(hào)：

I added an active class c-cursor_active when the cursor is hovering an element. That you can add your custom active styles without involving JS.

當(dāng)光標(biāo)懸停在元素上時(shí)，我添加了一個(gè)活動(dòng)類c-cursor_active 。 您可以在不涉及JS的情況下添加自定義活動(dòng)樣式。

But there is a problem. X and Y props go as subpixels in CSS transform but left and right props go as rounded numbers and because of that, the animation was to “steppy” like there is 10 fps instead of 60.

但有一個(gè)問(wèn)題。 X和Y道具在CSS transform以子像素的形式出現(xiàn)，而左，右道具以四舍五入的形式出現(xiàn)，因此，動(dòng)畫就像是10幀/秒而不是60幀/秒的“步進(jìn)式”。

Compare to the back icon which we animated with X and Y property which GSAP translates to the transform prop. Translate animation is much smoother.

與我們使用X和Y屬性動(dòng)畫化的后退圖標(biāo)進(jìn)行比較，GSAP將其轉(zhuǎn)換為transform道具。 翻譯動(dòng)畫要流暢得多。

It took me some time, but I wrote an operation for the cursor using X and Y transform.

我花了一些時(shí)間，但是我使用X和Y transform為光標(biāo)編寫了一個(gè)操作。

It’s a dirty code, but works. I’m planning to make it up after I’ll do all that I planned to achieve.

這是一個(gè)骯臟的代碼，但是有效。 我打算完成我打算實(shí)現(xiàn)的所有任務(wù)后，再進(jìn)行彌補(bǔ)。

Here is the result before (with the left and top props) and after (with the x and y props):

這是之前 (帶有左側(cè)和頂部道具)和之后 (帶有x和y道具)的結(jié)果：

on the left — `left`,`top` props / on the right `x`,`y`在左側(cè)-“左”，“上”道具/在右側(cè)“ x”，“ y”

Also if you want more about difference betweeen transform and pos:top/left check this article that explains Translate() and absolute position movement:

另外，如果您想進(jìn)一步了解betweeen transform與pos:top/left差異，請(qǐng)查看這篇介紹Translate()和絕對(duì)位置移動(dòng)的文章：

The last day to add the final effect. I added the “Shift” effect. It was easy to do because all you need to do here is add a shadow and scale to the target element.

最后一天添加最終效果。 我添加了“ Shift”效果。 這樣做很容易，因?yàn)槟龅木褪窃谀繕?biāo)元素上添加陰影和縮放比例。

Here are some tips how you can use CSS variables, but I used c-cursor_active class to set the active CSS color.

這里有一些技巧，您可以使用CSS變量，但是我使用了c-cursor_active類來(lái)設(shè)置活動(dòng)CSS的顏色。

https://greensock.com/forums/topic/21422-how-to-animate-using-css-variables-as-target-values

https://greensock.com/forums/topic/21422-how-to-animate-using-css-variables-as-target-values

The first version looks like this:

第一個(gè)版本如下所示：

Now let’s make the effect prettier. Move the box-shadow property from the cursor to the target element to make the transitions smooth. And add a “flare” on the button that will fallow the cursor. I also added a little blur to cursor on the hover to smooth the morphing and this gave an interesting side effect — as is a lens-flare that blurs objects` edge a little.

現(xiàn)在讓效果更漂亮。 將box-shadow屬性從光標(biāo)移動(dòng)到目標(biāo)元素，以使過(guò)渡平滑。 并在按鈕上添加一個(gè)“ flare”，它將使光標(biāo)消失。 我還在懸停時(shí)在光標(biāo)上添加了一些模糊以平滑變形，這產(chǎn)生了一個(gè)有趣的副作用-鏡頭光暈使對(duì)象的邊緣稍微模糊了。

transition on the dark and light background在黑暗和明亮的背景上過(guò)渡 fast movement and the flare following the mouse cursor快速移動(dòng)和鼠標(biāo)光標(biāo)后的耀斑

In addition, I added a few adjustments — you can switch off paddings for the cursor when it hovered and switch off the parallax effect on hovering.

另外，我添加了一些調(diào)整-您可以在光標(biāo)懸停時(shí)關(guān)閉其填充，并在懸停時(shí)關(guān)閉視差效果。

{Writing this article and unsuccessful attempts to make an NPM module}

{撰寫本文，但未成功制作NPM模塊}

I wanted to upload this module as an NPM package but the adjustment for this will take too much time, so I publish it as is, and you still can copy it and use it in your projects or modify it any way you want.

我想將此模塊作為NPM軟件包上載，但是對(duì)此的調(diào)整將花費(fèi)太多時(shí)間，因此我按原樣發(fā)布，您仍然可以復(fù)制它并在項(xiàng)目中使用它，也可以根據(jù)需要進(jìn)行任何修改。

Next three days I spend to write the documentation and made the demo, and to finish this article as well :-)

接下來(lái)的三天，我將花時(shí)間編寫文檔并進(jìn)行演示，并同時(shí)完成本文:-)

In general, I achieved and tested things that I wanted and could say that it looks interesting on the web. But here is my reasons why such cursors won't be implemented as a unified pointer:

總的來(lái)說(shuō)，我實(shí)現(xiàn)并測(cè)試了我想要的東西，并且可以說(shuō)它在網(wǎng)絡(luò)上看起來(lái)很有趣。 但是，這就是為什么我不能將這些游標(biāo)實(shí)現(xiàn)為統(tǒng)一指針的原因：

The web already has their cursors, there are some many of them. The web cursor is a solid pattern. We associate the web with the arrow cursor.

網(wǎng)絡(luò)已經(jīng)有了他們的光標(biāo)，其中有很多 。 Web光標(biāo)是實(shí)心圖案。 我們將網(wǎng)絡(luò)與箭頭光標(biāo)關(guān)聯(lián)。

Using this type of cursor as a default one could be a CPU consuming task.

將這種類型的游標(biāo)用作默認(rèn)游標(biāo)可能是一項(xiàng)占用CPU的任務(wù)。

The web doesn’t need to change patterns and look. The web is a pure constructor with which you can build whatever you want — it only gives you a simple boilerplate, you can use it or you can write your own.

網(wǎng)絡(luò)不需要更改樣式和外觀。 Web是一個(gè)純粹的構(gòu)造函數(shù)，您可以用它構(gòu)建所需的任何內(nèi)容–它只為您提供一個(gè)簡(jiǎn)單的樣板，您可以使用它，也可以編寫自己的模型。

We have many different interfaces on the web — tense and opposite, with a lot of white space, controls, buttons with different functions, etc. So the implementation of such pointer will ruin UX half of them. It will force to redesign websites to make them fit for a new pattern.

我們?cè)赪eb上有許多不同的界面-緊張而相對(duì)，具有許多空白，控件，具有不同功能的按鈕等。因此，此類指針的實(shí)現(xiàn)將破壞UX中的一半。 它將迫使重新設(shè)計(jì)網(wǎng)站，使它們適應(yīng)新的模式。

But… at the same time, I do not reject that in the future we will see a new “fancy” cursor, because:

但是……同時(shí)，我不拒絕在將來(lái)我們會(huì)看到一個(gè)新的“花式”光標(biāo)，因?yàn)?#xff1a;

Our computers are getting more powerful, which means that we’ll be able to implement more complex features, without reducing efficiency.

我們的計(jì)算機(jī)變得越來(lái)越強(qiáng)大，這意味著我們將能夠?qū)崿F(xiàn)更復(fù)雜的功能，而不會(huì)降低效率。

Major, big companies that have a monopoly on the market could implement and force new features in their products. Exactly like apple did with iPad pointer. And developers will be free to choose between the old and the new.

在市場(chǎng)上具有壟斷地位的大型公司可以在其產(chǎn)品中實(shí)施并強(qiáng)制采用新功能。 就像蘋果使用iPad指針一樣。 開發(fā)人員可以在新舊之間自由選擇。

Just before I publish this article I saw a new article on codrops by Mary Lou, it calls magnetic buttons. Very similar to what I wanted to achieve here and so different solutions. Realy liked it. You can also check it and view the source code.

在我發(fā)表這篇文章之前，我看到了Mary Lou撰寫的有關(guān)codrop的新文章，它稱為磁性按鈕。 與我要在此處實(shí)現(xiàn)的目標(biāo)非常相似，因此有不同的解決方案。 Realy喜歡它。 您也可以檢查它并查看源代碼。

Another cool feature by Mary Lou and iPad pointer also has it is — non-standart hit area, a bigger hit area. Which is pretty cool when you can choose when to trigger the cursor morphing. I’ll implement it if someone asks me to include it in the code. But here are two ways how I think we can achieve it:

Mary Lou和iPad指針的另一個(gè)很酷的功能是-非標(biāo)準(zhǔn)擊中區(qū)域，更大的擊中區(qū)域。 當(dāng)您可以選擇何時(shí)觸發(fā)光標(biāo)變形時(shí)，這非常酷。 如果有人要我將其包含在代碼中，我將實(shí)現(xiàn)它 。 但是我認(rèn)為我們可以通過(guò)兩種方式實(shí)現(xiàn)這一目標(biāo)：

The cheap and simple way — just add :pseudo-element to the cursor and make it bigger. Then we track when pseudo-element cross the target element.

便宜而簡(jiǎn)單的方法-只需在光標(biāo)上添加:pseudo-element并將其增大。 然后我們跟蹤偽元素何時(shí)穿過(guò)目標(biāo)元素。

The second way — we track everything in mousemove listener and use a special collider function.

第二種方法-我們跟蹤mousemove偵聽器中的所有內(nèi)容，并使用特殊的對(duì)撞機(jī)功能。

I found an interesting bug when I started to make a demo page — the cursor is not moving during the scroll (like on the example below). The solution is very simple — just add position: fixed to the cursor.

當(dāng)我開始制作演示頁(yè)面時(shí)，我發(fā)現(xiàn)了一個(gè)有趣的錯(cuò)誤-滾動(dòng)過(guò)程中光標(biāo)沒(méi)有移動(dòng)(如以下示例所示)。 解決方案非常簡(jiǎn)單-只需添加position: fixed在光標(biāo)上。

And another fix that I made — I changed the method to get an element position. When you have scroll on your page — use el.getBoundingClientRect().top or left instead of el.offsetTop or el.offsetLeft.

我所做的另一項(xiàng)修復(fù)-我更改了獲取元素位置的方法。 在頁(yè)面上滾動(dòng)后，請(qǐng)使用el.getBoundingClientRect().top或left代替el.offsetTop或el.offsetLeft 。

DEMO PAGE 👇🏽

演示頁(yè)👇🏽

GITHUB PAGE 👇🏽

GITHUB頁(yè)面👇🏽

Thank you for reading!

感謝您的閱讀！

翻譯自: https://blog.prototypr.io/ipad-pointer-on-the-web-f3aaf48d515c

指針和指針的指針

總結(jié)

以上是生活随笔為你收集整理的指针和指针的指针_网络上的iPad指针的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。