プログラミング学習の記録 147.1 Silverlight+JavaScriptで動く円(楕円)を描いてみる。 | Kamimura's blog

2010年4月1日木曜日

プログラミング学習の記録 147.1 Silverlight+JavaScriptで動く円(楕円)を描いてみる。

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

Silverlight+JavaScriptで動く(縦長の楕円から横長の楕円に、そして枠を横長になるにつれて太くなっていく)円(楕円)を描いてみる。

Scene3.xaml

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

Sample3.html

保管場所: Sample 3

0 コメント:

コメントを投稿

コメントの投稿(Atom)