プログラミング学習の記録 147.2 長方形のAnimationをSilverlight+JavaScriptで描いてみる。 | Kamimura's blog

2010年4月1日木曜日

プログラミング学習の記録 147.2 長方形のAnimationをSilverlight+JavaScriptで描いてみる。

開発環境:Microsoft Visual Web Developer+Internet Explorer
Script言語:JavaScript

横長の長方形から縦長の長方形に変化し、さらにその枠線が太くなるAnimationをSilverlight+JavaScriptで描いてみる。

Scene4.xaml

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle Canvas.Left="20" Canvas.Top="20"
             Height="100" Width="100"
             Stroke="Blue" Fill="Red"
             StrokeThickness="5" Name="rectangle">
    <Rectangle.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="rectangle"
              Storyboard.TargetProperty="Height"
              From="50" To="150" Duration="0:0:5"
              RepeatBehavior="Forever" />
            <DoubleAnimation
              Storyboard.TargetName="rectangle"
              Storyboard.TargetProperty="Width"
              From="150" To="50" Duration="0:0:5"
              RepeatBehavior="Forever"/>
            <DoubleAnimation
              Storyboard.TargetName="rectangle"
              Storyboard.TargetProperty="StrokeThickness"
              From="1" To="10" Duration="0:0:5"
              RepeatBehavior="Forever"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>

</Canvas>

Sample4.html

保管場所: Silverlight Sample 4

0 コメント:

コメントを投稿

コメントの投稿(Atom)