locked
アニメーションツールとしての使用 RRS feed

  • 質問

  • 初めて投稿させていただきます。
    Silverlightに興味がありこれから学ぼうと思っていますが、単なるWEBデザイナーでありアプリケーションの開発者/デベロッパーではありません。
    Silverlightを使ってFlashのように、いろいろなグラフィック(ビットマップ&ベクター)を使った複雑なアニメーションを簡単につくることは可能でしょうか?
    よろしくお願いいたします。
    2008年3月14日 18:59

回答

  • Angeliq さん、こんにちは。

     

    書店で立ち読みして判断してみたらいかがでしょうか。

    2008年3月15日 14:19
  • 「はじめてのSilverLight」という本をよんでますが、なかなかわかりやすく書いてあります。

    2008年3月15日 15:53
  •  

    SilverLight1.1は知りませんが、上記の本は1.0で、単なるエディタだけで作れますよ。
    2008年3月16日 1:46
  • Blend 2は、ビデオで説明した方が早いのですが、雰囲気だけを英語のビデオで見てもらうのもよいかもしれません。

    (近い将来、日本語での解説ビデオを作りたいと考えています)

    まずは、次のURLのビデオがよいかもしれません。

    http://silverlight.net/learn/learnvideo.aspx?video=130

     

    ほかにもたくさんビデオ(英語音声)は用意されています。

    http://silverlight.net/Learn/videocat.aspx?cat=3

     

    ご存知だと思いますが、ツールは、ベータ版が

    http://www.microsoft.com/expression/products/download.aspx?key=studio2beta

    から手に入ります。現時点では英語版のみなので、英語表記のメニューやヘルプです。

     

    以下、文字ベースで簡単な原理とアイディアを伝えます。

     

    >たとえばイラストの動物が動き回ってポーズをとったり、桜の花が舞って散っていくようなアニメーション等

    Silverlight 1.0でのアニメーションは、大きく2通りに分かれます。

    ・JavaScriptのコードで自力でオブジェクトの位置やプロパティを操作する

    ・XAMLのStoryboardを使って、時刻ごとの「オブジェクトの変化」を記述する

    前者は、プログラミングの世界なので、後者を行う場合は、Blend 2を使うことでタイムラインを使いながらビジュアルに制作できます。

     

    Storyboardを使ったアニメーションで行えることは、3つあります。

    ・DoubleAnimation : Double型の数値で設定できるプロパティを変化させる

    ・ColorAnimation : 色を変化させる

    ・PointAnimation : (x, y)のペアを変化させる

     

    これらのアニメーションは、時刻ごとに期待する値を記述するだけで、途中の変化については、Silverlightが計算してくれます。

     

    さて、赤い矩形があり、

    (step 1)「1秒」を使って、右下に移動します。

    (step 2)移動が完了してから、「1秒」を使って、「赤色」から「黄色」に変化します。

    (step 3)黄色に変化してから、「1秒」を使って、元の大きさの50%に縮小します。

    というアニメーションを実行しようと思います。

    以下のXAMLは、Blend 2でTimelineを使って生成したものです。XAMLの内容の詳細説明は省略しますが、"MyStory"と名前を付けたStoryboardを見ていただければと思います。

     

    例1: 単純なアニメーション

     

     

    Code Snippet
    <Canvas
     xmlns="http://schemas.microsoft.com/client/2007"
     xmlns:x="http://schemas.microsoft.com/client/2007">http://schemas.microsoft.com/client/2007"
     xmlns:x="<A< A> href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml"
     Width="640" Height="480"
     Background="White"
     x:Name="Page"
     >
     <Canvas.Resources>
      <Storyboard x:Name="MyStory">
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="93"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="96"/>
       </DoubleAnimationUsingKeyFrames>
       <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
        <SplineColorKeyFrame KeyTime="00:00:01" Value="#FFFB220E"/>
        <SplineColorKeyFrame KeyTime="00:00:02" Value="#FFFBF20E"/>
       </ColorAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.5"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.5"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
     </Canvas.Resources>
     <Rectangle Width="89" Height="68" Fill="#FFFB220E" Stroke="#FF000000" Canvas.Left="154" Canvas.Top="48" RenderTransformOrigin="0.5,0.5" x:Name="rectangle">
      <Rectangle.RenderTransform>
       <TransformGroup>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
        <SkewTransform AngleX="0" AngleY="0"/>
        <RotateTransform Angle="0"/>
        <TranslateTransform X="0" Y="0"/>
       </TransformGroup>
      </Rectangle.RenderTransform>
     </Rectangle>
    </Canvas>

     

     

    動物が動き回ってポーズを取る、とか、花びらが舞って散っていく、というものを表現する場合は、DoubleAnimationだけでも十分に対応できると思います。

     

    最初は単純なところから考えるといいでしょう。

     

    動物をどのように表現するかはさておき、動物を表現している部分をでグループ化して名前をつけます。

    仮に、

    とします。グループ化しておけば、Animalと名前をつけたCanvasを動かせば、その中のオブジェクトがすべて一緒に移動します。

    抽象的な書き方になりますが、頭・胴体・左腕・右腕・左足・右足・しっぽ、というのもその中に含められます。

     

    Code Snippet

    <Canvas x:Name="Animal"> 

      <Canvas x:Name="Head">

      </Canvas>

      <Canvas x:Name="Body">

      </Canvas>

      <Canvas x:Name="Tail">

      </Canvas>

      <Canvas x:Name="LeftArm">

      </Canvas>

      <Canvas x:Name="RightArm">

      </Canvas>

      <Canvas x:Name="LeftLeg">

      </Canvas>

      <Canvas x:Name="RightLeg">

      </Canvas>

    </Canvas> 

     

    ここからは想像してほしいのですが、さきほどのStoryboardのように、「何秒後にどの値を変化させる」ということを使えば、

    ・たとえば、5秒後にAnimalの表示位置を
      Canvas.Top = 100 から Canvas.Top = 200

      Canvas.Left = 100 から Canvas.Top = 200

    を変化させると、動物全体の位置が変わります。その移動中にも、ほかの部分(胴体・左腕・右腕・左足・右足・しっぽ)を変化させることができます。

     

    単純に変化させるだけだと、機械的な感じになってしまうので、Spline keyframeというのを使って、変化の具合を線形ではない形にできます。たとえば、Easingと呼ばれる、Blend 2のTimeline上で右クリックをすることで、KeySplineの調整ができるような機能もあります。

     

    ・・・

    Silverlight 1.0はSDKが英語のみで、皆様はご不便を感じていると思います。また実際の制作過程を紹介している日本語音声でのビデオがあるわけでものなく、興味があっても理解するきっかけがつかめないことも多いと思います。このあたり、一度に解決はできないかもしれませんが、特に私が関わっているプロジェクトなどで得られた教訓などを踏まえ、Silverlightを使ったウェブキャストとしてご紹介できればと考えています。

     

    大西 彰(マイクロソフト)

    この投稿は現状のまま何の保証もなく掲載しているものであり、何らかの権利を許諾するものでもありません。コミュニティにおけるマイクロソフト社員による発言やコメントは、マイクロソフトの正式な見解またはコメントではありません。詳しくは http://www.microsoft.com/japan/communities/msp.mspx をご覧ください。

    2008年3月21日 15:50

すべての返信

  • Angeliq さん、こんにちは。

     

    書店で立ち読みして判断してみたらいかがでしょうか。

    2008年3月15日 14:19
  • 「はじめてのSilverLight」という本をよんでますが、なかなかわかりやすく書いてあります。

    2008年3月15日 15:53
  • じゃんぬねっとさん、はなはなはなさん、どうもありがとうございます。
    自分なりに調べてはいるのですが、デベロッパー向けのツールとしてはVisual Studioが既に出ていますが、WEBデザイナー向けには現時点ではExpression Blend 2.5 Previewと呼ばれる β版 (英語)しかないようですね。
    なので、まだ情報も少なく、どこまで出来るのかがわからず困っています。
    本来ならデベロッパー向けのMSDNのフォーラムでなく、WEBデザイナー向けのところで質問すべき内容なのですが、まだまだこれからといった状況のようです。

    せめて英語が堪能なら、β版とMicrosoftのUSサイトの記事を参考にしながら手探りで進められるのですが、それもかなわず。。。。

    2008年3月15日 17:10
  •  

    SilverLight1.1は知りませんが、上記の本は1.0で、単なるエディタだけで作れますよ。
    2008年3月16日 1:46
  • 「はじめてのSilverLight」は立ち読みした程度でよく覚えていないのですが、図形を拡大したり位置を移動したりするくらいのアニメーションの初歩しか紹介されていなかったように記憶しています。
    Flashであれば入門書でも、ある程度のアニメーションをつくれるくらいの内容が紹介されていますが、
    SilverLightではかなりのスキルをつなまいとそこまで出来ないのでしょうか?
    (たとえば
    イラストの動物が動き回ってポーズをとったり、桜の花が舞って散っていくようなアニメーション等)
    2008年3月16日 13:30
  • Blend 2は、ビデオで説明した方が早いのですが、雰囲気だけを英語のビデオで見てもらうのもよいかもしれません。

    (近い将来、日本語での解説ビデオを作りたいと考えています)

    まずは、次のURLのビデオがよいかもしれません。

    http://silverlight.net/learn/learnvideo.aspx?video=130

     

    ほかにもたくさんビデオ(英語音声)は用意されています。

    http://silverlight.net/Learn/videocat.aspx?cat=3

     

    ご存知だと思いますが、ツールは、ベータ版が

    http://www.microsoft.com/expression/products/download.aspx?key=studio2beta

    から手に入ります。現時点では英語版のみなので、英語表記のメニューやヘルプです。

     

    以下、文字ベースで簡単な原理とアイディアを伝えます。

     

    >たとえばイラストの動物が動き回ってポーズをとったり、桜の花が舞って散っていくようなアニメーション等

    Silverlight 1.0でのアニメーションは、大きく2通りに分かれます。

    ・JavaScriptのコードで自力でオブジェクトの位置やプロパティを操作する

    ・XAMLのStoryboardを使って、時刻ごとの「オブジェクトの変化」を記述する

    前者は、プログラミングの世界なので、後者を行う場合は、Blend 2を使うことでタイムラインを使いながらビジュアルに制作できます。

     

    Storyboardを使ったアニメーションで行えることは、3つあります。

    ・DoubleAnimation : Double型の数値で設定できるプロパティを変化させる

    ・ColorAnimation : 色を変化させる

    ・PointAnimation : (x, y)のペアを変化させる

     

    これらのアニメーションは、時刻ごとに期待する値を記述するだけで、途中の変化については、Silverlightが計算してくれます。

     

    さて、赤い矩形があり、

    (step 1)「1秒」を使って、右下に移動します。

    (step 2)移動が完了してから、「1秒」を使って、「赤色」から「黄色」に変化します。

    (step 3)黄色に変化してから、「1秒」を使って、元の大きさの50%に縮小します。

    というアニメーションを実行しようと思います。

    以下のXAMLは、Blend 2でTimelineを使って生成したものです。XAMLの内容の詳細説明は省略しますが、"MyStory"と名前を付けたStoryboardを見ていただければと思います。

     

    例1: 単純なアニメーション

     

     

    Code Snippet
    <Canvas
     xmlns="http://schemas.microsoft.com/client/2007"
     xmlns:x="http://schemas.microsoft.com/client/2007">http://schemas.microsoft.com/client/2007"
     xmlns:x="<A< A> href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml"
     Width="640" Height="480"
     Background="White"
     x:Name="Page"
     >
     <Canvas.Resources>
      <Storyboard x:Name="MyStory">
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="93"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="96"/>
       </DoubleAnimationUsingKeyFrames>
       <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
        <SplineColorKeyFrame KeyTime="00:00:01" Value="#FFFB220E"/>
        <SplineColorKeyFrame KeyTime="00:00:02" Value="#FFFBF20E"/>
       </ColorAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.5"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.5"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
     </Canvas.Resources>
     <Rectangle Width="89" Height="68" Fill="#FFFB220E" Stroke="#FF000000" Canvas.Left="154" Canvas.Top="48" RenderTransformOrigin="0.5,0.5" x:Name="rectangle">
      <Rectangle.RenderTransform>
       <TransformGroup>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
        <SkewTransform AngleX="0" AngleY="0"/>
        <RotateTransform Angle="0"/>
        <TranslateTransform X="0" Y="0"/>
       </TransformGroup>
      </Rectangle.RenderTransform>
     </Rectangle>
    </Canvas>

     

     

    動物が動き回ってポーズを取る、とか、花びらが舞って散っていく、というものを表現する場合は、DoubleAnimationだけでも十分に対応できると思います。

     

    最初は単純なところから考えるといいでしょう。

     

    動物をどのように表現するかはさておき、動物を表現している部分をでグループ化して名前をつけます。

    仮に、

    とします。グループ化しておけば、Animalと名前をつけたCanvasを動かせば、その中のオブジェクトがすべて一緒に移動します。

    抽象的な書き方になりますが、頭・胴体・左腕・右腕・左足・右足・しっぽ、というのもその中に含められます。

     

    Code Snippet

    <Canvas x:Name="Animal"> 

      <Canvas x:Name="Head">

      </Canvas>

      <Canvas x:Name="Body">

      </Canvas>

      <Canvas x:Name="Tail">

      </Canvas>

      <Canvas x:Name="LeftArm">

      </Canvas>

      <Canvas x:Name="RightArm">

      </Canvas>

      <Canvas x:Name="LeftLeg">

      </Canvas>

      <Canvas x:Name="RightLeg">

      </Canvas>

    </Canvas> 

     

    ここからは想像してほしいのですが、さきほどのStoryboardのように、「何秒後にどの値を変化させる」ということを使えば、

    ・たとえば、5秒後にAnimalの表示位置を
      Canvas.Top = 100 から Canvas.Top = 200

      Canvas.Left = 100 から Canvas.Top = 200

    を変化させると、動物全体の位置が変わります。その移動中にも、ほかの部分(胴体・左腕・右腕・左足・右足・しっぽ)を変化させることができます。

     

    単純に変化させるだけだと、機械的な感じになってしまうので、Spline keyframeというのを使って、変化の具合を線形ではない形にできます。たとえば、Easingと呼ばれる、Blend 2のTimeline上で右クリックをすることで、KeySplineの調整ができるような機能もあります。

     

    ・・・

    Silverlight 1.0はSDKが英語のみで、皆様はご不便を感じていると思います。また実際の制作過程を紹介している日本語音声でのビデオがあるわけでものなく、興味があっても理解するきっかけがつかめないことも多いと思います。このあたり、一度に解決はできないかもしれませんが、特に私が関わっているプロジェクトなどで得られた教訓などを踏まえ、Silverlightを使ったウェブキャストとしてご紹介できればと考えています。

     

    大西 彰(マイクロソフト)

    この投稿は現状のまま何の保証もなく掲載しているものであり、何らかの権利を許諾するものでもありません。コミュニティにおけるマイクロソフト社員による発言やコメントは、マイクロソフトの正式な見解またはコメントではありません。詳しくは http://www.microsoft.com/japan/communities/msp.mspx をご覧ください。

    2008年3月21日 15:50
  • 大西さま

    詳しい説明、どうもありがとうございます。
    いろいろいじっていて単純な動きはなんとかできたのですが、
    Spline keyframeという機能があったのですね。
    大変参考になりました。

    また何かありましたら質問させていただきます。
    日本語版の解説ビデオ、楽しみにしています。
    2008年3月27日 19:06
  • 大西さま

    教えていただいたBlendの解説ビデオを何点か見てみました。
    英語がわからないなりにイメージだけはなんとかつかんだのですが、また少し質問させてください。
    Spline keyframe / easing を使った軌道の変形の他に、Motion Pathを使ってアニメーションをさせる方法があるようですね。
    ただ、New ProjectでWPF Applicationを選択した場合にはObjectメニューに「Convert
    to Motion Path」のコマンドが出るのですが、Silverlightを選択した場合にはこれがありません。
    SilverlightではMotion Pathは使えないということでしょうか?

    また、
    Spline keyframe / easing で軌道を変形するとアニメーションのテンポも一緒に変化してしまいます。
    タイムラインを使ったエフェクトなので当然なのかもしれませんが、
    テンポは一定のまま軌道だけを変形することは可能なのでしょうか?
    2008年3月28日 11:37
  • マルチポストになってしまいましたが、Expression Blendのスレッドのほうで回答をいただきましたので、とりあえず解決とさせていただきます。
    どうもありがとうございました。
    2008年4月3日 14:00
  • みなさんこんにちわ。森田 知良です。

     

    回答してくださったみなさん、有用な情報ありがとうございました。

     

    Angeliqさん、フォーラムのご利用ありがとうございます。
    回答してくださった情報は、有用な情報と判断しましたので、
    勝手ながら回答済みチェックを付けさせていただきました。

    Angeliqさんの意図しない回答にチェックが付いていた場合は、
    回答済みチェックを解除することもできますのでご確認ください。

     

    回答済みチェックが付くことにより、有用な情報を探している方が情報を見つけやすくなります。
    有効な回答があった場合は、なるべく回答済みボタンを押してチェックを付けてくださるようお願いします。

     

    また、追加の質問等ある場合は、是非もう一度投稿してくださるようお願いします。

     

    それでは、これからもフォーラムのご利用をよろしくお願いいたします。

     

    2008年4月10日 6:01