Simple Image Gallery in Dart

‹prev | My Chain | next›

Adam Smith has a very nice canvas-based image gallery written in Dart (may take a while to load) up on the githubs. I am still undecided about including SVG / canvas stuff in Dart for Hipsters, but I do think a chapter on animation is in order. I have already experimented with simple animations in Dart, this seems like a good chance to do something a little more interesting.

I start with a list of images:

var images = """
01-4_failures_to_go.png
01-add_comix_form.png
01-add_from_event.png
01-anumation.png
01-asdf_comic.png
01-back_to_funky.png
01-calendar_full_o_appointments.png
// ...
01-whoopsies.png
01-working_in_firefox.png
""";

In my main entry point, I split that string list into an array and create a queue:

main() {
  var q = new Queue.from(images.split("\n"));

  showNext(q);
}

The showNext() function can then pop the first element off the stack, wait for a period of time, and then repeat:

showNext(queue, [last_el]) {
  if (last_el != null) {
    last_el.remove();
  }

  var el = new Element.html("""<img src="images/${queue.removeFirst()}"/>""");
  document.query('#gallery').nodes.add(el);

  if (!queue.isEmpty()) {
    window.setTimeout(() {showNext(queue, last_el: el);}, 1500);
  }
}

And that is enough to get started:

Update: I had a heck of a time getting an animation transition working with this. I factored adding and removing the element out into functions that add/remove with animation:

showNext(queue, [last_el]) {
  removeEl(last_el);

  var el = new Element.html("""<img src="images/${queue.removeFirst()}"/>""");
  addEl(el);

  if (!queue.isEmpty()) {
    window.setTimeout(() {showNext(queue, last_el: el);}, 5*1000);
  }
}

The remove effect worked fine:

removeEl(el) {
  if (el == null) return;

  el.style.transition = 'opacity 1s ease-in-out';
  el.style.opacity = "0";
  window.setTimeout(() {el.remove();}, 1000);
}

I am just doing a simple "ease-in-out" (start and end slow) animation. The problem is the addEl() animation:

addEl(el) {
  el.style.position = 'absolute';
  el.style.opacity = "0";
  document.query('#gallery').nodes.add(el);

  el.style.transition = 'opacity 1s ease-in';
  el.style.opacity = "1";
}

The problem? There is no animation. Instead the element displays immediately. Since it is the newly added element, it immediately covers up the old element. After way too much fiddling, I find that a timeout, even of only a couple of milliseconds allows the transition to work:

addEl(el) {
  el.style.position = 'absolute';
  el.style.opacity = "0";
  document.query('#gallery').nodes.add(el);

  window.setTimeout(() {
    el.style.transition = 'opacity 1s ease-in';
    el.style.opacity = "1";
  }, 2);
}

I lack a good explanation for this. Perhaps it has something to do with adding nodes, but setting the style on elements.

Day #298