第7回：C#でトゥーインしてみる

2009.06.11

上村陽介（うえむらようすけ）
株式会社ディー・ディー・エフ
取締役兼Webグループ統括

Webプロモーションを得意とし，インタラクティブコンテンツ制作を主軸にDrupal（オープンソースCMS）によるWebアプリ構築，最近は不動産事業など展開。

　Flashでインタラクティブなモーションをつけるとき，細かい演出の入ったアニメーションはタイムラインでトゥーイン・アニメーションを作ったりします。これには，たいていライブラリ（tweenerとか）を使うことになります。Silverlight2でも同じようなライブラリがあれば有り難いですし，今回のようにFlashコンテンツをSilverlight2化する場合は，スクリプトアニメーションのロジックもFlash側から移植できれば，ラクですよね。

　ってことで調べてみると・・・。ありました「Tweenedライブラリ」。こちらは，皆様おなじみの「Pennerイージング（注：Robert Penner氏が考案した緩急のある動き：イージングのアニメーション効果を実現する関数シグネチャのこと）」が簡単（？）に実現できるというモノです。

　早速，本家にあるサンプルのソースを見ながら Tweenedの使い方を勉強です。サンプルの数が少ないので，ググってみると・・・。少なっ！検索結果が少なすぎる！頭の良いかたから使い方を教えていただこうかと思ったのに・・・。また自力ですかー。

　まずはサンプルのソースを見てみましょう。

リスト1●Page.xaml.csのコード

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input;
using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;
using System.Diagnostics; 
using Tweened;//Tweenedクラスライブラリ呼び出し
 namespace Tween_test {
  public partial class Page : UserControl
  {
    Tween tween;
    TweenDoubleDescription To4;
    TweenDoubleDescription To; 
    public Page()
    {
      InitializeComponent();
      Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    { 
//UIエレメント（rec）のX座標を2秒かけて-100から100まで移動
      To = new TweenDoubleDescription(rec, TweenableProperties.X, TweenedEquations.EaseOutElastic, 2, 100, -100); 
//UIエレメント（rec）の透明度（0～1）を2秒かけて100％に
      var To2 = new TweenDoubleDescription(rec, TweenableProperties.Opacity, TweenedEquations.Linear, 2, 1); 
//UIエレメント（rec）の色を2秒かけて#FF5246ABに変更
      var To3 = new TweenColorDescription(rec, TweenableProperties.Fill, 2, Color.FromArgb(0xff, 0x52, 0x46, 0xab)); 
//UIエレメント（rec2）のY座標を2秒かけて100まで移動
      To4 = new TweenDoubleDescription(rec2, TweenableProperties.Y, TweenedEquations.EaseOutBounce, 2, 100);

//To4のアニメーション開始を2秒後にセット
      To4.BeginTime = TimeSpan.FromSeconds(2);

//Tweenオブジェクトを生成
      tween = new Tween();
 //生成したアニメーションTo→To2→To3→To4の順にアクションするように登録
      tween.AddSequences(To, To2, To3, To4);
      startBt.Click += new RoutedEventHandler(monBouton_Click);
      reverseBt.Click += new RoutedEventHandler(reverseBt_Click);
      autoReverseBt.Click += new RoutedEventHandler(autoReverseBt_Click);
    }

    void autoReverseBt_Click(object sender, RoutedEventArgs e)
    {
      tween.AutoReverse = !tween.AutoReverse;//オートリバースの切り換え
      (sender as Button).Content = "autoReverseBt is " + tween.AutoReverse;
    } 
    void getY_Click(object sender, RoutedEventArgs e)
    {
      To.SetTweenedProperty((double)60);
    }

    void reverseBt_Click(object sender, RoutedEventArgs e)
    {
      tween.Reverse();//逆再生
    }

    void monBouton_Click(object sender, RoutedEventArgs e)
    {
      tween.Start();//To→To2→To3→To4の順に再生
    }

    private void onValueChanged(object sender, RoutedEventArgs e)
    {  //スライダーの値をアニメーション開始時間にセット
      sliderValuetxt.Text = Math.Round((sender as Slider).Value, 1).ToString();
      tween.BeginTime = TimeSpan.FromSeconds(Math.Round((sender as Slider).Value, 1));

    }
  } }

　これを読み解くこと，あれやこれやで数日間・・・。何とか使えるようになりましたー（こちら）。やっぱりPennerイージングを使うと，途端にソレらしく？なりますねー。

　Safariで見ると若干荒れて見えてしまいますが，これはMac用Silverlightプラグインのバージョンアップに期待しましょう。