Jaa

Expression Blend, WPF/E and the Torus Trip

  • Artikkeli

So, if you haven't heard, Expression Interactive Designer has been renamed to Expression Blend and is out in beta.  Check it out!  The new UI is amazing and the power latent in this tool is ripe with possibility. 

Also, WPF/E is finally out in the wild -- give those tires a kick for sure. 

In honor of this all, here is a very simple trippy visualization I did, inspired by Blend, which turned me on to the fact that gradients have property called SpreadMethod with a very funky possible value of Stretch.  Setting this and playing with the Brush Transform tool in Blend revealed to me the RelativeTransform that hangs off brushes,  which can be animated. (I had to hand tweak some XAML to animate this transform.)  The result may be considered either zenith or nadir inducing: you make the call.  Try it here or click on the screenshot below.  XAML posted below.

<Page
 xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 >
  <Page.Resources>
    <Storyboard x:Key="OnLoaded1">
      <DoubleAnimation From="2" To=".009" AutoReverse="True" DecelerationRatio="1"  RepeatBehavior="Forever" Duration="00:00:7" Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)">
      </DoubleAnimation>
      <DoubleAnimation From="2" To=".009" AutoReverse="True"  DecelerationRatio="1" RepeatBehavior="Forever" Duration="00:00:7" Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
      </DoubleAnimation>
    </Storyboard>
  </Page.Resources>
  <Page.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
      <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
    </EventTrigger>
  </Page.Triggers>
  <Ellipse x:Name="ellipse" Stroke="#FF000000" Width="{Binding Path=ActualWidth, ElementName=LayoutRoot, Mode=Default}" Height="{Binding Path=ActualHeight, ElementName=LayoutRoot, Mode=Default}"  RenderTransformOrigin="0.5,0.5">
    <Ellipse.Fill>
      <RadialGradientBrush SpreadMethod="Repeat">
        <RadialGradientBrush.RelativeTransform>
          <ScaleTransform  x:Name="scaleTransform" CenterX="0.5" CenterY="0.5" ScaleX="2" ScaleY="2"/>
        </RadialGradientBrush.RelativeTransform>
        <GradientStop Color="#FFFFFFFF" Offset="0.865"/>
        <GradientStop Color="#FF000000" Offset="1"/>
        <GradientStop Color="#FF000000" Offset="0.654"/>
        <GradientStop Color="#FFD0D0D0" Offset="0.058"/>
      </RadialGradientBrush>
    </Ellipse.Fill>
    <Ellipse.RenderTransform>
      <ScaleTransform ScaleX="2" ScaleY="2"/>
    </Ellipse.RenderTransform>
  </Ellipse>
</Page>

Comments

  • Anonymous
    December 05, 2006
    Cool animation!  Might be fun to play with the Gradient Options Pad, Reflect, and Repeat with this.

  • Anonymous
    December 05, 2006
    oops, I see it in there now as SpreadMethod="Repeat".  Changing this to Reflect in XAMLPad or XAML Cruncher also results in visually interesting animation.  Fun stuff.