IanG on Tap

Ian Griffiths in Weblog Form (RSS 2.0)

Blog Navigation

April (2018)

(1 item)

August (2014)

(1 item)

July (2014)

(5 items)

April (2014)

(1 item)

March (2014)

(1 item)

January (2014)

(2 items)

November (2013)

(2 items)

July (2013)

(4 items)

April (2013)

(1 item)

February (2013)

(6 items)

September (2011)

(2 items)

November (2010)

(4 items)

September (2010)

(1 item)

August (2010)

(4 items)

July (2010)

(2 items)

September (2009)

(1 item)

June (2009)

(1 item)

April (2009)

(1 item)

November (2008)

(1 item)

October (2008)

(1 item)

September (2008)

(1 item)

July (2008)

(1 item)

June (2008)

(1 item)

May (2008)

(2 items)

April (2008)

(2 items)

March (2008)

(5 items)

January (2008)

(3 items)

December (2007)

(1 item)

November (2007)

(1 item)

October (2007)

(1 item)

September (2007)

(3 items)

August (2007)

(1 item)

July (2007)

(1 item)

June (2007)

(2 items)

May (2007)

(8 items)

April (2007)

(2 items)

March (2007)

(7 items)

February (2007)

(2 items)

January (2007)

(2 items)

November (2006)

(1 item)

October (2006)

(2 items)

September (2006)

(1 item)

June (2006)

(2 items)

May (2006)

(4 items)

April (2006)

(1 item)

March (2006)

(5 items)

January (2006)

(1 item)

December (2005)

(3 items)

November (2005)

(2 items)

October (2005)

(2 items)

September (2005)

(8 items)

August (2005)

(7 items)

June (2005)

(3 items)

May (2005)

(7 items)

April (2005)

(6 items)

March (2005)

(1 item)

February (2005)

(2 items)

January (2005)

(5 items)

December (2004)

(5 items)

November (2004)

(7 items)

October (2004)

(3 items)

September (2004)

(7 items)

August (2004)

(16 items)

July (2004)

(10 items)

June (2004)

(27 items)

May (2004)

(15 items)

April (2004)

(15 items)

March (2004)

(13 items)

February (2004)

(16 items)

January (2004)

(15 items)

Blog Home

RSS 2.0

Writing

Programming C# 5.0

Programming WPF

Other Sites

Interact Software

Fun WPF Animation

Friday 16 September, 2005, 02:47 AM

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.

Copyright © 2002-2018, Interact Software Ltd. Content by Ian Griffiths. Please direct all Web site inquiries to webmaster@interact-sw.co.uk