IT 2 - Animations

[Susanne.03]

Hei, jeg har en oppgave i IT2 hvor jeg skal lage en animasjon. Det jeg prøver på er å animere en dråpe som faller ned i et vann ved å flytte hvilken del av bildet som vises. Problemet er at bildet beveger seg bortover slik at jeg ser litt av flere dråper samtidig. Er det noen måte til å få animasjonen til å hoppe fra en stilling til en annen? Evt. er det en annen måte å animere det bedre på? Jeg har også prøvd å bytte ut bildene, men har ikke fått det til med animasjon 

Animasjon4 (prosjekt).html

[proghodet]

Dette er sikkert i seineste laget, og du har sikkert løst den for lenge siden, men jeg kaster gjerne hatten min inn i ringen likevel.
Jeg så dessverre ikke html-fila før jeg kikket på oppgaven, så jeg har løst den litt annerledes fra ditt forsøk.

Jeg kuttet opp bildene, slik at jeg endte opp med denne markup'en:

Spoiler

<div class="container">
  <img src="drop_01.png">
  <img src="drop_02.png">
  <img src="drop_03.png">
  <img src="drop_04.png">
  <img src="drop_05.png">
</div>

 

Litt CSS:

Spoiler

 

body {
  background-color: #222;
  margin: 0;
}

.container {
  height: 216px;
  width: 223px;
  /* Relativ posisjon på container slik at bildene posisjonerer seg relativt til dette elementet */
  position: relative;
}

img {
  position: absolute;
  top: 0;
}

img:first-of-type {
  z-index: 1;
}

 

Og til slutt, JavaScriptet som håndterer animasjonsdelen:

Spoiler

// Kjører scriptet når vinduet er lastet
window.addEventListener('DOMContentLoaded', () => {
  let container = document.querySelector('.container');
  let images = document.querySelectorAll('img');
  currentImage = 1; // holder styr på hvilket bilde vi er på

  window.setInterval((ev) => {
    moveUp(images[currentImage]);
    // passer på at vi ikke går over antall bilder, men heller looper til start
    if (currentImage + 1 == images.length) {
      currentImage = 0;
    } else {
      currentImage++;
    }
  }, 125) // Funksjonen kalles hvert 125. millisekund

  // Går igjennom alle bildene og setter lavere z-index, med mindre
  // det er bildet vi skal flytte til toppen - den får høyere z-index.
  function moveUp(el) {
    images.forEach(image => {
      if (image === el) {
        el.style.zIndex = 1;
      } else {
        image.style.zIndex = 0;
      }
    });
  }
})

 

Det finnes garantert mer elegante måter å løse det på, men det var mitt forsøk  🤷‍♂️

Edit: etter å ha kikket litt videre tror jeg hovedproblemet i din oppagve er at hvert bilde i bildefila ikke er like høye. For at det skal fungere med jevne prosenter (0, 25, 50, 75, 100) må hvert bilde være like høyt. Raskeste vei til mål er nok å bare fikse på bildefila.

Endret 2. april 2021 av proghodet