WPFでアニメーション
WPFでアニメーションをやってみたー
基本、初音ミク(はちゅねミク)がネギを振り回すだけだけど...
WPFでアニメーションを行うには、VisualTarget.Renderingなどで自分で描画する以外にStoryboardを使う方法があるので、今回はStoryboardを使ってみるー
いろいろ実験してみた結果、DoubleAnimationかDoubleAnimationUsingKeyFramesが使いやすい気がする。
では最初に、DoubleAnimation。
カメラを回してみる。
<Viewport3D.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="cameraRotation" Storyboard.TargetProperty="Angle" Duration="0:0:10" From="0" To="360" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Viewport3D.Triggers>
回転にかかる時間を指定するには、Duration属性を追加するだけ。
次に、DoubleAnimationUsingKeyFrames。初音ミクにネギを振り回させてみる。
DoubleAnimationUsingKeyFramesは名前の通り、時間軸上にKeyFrameを追加してアニメーションを作成していく感じ。
下のXAMLは、DoubleAnimationUsingKeyFramesにLinearDoubleKeyFrameを追加してるけど、他にもSplineDoubleKeyFrameとかもあるよ。
<Viewport3D.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard> <Storyboard Duration="Forever" FillBehavior="HoldEnd" BeginTime="0:0:0"> <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0" Storyboard.TargetName="modelMikuRightArm" Storyboard.TargetProperty="(Model3DGroup.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"> <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" /> <LinearDoubleKeyFrame KeyTime="0:0:0.25" Value="100" /> <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="0" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0" Storyboard.TargetName="modelMikuRightArm" Storyboard.TargetProperty="(Model3DGroup.Transform).(Transform3DGroup.Children)[3].(TranslateTransform3D.OffsetY)"> <LinearDoubleKeyFrame KeyTime="0:0:0" Value="26.616" /> <LinearDoubleKeyFrame KeyTime="0:0:0.25" Value="22" /> <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="26.61" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Viewport3D.Triggers>