none
動画を再生しながら、2Dで回転させるには? RRS feed

  • 質問

  • 次のXAMLでは、動画を45度回転させて、拡大・縮小のアニメーションが実行されます。

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    	<Canvas Margin="25">
    		<MediaElement Name="MediaX" Width="300" LoadedBehavior="Play" Source="Media\Video1.wmv" >
    			<MediaElement.LayoutTransform>
    				<RotateTransform Angle="45" />
    			</MediaElement.LayoutTransform>
    			<MediaElement.Triggers>
    				<EventTrigger RoutedEvent="MediaElement.Loaded">
    					<BeginStoryboard>
    						<Storyboard RepeatBehavior="Forever" AutoReverse="True">
    							<DoubleAnimation Storyboard.TargetName="MediaX" Duration="0:0:1"
    								Storyboard.TargetProperty="Width" From="100" To="360" />
    						</Storyboard>
    					</BeginStoryboard>
    				</EventTrigger>
    			</MediaElement.Triggers>
    		</MediaElement>
    	</Canvas>
    </Page>
    

    実現したいことは、拡大・縮小ではなく、0度から360度まで回転させることです。
    Storyboard.TargetProperty="Angle"
    とすると、実行でエラーしてしまいます。
    どう書けばよいのでしょうか?
    2009年9月30日 15:02

回答

  • こんなところまで似せることができました。

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication1.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot">
    		<MediaElement Name="MediaX" Width="300" LoadedBehavior="Play" Source="Media\Video1.wmv" >
    			<MediaElement.LayoutTransform>
    				<RotateTransform x:Name="Rotate"/>
    			</MediaElement.LayoutTransform>
    			<MediaElement.Triggers>
    				<EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="MediaX">
    					<BeginStoryboard>
    						<Storyboard RepeatBehavior="Forever">
    							<DoubleAnimation BeginTime="00:00:00" Duration="0:0:1"
     Storyboard.TargetName="Rotate" Storyboard.TargetProperty="Angle" From="0" To="360">
    							</DoubleAnimation>
    						</Storyboard>
    					</BeginStoryboard>
    				</EventTrigger>
    			</MediaElement.Triggers>
    		</MediaElement>
    	</Grid>
    </Window>

    えムナウ@わんくま同盟 Microsoft MVP Visual Studio C# Since 2005/01-2009/12
    • 回答としてマーク Yo48 2009年10月1日 14:51
    2009年10月1日 7:18

すべての返信

  • ExpressionBlendでStoryboardを編集したら、普通に回りましたよ。
    ↓Blendがはき出したXAMLです。

      <Storyboard x:Key="Storyboard1">
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="mediaElement"
               Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
    2009年9月30日 17:14
  • ブレンドでやるとこうなります。 NIMSさん、一部だけではTransformGroupの部分は分かってもらえません。
    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication1.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		<Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MediaX" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="MediaX">
    			<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    		</EventTrigger>
    	</Window.Triggers>
    
    	<Grid x:Name="LayoutRoot">
    		<MediaElement Name="MediaX" Width="300" LoadedBehavior="Play" Source="Media\Video1.wmv" >
    			<MediaElement.LayoutTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</MediaElement.LayoutTransform>
    		</MediaElement>
    	</Grid>
    </Window>

    えムナウ@わんくま同盟 Microsoft MVP Visual Studio C# Since 2005/01-2009/12
    2009年10月1日 6:59
  • こんなところまで似せることができました。

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication1.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot">
    		<MediaElement Name="MediaX" Width="300" LoadedBehavior="Play" Source="Media\Video1.wmv" >
    			<MediaElement.LayoutTransform>
    				<RotateTransform x:Name="Rotate"/>
    			</MediaElement.LayoutTransform>
    			<MediaElement.Triggers>
    				<EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="MediaX">
    					<BeginStoryboard>
    						<Storyboard RepeatBehavior="Forever">
    							<DoubleAnimation BeginTime="00:00:00" Duration="0:0:1"
     Storyboard.TargetName="Rotate" Storyboard.TargetProperty="Angle" From="0" To="360">
    							</DoubleAnimation>
    						</Storyboard>
    					</BeginStoryboard>
    				</EventTrigger>
    			</MediaElement.Triggers>
    		</MediaElement>
    	</Grid>
    </Window>

    えムナウ@わんくま同盟 Microsoft MVP Visual Studio C# Since 2005/01-2009/12
    • 回答としてマーク Yo48 2009年10月1日 14:51
    2009年10月1日 7:18
  • 動きました。

    <RotateTransform x:Name="Rotate"/>

    ここに名前を付けるのがポイントだったんですね。
    ありがとうございました。
    2009年10月1日 14:51