none
スケール変換させるアニメーションにおいて、連続した動きにしたい RRS feed

  • 質問


  • ここのところ毎日こちらでお世話になっております。
    いつも有難う御座います。

    スケール変換させるアニメーションで質問がございます。

    ボタンをクリックする度に、遠くにある物体を徐々に近寄せるアニメーションを作ろうとしております。
    (最終的にはx,y,z指定で色んな位置に近寄せたり遠ざけたりしたい)

    ボタンを1回クリック→全面に移動する所までは出来ました。

    2回目のクリックすると、物体の元の位置からアニメーションがスタートしてしまいます。
    これを、元の位置からの移動ではなく、1回目の移動後の位置からスタートするにはどう記述したら良いのでしょうか?

    <Window x:Class="WpfApplication2.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="306" Width="330">
    
        <Grid>
            <Button x:Name="btn1" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top" Width="68" Click="btn1_Click">クリック</Button>
            <!--!! 
            <StackPanel Margin="20" >
                <StackPanel Orientation="Horizontal" Margin="0,30,0,0">
                    <Button x:Name="BeginButton" >クリック</Button>
                    <StackPanel.Triggers>
                        <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
                            <BeginStoryboard Name="MyBeginStoryboard">
                                <Storyboard >
                                    <DoubleAnimation
                                        Storyboard.TargetName="myTranslateTransform3D" 
                                        Storyboard.TargetProperty="ScaleX"
                                        From="1" To="3"
                                        AutoReverse="False" RepeatBehavior="1x" />
                                    <DoubleAnimation
                                        Storyboard.TargetName="myTranslateTransform3D" 
                                        Storyboard.TargetProperty="ScaleY"
                                        From="1" To="3"
                                        AutoReverse="False" RepeatBehavior="1x" />
                                    <DoubleAnimation
                                        Storyboard.TargetName="myTranslateTransform3D" 
                                        Storyboard.TargetProperty="ScaleZ"
                                        From="1" To="3"
                                        AutoReverse="False" RepeatBehavior="1x" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </StackPanel.Triggers>
                </StackPanel>
            </StackPanel>    
            -->
            
            
            <Viewport3D>
    
                <!-- ■カメラの位置や向き等の情報 -->
                <Viewport3D.Camera>
                    <PerspectiveCamera x:Name="Camera" 
                   FieldOfView="150" 
                   NearPlaneDistance="0.1" 
                   FarPlaneDistance="10" 
                   Position="-14,5,5" 
                   LookDirection="0,0,-10" 
                   UpDirection="0,10,0"/>
                </Viewport3D.Camera>
                <!--
                  FieldOfView="45" ←視野
                  NearPlaneDistance="0.1" ←描画開始位置
                  FarPlaneDistance="50" ←描画終了位置
                  Position="0,0,10" ←カメラの3D座標
                  LookDirection="0,0,-10" ←カメラの向き
                  UpDirection="0,10,0" ←カメラの上方向のベクトル
            -->
    
    
                <!-- ■3Dオブジェクト座標データ -->
                <ModelVisual3D x:Name="object3D">
                    <ModelVisual3D.Content>
                        <GeometryModel3D>
    
                            <!-- オブジェクトの情報を設定-->
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D>
                                    <!-- 三角形の形状を設定-->
                                    <MeshGeometry3D.Positions>
                                        <Point3DCollection>
                                            -2,1,0 -2,-1,0 2,-1,0
    
                                        </Point3DCollection>
                                    </MeshGeometry3D.Positions>
    
                                    <!-- 色を塗る範囲の指定-->
                                    <MeshGeometry3D.TextureCoordinates>
                                        <PointCollection>
                                            0,0 0,1 1,2
    
                                        </PointCollection>
                                    </MeshGeometry3D.TextureCoordinates>
    
                                </MeshGeometry3D>
                            </GeometryModel3D.Geometry>
    
                            <!-- オブジェクトの色を指定-->
                            <GeometryModel3D.Material>
                                <MaterialGroup>
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <SolidColorBrush Color="#C22CCC"/>
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                </MaterialGroup>
                            </GeometryModel3D.Material>
    
                            <!-- スケールサイズを指定-->
                            <GeometryModel3D.Transform>
                                <!--<ScaleTransform3D x:Name="myTranslateTransform3D" ScaleX="1" ScaleY="1" ScaleZ="1" CenterX="2" CenterY="-6" CenterZ="1" />-->
                                <ScaleTransform3D x:Name="myTranslateTransform3D" />
                            </GeometryModel3D.Transform>
    
                        </GeometryModel3D>
                    </ModelVisual3D.Content>
                </ModelVisual3D>
    
    
    
                <!-- ■ライト-->
                <ModelVisual3D x:Name="Light">
                    <ModelVisual3D.Content>
                        <DirectionalLight Color="#FFFFFF" Direction="1,-1,-1" />
                    </ModelVisual3D.Content>
                </ModelVisual3D>
    
                <!-- ■トリガー・ストーリーボードの設定 -->
               <!--  <Viewport3D.Triggers>
                    <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
                        <BeginStoryboard>
                            <Storyboard>
    
                               
                                
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Viewport3D.Triggers>
                -->
    
            </Viewport3D>
    
        </Grid>
    </Window>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media.Media3D;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    using System.Windows.Media.Animation;
    
    namespace WpfApplication2
    {
        /// <summary>
        /// Window1.xaml の相互作用ロジック
        /// </summary>
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
                
            }
    
            private int pCount = 0;
            
    
            private void btn1_Click(object sender, RoutedEventArgs e)
            {
                MoveNext();
                
            }
    
            private void MoveNext()
            {
                
                DoubleAnimation myDoubleAnimation = new DoubleAnimation();
    
                //移動座標
                switch (pCount)
                {
                    case 0:
                        
                        myDoubleAnimation.From = 1;
                        myDoubleAnimation.To = 2;  
                        myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.5));
                        myDoubleAnimation.AutoReverse = false;
    
                        myTranslateTransform3D.ScaleX = 1;
                        myTranslateTransform3D.ScaleY = 1;
                        myTranslateTransform3D.ScaleZ = 1;
                        myTranslateTransform3D.CenterX = 3;
                        myTranslateTransform3D.CenterY = -10;
                        myTranslateTransform3D.CenterZ = 1;
                        
                        break;
    
                    case 1:
                        
                        myDoubleAnimation.From = 2;
                        myDoubleAnimation.To = 4;
                        myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.5));
                        myDoubleAnimation.AutoReverse = false;
    
                        myTranslateTransform3D.ScaleX = 4;
                        myTranslateTransform3D.ScaleY = 4;
                        myTranslateTransform3D.ScaleZ = 4;
                        myTranslateTransform3D.CenterX = 6;
                        myTranslateTransform3D.CenterY = -4;
                        myTranslateTransform3D.CenterZ = 1;
                        
                        break;
    
                    case 2:
                        
                        break;
    
                    default:
    
                        
                        break;
    
                }
    
               
    
                //移動
                myTranslateTransform3D.BeginAnimation(ScaleTransform3D.ScaleXProperty, myDoubleAnimation);
                myTranslateTransform3D.BeginAnimation(ScaleTransform3D.ScaleYProperty, myDoubleAnimation);
                myTranslateTransform3D.BeginAnimation(ScaleTransform3D.ScaleZProperty, myDoubleAnimation);
                //myTranslateTransform3D.BeginAnimation(ScaleTransform3D.CenterXProperty, myDoubleAnimation);
                //myTranslateTransform3D.BeginAnimation(ScaleTransform3D.CenterYProperty, myDoubleAnimation);
                //myTranslateTransform3D.BeginAnimation(ScaleTransform3D.CenterZProperty, myDoubleAnimation);
    
                pCount += 1;
    
                
            }
    
    
        }
    }
    

     

    2010年1月20日 5:08

回答

  • 完成後のアプリケーションのイメージを勘違いしているのかもしれませんが、
    アニメーションを使用して動かしたオブジェクトをその位置から再度アニメーションで動かそうとしているのでしたら、
    case 1:にある座標情報の再設定を削除すれば良いのではないでしょうか??
    (1回目のアニメーションで既に描画位置が期待する位置に変更されているので…)

    以下をコメントアウト

    myTranslateTransform3D.ScaleX = 4;
    myTranslateTransform3D.ScaleY = 4;
    myTranslateTransform3D.ScaleZ = 4;
    myTranslateTransform3D.CenterX = 6;
    myTranslateTransform3D.CenterY = -4;
    myTranslateTransform3D.CenterZ = 1;

    質問の内容を勘違いしているのでしたら申し訳ありません。


    例えば、デバッグでcase1直後のmyTranslateTransform3D.ScaleXの値をみると、
    1回目のアニメーションで移動した後ですので、2が設定されているのがわかると思います。

    • 回答としてマーク sumi_sumi 2010年1月21日 6:21
    2010年1月20日 15:56

すべての返信

  • 完成後のアプリケーションのイメージを勘違いしているのかもしれませんが、
    アニメーションを使用して動かしたオブジェクトをその位置から再度アニメーションで動かそうとしているのでしたら、
    case 1:にある座標情報の再設定を削除すれば良いのではないでしょうか??
    (1回目のアニメーションで既に描画位置が期待する位置に変更されているので…)

    以下をコメントアウト

    myTranslateTransform3D.ScaleX = 4;
    myTranslateTransform3D.ScaleY = 4;
    myTranslateTransform3D.ScaleZ = 4;
    myTranslateTransform3D.CenterX = 6;
    myTranslateTransform3D.CenterY = -4;
    myTranslateTransform3D.CenterZ = 1;

    質問の内容を勘違いしているのでしたら申し訳ありません。


    例えば、デバッグでcase1直後のmyTranslateTransform3D.ScaleXの値をみると、
    1回目のアニメーションで移動した後ですので、2が設定されているのがわかると思います。

    • 回答としてマーク sumi_sumi 2010年1月21日 6:21
    2010年1月20日 15:56
  • えいと 様

    ご返信有難うございます。

    私の説明が下手で申し訳ありません。

    完成イメージは、「ブーメラン」のような動きの縦バージョンです。

    円を描きながら少しずつ(クリックする度)動き、最終的に元の位置に戻る。

    ブーメランは、通常横の円を描き元の位置に戻ってきますが、それの縦バージョンといった感じです。

    それを斜めからの視点で表現したいです。


    それで最初の投稿で
    「(最終的にはx,y,z指定で色んな位置に近寄せたり遠ざけたりしたい)」
    という分かりにくい表現をしてしまいました。

    しかしながら、座標情報の再設定に関する勘違いをご指摘いただきまして有難うございます。
    勉強になりました。

    また何か勘違いしてましたら、どうかご指摘ください。

    宜しくお願いいたします。

    2010年1月20日 17:21
  • 自己レスです。

    その後、調べた結果
    「スケール変換」と「平行移動」の組み合わせで実現出来そうなことが分かりました。
    今のところ2Dで実現させてみようとしております。

    元の質問に対する答えは、やはりえいと様の返信が的を得ております。

    ですので、ひとまず解決とさせていただきます。


    またどうぞ宜しくお願いいたします。


    有難う御座いました。

    2010年1月21日 6:15