Rekonstrukcja animowanego efektu ze strony Canvy (film, 4 minuty)
W najnowszym filmie na kanale Hyperplexed autor dzieli się krokami do stworzenia efektu cząsteczek na podstawie ruchu myszy. Proces zaczyna się od uproszczenia tego, co autor widzi, aby uzyskać szybki wgląd w to, co trzeba stworzyć. Wspomnienie o dodaniu nasłuchiwacza ruchu myszy pokazuje, jak kluczowe jest pozycjonowanie w tworzeniu tego efektu. Pierwszym krokiem jest umieszczenie białej kropki na ekranie, gdy kursor się porusza. Dotykają one do momentu, aż autor zdecyduje, że powinny być usunięte po krótkiej chwili. Już po mniej niż minucie osiągamy podstawową strukturę, która zostanie rozwinięta w dalszej części procesu.
Kolejnym krokiem w sugerowanej metodzie jest zastąpienie kropek gwiazdami. Autor decyduje się na użycie pięcio-punktowych gwiazd i losowe nadawanie im kolorów z wcześniej zdefiniowanej listy. Choć gwiazdy zaczynają wyglądać lepiej, autor zauważa, że potrzebują one animacji. W tym momencie pojawia się pomysł na animację gwiazd w dół oraz ich stopniowe znikanie. Mimo że przybywa postępu, autor napotyka problem z domyślnym zachowaniem gwiazd po zakończeniu animacji, które na nowo pojawiają się na ekranie.
W chwili, gdy autor zmienia podejście, zamiast próbować „przyspieszyć” czas na ich znikanie, korzysta z właściwości CSS, aby nie przywracać gwiazd do stanu początkowego. Po kilku drobnych poprawkach autor decyduje, że lepiej, aby gwiazdy miały własne, losowe animacje, co skutkuje dużą poprawą wizualną. Tym niemniej, liczba gwiazd na ekranie staje się zbyt duża, a autor zaczyna poszukiwania rozwiązania do ograniczenia tego efektu. Prowadzi go to do myśli o „throtlingu” oraz porównywaniu pozycji aktualnej myszy do miejsca, w którym pierwszy raz stworzono gwiazdę.
Gdy wizja miejsca, w którym znajduje się myszka, jest gotowa, autor przypomina sobie odpowiednią formułę do obliczenia odległości między dwoma punktami. Gdy ten element jeszcze raz zostaje wdrożony, analiza efektów na ekranie staje się bardziej przystępna. Wprowadza nowy element z lekkim wpływem „glow”, osiągając zamierzony efekt przy pomocy cienia na pudełku. Zmienia wielkość oraz stopień rozblasku, aby uzyskać odpowiedni rezultat. Na koniec wskazuje na potrzebę usunięcia „glow”, ale krótszy czas znikania graniczy z ciekawością widzów, co skłania ich do zapoznania się z finalną wersją projektu.
Na koniec autor wspomina, że każdy, kto chce zobaczyć ostateczny efekt, znajdzie link do kodu w opisie. Film zdobył już 682,312 wyświetleń i 50,537 polubień, co pokazuje rosnące zainteresowanie jego technikami. Można zauważyć, że jego fanbase rośnie w zastraszającym tempie, co nie jest zaskoczeniem, biorąc pod uwagę jakość prezentowanych materiałów i pomysły, które wdraża w swoje projekty.
Toggle timeline summary
-
Wprowadzenie do rekreacji efektu poprzez jego dekompozycję.
-
Dodawanie nasłuchiwacza ruchu myszy, aby śledzić pozycję myszy.
-
Tworzenie małej białej kropki, która podąża za myszą.
-
Wdrożenie opóźnienia, aby usunąć kropki po pojawieniu się.
-
Budowanie animowanego efektu gwiazdy w oparciu o ruchy myszy.
-
Przypisywanie losowych kolorów do gwiazd w celu uzyskania różnorodności wizualnej.
-
Animowanie gwiazd, aby poruszały się w dół i zanikały.
-
Rozwiązywanie problemu ponownego pojawiania się gwiazd po animacji.
-
Dostosowanie animacji, aby stworzyć konfigurowalny ślad gwiazdy.
-
Wprowadzenie wielu animacji dla różnorodności między gwiazdami.
-
Wdrożenie limitacji opóźnienia opartej na odległości, aby ograniczyć tworzenie gwiazd.
-
Obliczanie odległości między ruchami myszy, aby zarządzać liczbą gwiazd.
-
Użycie cieni pudełkowych, aby stworzyć świecący efekt na kropkach.
-
Skrócenie czasu zanikania dla świecących kropek.
-
Zachęcanie widzów do sprawdzenia ostatecznej wersji efektu.
Transcription
Whenever I see an effect like this one that I want to try to recreate, the first thing I might do is strip away the noise. Mentally, I try to deconstruct everything I see going on to get a quick idea of what I'm up against. Not a perfect understanding, but one that's just enough to lead me to a good starting point. In this particular case, I know I need to reference the position of the mouse, so I'm going to add a mouse move listener. Each time the mouse moves, I want to put something on the screen. At this point, it doesn't matter what, so I'm going to make a little white dot that's 1 pixel wide and 1 pixel tall. It's a dot because I called it a dot when I created it, and it knows where to be because the mouse move listener told me exactly where I should append it to the document body. Now, I don't want the dots hanging around forever, though, so next I'll need to remove them. Well, not immediately, but after a short delay. Amazingly enough, less than 1 minute in, we've already created the base structure for this entire effect. What's happening in the final version is fundamentally the same thing. It's just a matter of slowly and iteratively building our way there. For instance, next I want to make each dot a star. I'm too lazy to find a 4 point star, but that's okay, a 5.1 will do just fine. Each star should probably be a random color. So let me just pick out a few here, it doesn't really matter which ones I choose. I'll put them in a list, make a function to randomly select one, and then apply it to the star. Okay, they're looking better, but they still don't do anything, so I want to see what it looks like if we animate the stars downward a little ways, and maybe make them fade out as well. Alright, we're making some progress, but I'm noticing we have a bit of an issue. The default behavior after the animation completes is to reset back to its initial state, which means we get a bunch of stars randomly reappearing. Now if I hadn't seen this issue before, I may have tried something like shaving a few milliseconds off the timeout to try to remove the star before that happens. But since I already know a better solution, I'm going to opt to use this, uh, extremely intuitive CSS property to tell them just don't reset at all. Alright, more or less just going to tweak this animation to mimic the original, so reduce the scale, add some rotation, so on and so forth, which actually gives us a pretty decent looking trail of stars. But I'm realizing it doesn't make sense for all of the stars to have the exact same animation. I wonder what it would look like if we created a few different ones, and then randomly applied one kind of like we did with the colors. Yeah, that's a big improvement, but I'm going to throw the original up here again to make the next issue a bit more obvious. We've got too many stars. I'm wondering how they throttled theirs. Could be a distance-based throttle, could be based on a certain length of time. Why don't we start with distance and see where that gets us? The very first time a mouse move event is registered, a star will be added. If we store that position, we could then compare it to where the mouse currently is to say that until we've moved a certain distance, don't create a new star. That would, of course, require knowing how to calculate the distance between two points. Fortunately for me, I was able to recall entirely from memory the appropriate formula. Alright, I'm calling that good. Let's take a closer look at this glowy thing. I'm thinking we need to take a step outside of our distance throttle for a moment and once again append a little dot to the screen. Now, I can think of a few different ways to make these dots glow, but I think the easiest would be to just use a box shadow and then tweak the size and blur of that shadow until our glow is appropriately glowy. Oh, and I suppose we need to remove our glow, but 1500 milliseconds seems too long, so we can shorten that up a bit. If you want to see the finalized version, definitely check out my code bin linked below. Otherwise, I think I'm gonna go take a nap now.