Techniques from your 2011 login dialogs

[john-cousins]

Hi, firstly - awesome library!

Secondly, you mention your 2011 'fun and frolics' and show some animated gifs of a funky login process; is it possible to share the code for those? No problem if not.

[awaescher]

Thanks a lot, John. I think I should not share the code but I can share how they were made. Actually, it's pretty simple:

The first one is just covered with a panel that was brought to front. Once the server responds the panel gets pulled over the top (Top = -1 * PanelHeight) with transition type CriticalDamping.

Transition
    .With(panelCover, nameof(Top), -1 * panelCover.Height)
    .CriticalDamp(TimeSpan.FromSeconds(1.2));

Also the red/green lights are just images on a panel which is drawn as a pressed button.
Once the server responds, the panel slides out of view with a Deceleration transition type. This same transition instance also increases the textbox width to fill the space that the panel makes.

---

The second one is pretty similar. It uses the same CriticalDamping transition as the other animation for the top cover panel. This time however it moves two top panels. One to the left (Left = -1 * PanelWidth) und one to the right (Left = Form.ClientRectangle.Width + 1)

The trick here is the placement of the image so that it looks like it's torn apart. In fact every panel has it's own full image that is placed so that 50% of the image overlaps the right side of the left panel and 50% overlaps the left side of the right panel. This way, it looks like one single image but they're two halfs. The label is using that same trick.

Transition
    .With(panelLeft, nameof(Left), -1 * panelLeft.Width)
    .With(panelRight, nameof(Left), this.ClientRectangle.Width + 1)
    .CriticalDamp(TimeSpan.FromSeconds(1.2));

I did the placement of the panels, images and the labels in code at runtime because it's easier to calculate it than designing it. Also, this way it does not worsen the forms designer experience when working with the forms.