(1 item) |
|
(1 item) |
|
(5 items) |
|
(1 item) |
|
(1 item) |
|
(2 items) |
|
(2 items) |
|
(4 items) |
|
(1 item) |
|
(6 items) |
|
(2 items) |
|
(4 items) |
|
(1 item) |
|
(4 items) |
|
(2 items) |
|
(1 item) |
|
(1 item) |
|
(1 item) |
|
(1 item) |
|
(1 item) |
|
(1 item) |
|
(1 item) |
|
(1 item) |
|
(2 items) |
|
(2 items) |
|
(5 items) |
|
(3 items) |
|
(1 item) |
|
(1 item) |
|
(1 item) |
|
(3 items) |
|
(1 item) |
|
(1 item) |
|
(2 items) |
|
(8 items) |
|
(2 items) |
|
(7 items) |
|
(2 items) |
|
(2 items) |
|
(1 item) |
|
(2 items) |
|
(1 item) |
|
(2 items) |
|
(4 items) |
|
(1 item) |
|
(5 items) |
|
(1 item) |
|
(3 items) |
|
(2 items) |
|
(2 items) |
|
(8 items) |
|
(7 items) |
|
(3 items) |
|
(7 items) |
|
(6 items) |
|
(1 item) |
|
(2 items) |
|
(5 items) |
|
(5 items) |
|
(7 items) |
|
(3 items) |
|
(7 items) |
|
(16 items) |
|
(10 items) |
|
(27 items) |
|
(15 items) |
|
(15 items) |
|
(13 items) |
|
(16 items) |
|
(15 items) |
Tim Sneath recently posted a link to a WPF version of a neat optical illusion. Here's the original.
I was kicking myself at the time, because I'd already written that and had it queued up to blog about it... However, maybe I can get in there first with this update.
If you've looked at the latest CTP of WPF, as released at the PDC this week, you may have noticed that animation is radically different. It's distinctly not source compatible with any animation code or markup you might have written for Beta 1.
So here is an implementation of this optical illusion that works in the PDC build of WPF:
<Viewbox
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005">
<Grid>
<Canvas Margin="30" Width="230" Height="230" Background="Gray">
<Canvas.Resources>
<ParallelTimeline x:Key="fade">
<DoubleAnimation Storyboard.TargetProperty="(Ellipse.Opacity)" From="1" To="0" Duration="0:0:0.1" AutoReverse="True" />
</ParallelTimeline>
<Style TargetType="{x:Type Ellipse}">
<Setter Property="Ellipse.Width" Value="30" />
<Setter Property="Ellipse.Height" Value="30" />
<Setter Property="Fill">
<Setter.Value>
<RadialGradientBrush Center="0.5,0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#d8f" Offset="0.3" />
<GradientStop Color="Transparent" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Canvas.Resources>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Duration="0:0:1.2" RepeatBehavior="Forever">
<Storyboard TargetName="e1" BeginTime="0:0:0.0">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e2" BeginTime="0:0:0.1">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e3" BeginTime="0:0:0.2">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e4" BeginTime="0:0:0.3">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e5" BeginTime="0:0:0.4">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e6" BeginTime="0:0:0.5">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e7" BeginTime="0:0:0.6">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e8" BeginTime="0:0:0.7">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e9" BeginTime="0:0:0.8">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e10" BeginTime="0:0:0.9">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e11" BeginTime="0:0:1.0">
<StaticResource ResourceKey="fade" />
</Storyboard>
<Storyboard TargetName="e12" BeginTime="0:0:1.1">
<StaticResource ResourceKey="fade" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Ellipse Name="e1" Canvas.Left="100" Canvas.Top="0" />
<Ellipse Name="e2" Canvas.Left="150" Canvas.Top="13.3975" />
<Ellipse Name="e3" Canvas.Left="186.6025" Canvas.Top="50" />
<Ellipse Name="e4" Canvas.Left="200" Canvas.Top="100" />
<Ellipse Name="e5" Canvas.Left="186.6025" Canvas.Top="150" />
<Ellipse Name="e6" Canvas.Left="150" Canvas.Top="186.6025" />
<Ellipse Name="e7" Canvas.Left="100" Canvas.Top="200" />
<Ellipse Name="e8" Canvas.Left="50" Canvas.Top="186.6025" />
<Ellipse Name="e9" Canvas.Left="13.3975" Canvas.Top="150" />
<Ellipse Name="e10" Canvas.Left="0" Canvas.Top="100" />
<Ellipse Name="e11" Canvas.Left="13.3975" Canvas.Top="50" />
<Ellipse Name="e12" Canvas.Left="50" Canvas.Top="13.3975" />
</Canvas>
<Canvas HorizontalAlignment="Center" VerticalAlignment="Center">
<Line Stroke="Black" X1="0" X2="6" Y1="3" Y2="3" />
<Line Stroke="Black" Y1="0" Y2="6" X1="3" X2="3" />
</Canvas>
</Grid>
</Viewbox>
Simply paste into XamlPad, make sure the window's reasonably big, and then focus very intently on the cross in the middle, taking care not to let your eyes wander at all.