Multi-Transition Dart

‹prev | My Chain | next›

Today I continue to play with last night's images gallery. I hope to combine a few more animations together, if for no other reason than to see how easy it is in Dart. But first...

I keep coming across the #resource directive in the dart language spec. The spec states that they are used to "include extralinguistic resources (e.g., audio, video or graphics files)", which seems like they might be useful for an image gallery.

So I add some #resource directives to my main.dart file:

#library('image gallery');

#resource('images/01-4_failures_to_go.png');
#resource('images/01-add_comix_form.png');
#resource('images/01-add_from_event.png');
#resource('images/01-anumation.png');
#resource('images/01-asdf_comic.png');
#import('dart:html');

main() {
  // ...
}

When I load my gallery however, I find:

Internal error: 'file:///home/cstrom/repos/dart-gallery/scripts/main.dart': Error: line 3 pos 10: Unrecognized library token
#resource('images/01-4_failures_to_go.png');

I try fiddling with the order a bit, but it seems pretty clear that, even though #resource() is in the spec, it it not yet implemented in Dartium.

Back to my regularly scheduled programming then...

The current gallery combines two animations as it moves through the list of images in the gallery. The two animations are mirrors of each other with the new image fading in while the old one fades out:

Tonight I am going to change the remove animation to shift the image to the right and behind the main image, making it smaller as it goes. I think this ought to be easy, but "ought" is usually the bane of my learning. And by bane, I mean it usually goes wildly wrong and I end up learning something.

The simple version of the remove element animation is:

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

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

I try to convert this to a reusable function:

animateEl(el, property, end) {
  el.style.transition = '$property 1s ease-in-out';
  el.style[property] = end
}

But that does not work for two reasons. First, the style property of a Dart element does not support a [] operator. Second, I am overwriting the transition property each time I use this function.

Instead I end up using the "all" property, eventually settling on the following for my animation:

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

  el.style.position = 'absolute';
  el.style.transition = 'all 2s ease-out';

  el.style.left = '550px';
  el.style.height = '150px';
  el.style.width = '250px';
  el.style.opacity = '0.5';

  window.setTimeout(() {
    el.remove();
  }, 7*1000);
}

Which does the trick:

Hrm.. I think I can turn this into a carousel. With controls and everything. Sounds like a project for tomorrow.

Day #299