Od razu mówię, że nie chodzi o animacje z CSS3.
Pytam o takie animacje jakie są widoczne np tutaj: https://v2.tailwindcss.com/ w sekcji głównej, oraz w sekcji niżej "World-class IDE integration.".
Domyślam się, że można to zrobić "ręcznie", tzn imperatywnie co ileś milisekund zmieniać dom z różnymi elementami, ale zastanawiam się czy są jakieś gotowe rozwiązania pod to?
To na przykład https://tweenjs.github.io/tween.js/
szatkus1 napisał(a):
To na przykład https://tweenjs.github.io/tween.js/
Ale ja bym chciał na różnych etapach renderować różne elementy DOM, a nie tylko je przesuwać.
Myślę, że jak zaczniesz to robić w CSS + JS to ogarniesz temat szybciej, dużo lepiej i będzie to zdecydowanie bardziej perspektywiczne.
To co podałeś w pierwszym linku to jakaś parodia, usilne wymyślanie dodatkowych klas, które można zastąpić jedną linijką CSS, np.:
Sztuka dla sztuki. Dziś CSS i JS są tak przejrzyste, że uczenie się czegoś analogicznego do tego co wskazałeś to zwykła strata czasu.
Ta "genialna" biblioteka za 2 lata zniknie a Ty nadal nie będziesz umiał zrobić prostej animacji.
Na tej stronie nie ma nic poza animacją CSS, która po prostu odpala się wtedy, kiedy element pokaże się na stronie.
W praktyce to jest to https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API + dodanie odpowiedniej klasy w jakimś callbacku
@katakrowa nie no, Tailwind nie zniknie tak szybko, IMO będzie się ciągnął ten smród tak długo jak bootstrap, długimi latami. Za to klony, których użyło 10 osób na świecie to znikną szybciutko. Utility classes to rak frontendu :(
katakrowa napisał(a):
Myślę, że jak zaczniesz to robić w CSS + JS to ogarniesz temat szybciej, dużo lepiej i będzie to zdecydowanie bardziej perspektywiczne.
To co podałeś w pierwszym linku to jakaś parodia, usilne wymyślanie dodatkowych klas, które można zastąpić jedną linijką CSS, np.:
- md:rounded-none rounded-full -> border-radius:50%
- text-center -> text-align:center
Sztuka dla sztuki. Dziś CSS i JS są tak przejrzyste, że uczenie się czegoś analogicznego do tego co wskazałeś to zwykła strata czasu.
Ta "genialna" biblioteka za 2 lata zniknie a Ty nadal nie będziesz umiał zrobić prostej animacji.
Widze że z nowu masz problem z wyłapywaniem sensu wypowiedzi.
Owszem, podlinkowałem stronę do dokumentacji biblioteki "tailwind" ale zupełnie nie jej dotyczy temat!!
Po prostu na tej stronie "odtwarzana" jest animacja pisania na klawiaturze, podobne animacje są też w innych dokumentacjach. Ja pytam właśnie o nie.
dzek69 napisał(a):
Na tej stronie nie ma nic poza animacją CSS, która po prostu odpala się wtedy, kiedy element pokaże się na stronie.
W praktyce to jest to https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API + dodanie odpowiedniej klasy w jakimś callbacku
No tak, spodziewam się że możnaby to samemu zakodzić.
Mi chodzi o to czy są jakieś gotowe rozwiązania do tego.
Pewnie są, nawet kojarzę, że coś takiego widziałem, ale kompletnie nie pamiętam nazwy
natomiast jeżeli strona jest statyczna, nie ma reacta i wklejania treści ajaxem to te kilka linijek załatwia temat:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
const anim = entry.target.getAttribute("data-anim");
if (entry.target.classList.contains(anim)) {
return;
}
entry.target.classList.add(anim);
})
});
[...document.querySelectorAll("[data-anim]")].forEach((item) => {
observer.observe(item)
})
Do elementów html dodajesz atrybut data-anim z nazwą klasy jaka ma być dodana w momencie, gdy element pojawi się na ekranie, a klasa ta powinna obsłużyć animację.
Demo: https://jsbin.com/rovazijuqe/2/edit?html,css,js,output
dzek69 napisał(a):
Pewnie są, nawet kojarzę, że coś takiego widziałem, ale kompletnie nie pamiętam nazwy
natomiast jeżeli strona jest statyczna, nie ma reacta i wklejania treści ajaxem to te kilka linijek załatwia temat:
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (!entry.isIntersecting) { return; } const anim = entry.target.getAttribute("data-anim"); if (entry.target.classList.contains(anim)) { return; } entry.target.classList.add(anim); }) }); [...document.querySelectorAll("[data-anim]")].forEach((item) => { observer.observe(item) })Do elementów html dodajesz atrybut
data-animz nazwą klasy jaka ma być dodana w momencie, gdy element pojawi się na ekranie, a klasa ta powinna obsłużyć animację.Demo: https://jsbin.com/rovazijuqe/2/edit?html,css,js,output
Ale Ty znowu mówisz o animacjach CSS3, jak rozumiem? "dodaj klasę która obsłuży animacje", masz na myśli klasa np z animation albo transform? Bo jeśli tak, to mnie to zupełnie nie interesuje.
I z tym IntersectionObserver też nie, bo ja nie chce jej włączać po scrollu, tylko od razu, nie ważne w jakim miejscu jest.
A no to jeszcze prościej:
https://animate.style
A swoją drogą to teraz przeczysz sam sobie trochę. Animacje w JS odrzucasz, CSS też odrzucasz, technicznie rzecz biorąc to nie da się inaczej ;)
To co podlinkowałeś to też wygląda jak animacje css'owe
No ale co z tego? Prościej się nie da. Jeżeli coś konkretnie Ci nie odpowiada to konkretnie napisz co.
dzek69 napisał(a):
To co podlinkowałeś to też wygląda jak animacje css'owe
No ale co z tego? Prościej się nie da. Jeżeli coś konkretnie Ci nie odpowiada to konkretnie napisz co.
No napisałem w pierwszym poście, że nie chce używać animacji css.
Chcialbym bibliotekę, która w JS modyfikuje DOM, tak że daje to wrażenie animowania się, ale bez css 3.
Poddaję się. Nic Ci nie pasuje, mimo, że w teorii powinno spełniać wymagania, Ty chcesz inaczej, ale Twój opis nie mówi jasno czego ty naprawdę chcesz :(
dzek69 napisał(a):
Poddaję się. Nic Ci nie pasuje, mimo, że w teorii powinno spełniać wymagania, Ty chcesz inaczej, ale Twój opis nie mówi jasno czego ty naprawdę chcesz :(
Chce bibliotekę która odtwarza animacje w JS bez użycia animacji CSS3.
No to już dostałeś tween.js, ale z mało konkretnych powodów Ci nie pasował. Z podobnych masz popmotion albo z turbozaawansowanych greensock.
Riddle napisał(a):
Od razu mówię, że nie chodzi o animacje z CSS3.
Pytam o takie animacje jakie są widoczne np tutaj: https://v2.tailwindcss.com/ w sekcji głównej, oraz w sekcji niżej "World-class IDE integration.".
Domyślam się, że można to zrobić "ręcznie", tzn imperatywnie co ileś milisekund zmieniać dom z różnymi elementami, ale zastanawiam się czy są jakieś gotowe rozwiązania pod to?
podejrzałem doma za pomocą inspektora i jeśli chodzi o tą sekcję u samej góry, tzn z:
Sarah Dayan, Staff Engineer, Algolia
to jest to zrobione właśnie za pomocą css3 :) klasy i style są dodawane i usuwane automatycznie, najprawdopodobniej z poziomu kodu jsowego. płynne przesuwanie jest zrobione za pomocą style=transform. sam dom jest statyczny, jeśli pominąć zmieniające się klasy i style.
z tego co pamiętam to samym jsem trudno będzie zrobić płynną animację. każda modyfikacja domu to ponowne przeliczenie rozmieszczenia elementów. dopiero css3 transform jest porządnie optymalizowane przez przeglądarki (citation needed :) ). wątpię więc by ktoś fatygował się i próbował robić płynne animacje samym jsem, bez użycia animacji css.
aktualizacja:
o znalazłem jakieś informacje o wydajności:
https://web.dev/animations-and-performance/#css-vs-javascript-performance
https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance
Ja korzystałem z Popmotion https://popmotion.io/
tam możesz animować po prostu wartości i sobie je podpinać później, gdzie chcesz.
ew. coś z rodziny bibliotek D3 np. d3-ease biblioteka do samych easingów:
https://www.npmjs.com/package/d3-ease
Wibowit napisał(a):
to jest to zrobione właśnie za pomocą css3 :) klasy i style są dodawane i usuwane automatycznie, najprawdopodobniej z poziomu kodu jsowego. płynne przesuwanie jest zrobione za pomocą style=transform. sam dom jest statyczny, jeśli pominąć zmieniające się klasy i style.
z tego co pamiętam to samym jsem trudno będzie zrobić płynną animację. każda modyfikacja domu to ponowne przeliczenie rozmieszczenia elementów. dopiero css3 transform jest porządnie optymalizowane przez przeglądarki (citation needed :) ). wątpię więc by ktoś fatygował się i próbował robić płynne animacje samym jsem, bez użycia animacji css.
Nie potrzebuję płynnej animacji. Jak dla mnie to może być staccato-movement.
ale jaki konkretnie problem chcesz rozwiązać? To wtedy można będzie dobrać bibliotekę pod to.
Bo niektóre biblioteki mają jedne opcje, inne ich nie mają.
"World-class IDE integration.".
Jeśli chodzi ci o to, że kursor się rusza po edytorze tekstu i otwiera się jakieś "okienko" w tym edytorze z hintami?
no to ja bym do tego podszedł tak, że zapisałbym sobie gdzieś (we własnym wymyślonym formacie, w jakiejś tablicy) poszczególne sekwencje, np. pozycję kursora, albo np. że ma się otworzyć okienko:
const steps = [
{time: 0, cursorPos: 100},
{time: 100, cursorPos: 103},
{time: 120, cursorPos: 103, action: 'openHint' },
]
a potem bym biorąc pod uwagę upływający czas, starał się ustalić, w którym miejscu tablicy jestem, i jak powinien wyglądać edytor teraz. I wtedy albo imperatywnie bym nakładał kolejne zmiany w tym edytorze albo deklaratywnie (jeśli bym korzystał np. z Reacta, to ustalałbym gdzie jestem i jak ma wyglądać wygląd "edytora" w danym momencie).
O ile faktycznie ci chodzi o tę animację z edytorem, bo nie wiem, czy dobrze zrozumiałem twoje cele.
LukeJL napisał(a):
ale jaki konkretnie problem chcesz rozwiązać? To wtedy można będzie dobrać bibliotekę pod to.
Bo niektóre biblioteki mają jedne opcje, inne ich nie mają."World-class IDE integration.".
Jeśli chodzi ci o to, że kursor się rusza po edytorze tekstu i otwiera się jakieś "okienko" w tym edytorze z hintami?
no to ja bym do tego podszedł tak, że zapisałbym sobie gdzieś (we własnym wymyślonym formacie, w jakiejś tablicy) poszczególne sekwencje, np. pozycję kursora, albo np. że ma się otworzyć okienko:
const steps = [ {time: 0, cursorPos: 100}, {time: 100, cursorPos: 103}, {time: 120, cursorPos: 103, action: 'openHint' }, ]a potem bym biorąc pod uwagę upływający czas, starał się ustalić, w którym miejscu tablicy jestem, i jak powinien wyglądać edytor teraz. I wtedy albo imperatywnie bym nakładał kolejne zmiany w tym edytorze albo deklaratywnie (jeśli bym korzystał np. z Reacta, to ustalałbym gdzie jestem i jak ma wyglądać wygląd "edytora" w danym momencie).
O ile faktycznie ci chodzi o tę animację z edytorem, bo nie wiem, czy dobrze zrozumiałem twoje cele.
No tak, napisałem w poście pierwszym że można to oklikać samemu. I dokładnie o coś takiego by mi chodziło.
Tylko pytanie mam takie, czy są jakieś gotowe rozwiązania pod to.
Riddle napisał(a):
Tylko pytanie mam takie, czy są jakieś gotowe rozwiązania pod to.
Może powiedz większy kontekst, co robisz. Czy masz jedną animację taką, czy może więcej. Czy dokładnie taką, jak na tej stronie z tym edytorkiem i kursorem, czy co innego? Jak bardzo złożone masz wymagania?
gotowe rozwiązania
IMO nie zawsze "gotowe rozwiązanie" będzie lepsze od tego, co się zrobi samemu.
LukeJL napisał(a):
gotowe rozwiązania
IMO nie zawsze "gotowe rozwiązanie" będzie lepsze od tego, co się zrobi samemu.
No wiadomo. Ale głupotą byłoby się nie zapoznać z tym co jest przed rozpoczęciem kodzenia.
Pytanie, czy twój problem jest typowy, czy jest nietypowy. Jeśli jest typowy, to bierzesz popularną bibliotekę i już. Jeśli jest nietypowy, to zwykle:
Czyli im bardziej twój problem jest typowy, tym bardziej opłaca się używać biblioteki, a im bardziej jest nietypowy, tym bardziej opłaca się zrobić własne rozwiązanie.
Swoją drogą w jaki sposób twój problem jest inny od typowych problemów, które rozwiązują biblioteki do animacji? Czego szukasz konkretnie?