Aplikacja/Animacja relaksujący oddech

Aplikacja/Animacja relaksujący oddech
NC
  • Rejestracja:około 5 lat
  • Ostatnio:ponad rok
  • Postów:21
0

Cześć

Chcialbym napisać aplikację/animację w której jest animowany okrąg który się powiększa i pomniejsza, ale któremu można poprzez interfejs nadać czas przez jaki ma się pwiększać, pauzować, kurczyć i pauzować i od nowa. Można by jeszcze dodawać czas przez jaki to ma działać.
Taka aplikacja pomocna do medytacji z oddechem.
Zrobienie tego w html i css to nie problem, ale w js z interfejsem już tak, czy może potrzebny do tego React, bo jeszcze go nie ogarniałem.
Mam problem z zrobieniem funkcjonalnego interfejsu.
Będę wdzięczny za jakieś podpowiedzi.

Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:2 dni
  • Postów:847
1

Do prostej animacji można też wykorzystać @keyframes z CSS

https://codepen.io/ruslan_khomiak/embed/ObooMV?default-tab=&theme-id= (znalazłem taki przykład online, tylko trzeba z niego skasować przedrostki -webkit-, bo w nowszych przeglądarkach nie są potrzebne)

Kopiuj
<div class="circle"></div>
Kopiuj
.circle {
  background: green;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  animation: pulsing 2s infinite;
}

@keyframes pulsing {
  0% {
    transform: scale(0.5, 0.5)
  }
  50% {
    transform: scale(1.0, 1.0);
  }
  100% {
    transform: scale(0.5, 0.5);
  }
}

i połączyć to z CSS variables (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

NC
W ten sposób umiem, ale chciałbym sterować skurczem i rozszeżeniem tej kuli
Xarviel
Pominąłeś drugą część mojej wypowiedzi, która właśnie pozwala "sterować" wszystkimi stylami. Wystarczy połączyć CSS Variables z prostym formularzem.
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 19 godzin
  • Lokalizacja:Laska, z Polski
  • Postów:10086
0

A nie chcesz tego zrobić w CSS... czemu?

NC
  • Rejestracja:około 5 lat
  • Ostatnio:ponad rok
  • Postów:21
0

Może być i w css ale do interfejsu już chyba musi być js żeby można było ustawiać poszczególne czasy przerw, skurczów i rozkurczów?

NC
  • Rejestracja:około 5 lat
  • Ostatnio:ponad rok
  • Postów:21
0

Nadal pozostaje podstawowy problem, jak sterować czasami poszczególnych etapów wdechem, przerwą, wydechem i przerwą ponieważ ustawia sie jeden ogólny czas całej animacji a nie jej etapów

RJ
  • Rejestracja:prawie 3 lata
  • Ostatnio:około 11 godzin
  • Postów:436
0
NocnyCzeslaw napisał(a):

Nadal pozostaje podstawowy problem, jak sterować czasami poszczególnych etapów wdechem, przerwą, wydechem i przerwą ponieważ ustawia sie jeden ogólny czas całej animacji a nie jej etapów

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Problem ciekawy.
Może taki cud css'owy Ci pomoże osiągnąć cel 🙂

Ewentualnie - zostaje Ci animowanie elementów za pomocą JavaScriptu, np. biblioteka anime.js wygląda ciekawie.

edytowany 1x, ostatnio: Riddle
Xarviel
Funkcje attr można stosować praktycznie jedynie z właściwością content (+ background-color, ale znajduje się to jeszcze w wersji eksperymentalnej)
RJ
Głośno myślałem, ale też tak jak widzę to zostaje tylko JavaScript 🙂
Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:2 dni
  • Postów:847
1
NocnyCzeslaw napisał(a):

Nadal pozostaje podstawowy problem, jak sterować czasami poszczególnych etapów wdechem, przerwą, wydechem i przerwą ponieważ ustawia sie jeden ogólny czas całej animacji a nie jej etapów

Jeśli wykorzystałeś te podejście z @keyframes, o którym wspomniałem to możesz do jednego elementu przypisać kilka animacji

Kopiuj
<form>
   <label for="changeColor">Ustal czas pierwszej animacji</label>
   <input type="number" name="changeColor" step="1" min="0" max="20" value="2">

   <label for="moveX">Ustal czas drugiej animacji</label>
   <input type="number" name="moveX" step="1" min="0" max="20" value="10">


   <label for="width">Ustal szerokość elementu</label>
   <input type="number" name="width" step="1" min="1" max="100" value="60">
   
   <label for="height">Ustal wysokość elementu</label>
   <input type="number" name="height" step="1" min="1" max="100" value="60">


   <button>Zapisz zmiany</button>
</form>

<div class="element"></div>
Kopiuj
@keyframes changeColor {
  0%, 100% {
    background: red;
  }
  
  50% {
    background: blue;
  }
}

@keyframes moveX {
  0%, 100% {
    transform: translateX(0);
  }
  
  50% {
    transform: translateX(100px);
  }
}

.element {
  width: 60px;
  height: 60px;
  animation: changeColor 4s infinite, moveX 10s infinite;
  background: blue;
}
Kopiuj
document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('form');
  const element = document.querySelector('.element');

  form.addEventListener('submit', (e) => {
    e.preventDefault();

    const moveXTime = parseInt(form.elements['moveX'].value, 10);
    const changeColorTime = parseInt(form.elements['changeColor'].value, 10);
    
    const width = parseInt(form.elements['width'].value, 10);
    const height = parseInt(form.elements['height'].value, 10);

    if (moveXTime >= 0 && changeColorTime >= 0) {
        element.style.setProperty('animation', `changeColor ${changeColorTime}s infinite, moveX ${moveXTime}s infinite`);
    }

    if (width >= 1) {
        element.style.setProperty('width', `${width}px`);
    }

    if (height >= 1) {
        element.style.setProperty('height', `${height}px`);
    }
  });
})

W moim przykładzie jest to mały kwadracik, który przesuwa się od lewej do prawej, oraz zmienia kolor z czerwonego na niebieski

Zrzut ekranu z 2023-01-06 21-58-28.png

edytowany 12x, ostatnio: Xarviel
Zobacz pozostałe 3 komentarze
NC
a mógł byś dorzucić css jeszcze, kiepski jestem w odgadywaniu co autor miał na myśli i coś chyba mi nie wychodzi
Xarviel
kiepski jestem w odgadywaniu co autor miał na myśli W takim razie bardzo słabo, bo to dość ważna umiejętność. Zwłaszcza, że nie potrafisz dokładnie określić z czym masz problem :(
NC
to może inaczej nie umiem uzyskać pożądanego celu, z tym co podałeś
RJ
Ja sprawdziłem i działa. Kwestia nadania wymiarów do diva i animation infinite i git majonez. Ładne rozwiązanie Xarviel
NC
rozwiązanie ładne ale nie uzyskałem zamierzonego efektu

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.