Expression Blend, WPF/E and the Torus Trip

아티클
12/04/2006

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.