Wykonywanie funkcji po funkcji animacji

Question

Mam animację wyświetlania liter podobną do Typed. Tyle, że to działa w React. Pierwszy koncept to było stworzenie plugina w React. ale pomysł odpdał , gdyż główna funkcja renderująca to był callback i za bardzo nie chciał pobierać zmienionej wartości tzn. pobrał raz i tyle. Pewnie z Redux-em da się to ogarnąć, ale nie chciałem właściwie do takiej pierdoły z niego korzystać. Zaznaczę , że silnik animacji znajdował się w innej klasie.

Ogólnie problem rozwiązałem troszeczkę inaczej.

Pierw przykładowa domena:

this.animatedObject ={
    maternickiText : {
       textAnimate : 'aternicki',
       counter: 0,
       keyTo: 'text1'
     },

Zaczynamy od tego, gdy komponent jest montowany to:

componentWillMount(){
  window.setTimeout(()=>{
    this.animate(this.animatedObject.maternickiText)} , 1000);
  window.setTimeout(()=>{
    this.animate(this.animatedObject.meText)} , 2100);
  window.setTimeout(()=>{
    this.animate(this.animatedObject.speclazizationText)} , 2400);
}

A tu wyżej przedstawione animate.

animate(object){
    if (object.counter > object.textAnimate.length){
      return;
    }
    let subText = this.sliceText(object.textAnimate , object.counter);
    object.counter++;
    console.log(object.counter);
    this.changeState(subText , object.keyTo)
    window.setTimeout(()=>{this.animate(object)}, 100);
}

Chyba, tłumaczyć za bardzo nie muszę. co ten kod robi.

Zatrzymajmy się na componentMount. Zauważmy, że kod, jest użależniony od jednostki czasu. I jednych wykona się szybciej a u innych wolniej. Tak wiem, że mogę wywołować if kolejne wykonanie, tej samej metody, ale nie zawsze to będzie animate (gdyż dla dalszych elementów tego komponentu planuje inne animacje). Jednym rozwiązaniem jest użycie object.keys() bądż for of po polach obiektu a innym obiecanka?

Pytanie czy React mi na to pozwoli :D na zejście na niższy poziom (W sumie nie testowałem). Bardziej, się skłaniałbym się dla obiecanki, ale nigdy nie spotkałem się z takim czymś. Czy ktoś kiedyś spotkał z podobnym problemem i może ma jakąś dobrą praktykę na ten problem. 

btw. Wiem, że jest trik CSS-owy, ale moim przypadku nie przejdzie gdyż background to obraz.  

 

Answer 1

pomysł odpdał , gdyż główna funkcja renderująca to był callback i za bardzo nie chciał pobierać zmienionej wartości tzn. pobrał raz i tyle.

A próbowałeś zamiast callbacków promise chaining?

Comments

Nie próbowałem.