プログラミング学習の記録 148.1 Silverlight+JavaScriptで赤、青、黄色の長さや太さが変化するLineを描いてみる。 | Kamimura's blog

2010年4月2日金曜日

プログラミング学習の記録 148.1 Silverlight+JavaScriptで赤、青、黄色の長さや太さが変化するLineを描いてみる。

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

Silverlight+JavaScriptで赤、青、黄色の長さや太さが変化するLineを描いてみる。

Scene6.xaml

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Line Name="line0"
    X1="20" Y1="50"
    X2="170" Y2="50"
    Stroke="Red" StrokeThickness="30">
    <Line.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="line0"
              Storyboard.TargetProperty="X2"
              From="20" To="300" Duration="0:0:5"
              RepeatBehavior="Forever"/>
            <DoubleAnimation
              Storyboard.TargetName="line0"
              Storyboard.TargetProperty="StrokeThickness"
              From="30" To="10" Duration="0:0:5"
              RepeatBehavior="Forever"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Line.Triggers>
  </Line>
  <Line Name="line1"
    X1="20" Y1="100"
    X2="110" Y2="100"
    Stroke="Blue" StrokeThickness="10">
    <Line.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="line1"
              Storyboard.TargetProperty="X2"
              From="110" To="20" Duration="0:0:5"
              RepeatBehavior="Forever"/>
            <DoubleAnimation
              Storyboard.TargetName="line1"
              Storyboard.TargetProperty="StrokeThickness"
              From="1" To="50" Duration="0:0:5"
              RepeatBehavior="Forever"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Line.Triggers>
  </Line>
  <Line Name="line2"
    X1="20" Y1="150"
    X2="210" Y2="150"
    Stroke="Yellow" StrokeThickness="20">
    <Line.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="line2"
              Storyboard.TargetProperty="X2"
              From="20" To="210" Duration="0:0:5"
              RepeatBehavior="Forever"/>
            <DoubleAnimation
              Storyboard.TargetName="line2"
              Storyboard.TargetProperty="StrokeThickness"
              From="50" To="5" Duration="0:0:5"
              RepeatBehavior="Forever"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Line.Triggers>
  </Line>

</Canvas>

Sample6.html

保管場所: Silverlight Line Animation

0 コメント:

コメントを投稿

コメントの投稿(Atom)