3 Dシャトル効果？UWPでも使えます。

昨日、ChokCocoは3 Dシャトル効果を出しました。

これは素晴らしいことで、WPFでできるかと聞かれました。WPF 3 Dは使ったことがないので、最初の反応は“私には難しすぎる”でした。

夜に家に帰って夕食を食べ、帝国時代4、突然私は長い間お気に入りUWPがなかったことを思い出した。“私はUWPを持っていて、3 Dシャトル効果を処理することができます”という誇りがあります。

そこでアニメーション効果が生まれました

一般的に、3 Dシャトルを実装する原理は、CSSの視点を変更して遠近法を生成することです。Perspectiveはz=0 平面からの観測者の距離を指定し、3次元の位置変換を持つ要素に遠近効果を与えます。値が小さいほど、視野角が深くなります。

Perspectiveの具体的な使用法は以下のドキュメントにあります。

perspective - CSS（层叠样式表） _ MDN

UWPではPerspectiveTransform 3 Dクラスが提供されており、Depthプロパティも同様の効果を持ちます。Depthが小さいほど、視覚が深くなり、平面と交差するオブジェクトが変形します。

原理を理解したらすぐに着工する。まず、XamlでGridの大文字小文字を300にし、次にPerspectiveTransform 3 DのDepthを小さく設定します。

<Grid Height="300" Width="300">
  <Grid.Transform3D>
    <media3D:PerspectiveTransform3D Depth="2" />
  </Grid.Transform3D>
</Grid>

それからChokCocoから星の写真を取り、グリッドに入れました。

次に、CompositeTransform 3 DのRotationYを-90に設定すると、画像が歪んでしまいます。

<media3D:CompositeTransform3D RotationY="-90" />

次に、TranslateZ=“100”を設定して、画像を外側に伸ばします。

<media3D:CompositeTransform3D RotationY="-90" TranslateZ="100" />

1つの方向を指定したら、すべての方向をほぼ同じようにします。回転と翻訳、中心点を変更するだけで、静止した3 Dシャトルが完成します。

<media3D:CompositeTransform3D
  x:Name="TransformLeft"
  x:Key="TransformLeft"
  RotationY="-90"
  TranslateZ="100"
/>
<media3D:CompositeTransform3D
  x:Name="TransformUp"
  x:Key="TransformUp"
  RotationX="90"
  TranslateZ="50"
/>
<media3D:CompositeTransform3D
  x:Name="TransformRight"
  x:Key="TransformRight"
  RotationY="90"
  CenterX="300"
  TranslateZ="50"
/>
<media3D:CompositeTransform3D
  x:Name="TransformDown"
  x:Key="TransformDown"
  RotationX="-90"
  CenterY="300"
  TranslateZ="50"
/>

<Grid
  Background="{StaticResource ImageBackground}"
  Transform3D="{StaticResource TransformLeft}"
/>
<Grid
  Background="{StaticResource ImageBackground}"
  Transform3D="{StaticResource TransformUp}"
/>
<Grid
  Background="{StaticResource ImageBackground}"
  Transform3D="{StaticResource TransformRight}"
/>
<Grid
  Background="{StaticResource ImageBackground}"
  Transform3D="{StaticResource TransformDown}"
/>

次のステップは、この4枚の写真を移動することです。最も基本的なDoubleAnimation 操作を使用してTranslateZを10から200に変更します。

<Storyboard x:Name="Move" x:Key="Move" RepeatBehavior="Forever">
  <DoubleAnimation
    Storyboard.TargetName="TransformLeft"
    Storyboard.TargetProperty="TranslateZ"
    From="10"
    To="200"
    Duration="0:0:8"
  />
  <DoubleAnimation
    Storyboard.TargetName="TransformUp"
    Storyboard.TargetProperty="TranslateZ"
    From="10"
    To="200"
    Duration="0:0:8"
  />
  <DoubleAnimation
    Storyboard.TargetName="TransformRight"
    Storyboard.TargetProperty="TranslateZ"
    From="10"
    To="200"
    Duration="0:0:8"
  />
  <DoubleAnimation
    Storyboard.TargetName="TransformDown"
    Storyboard.TargetProperty="TranslateZ"
    From="10"
    To="200"
    Duration="0:0:8"
  />
</Storyboard>

基本的なアニメーションはすでに実装されていますが、端から端まで並べることはできないので、前の結果をコントロールにカプセル化します。

透明度の変化のアニメーションを追加します：

<Storyboard x:Name="Fade" RepeatBehavior="Forever">
  <DoubleAnimationUsingKeyFrames
    Storyboard.TargetName="Root"
    Storyboard.TargetProperty="Opacity"
    Duration="0:0:8"
  >
    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
    <LinearDoubleKeyFrame KeyTime="0:0:2" Value="1" />
    <LinearDoubleKeyFrame KeyTime="0:0:4.8" Value="1" />
    <LinearDoubleKeyFrame KeyTime="0:0:8" Value="0" />
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

2つのGalaxy ShuttleControlを重ね合わせ、アニメーションの開始時刻を制御することで、最初と最後のアニメーションがうまくいかない問題を隠します。

public TimeSpan Delay { get; set; }

private async void GalaxyShettleControl_Loaded(object sender, RoutedEventArgs e)
{
    await Task.Delay(Delay);
    Move.Begin();
    Fade.Begin();
}

<galaxyshuttles:GalaxyShuttleControl Delay="0:0:4" />
<galaxyshuttles:GalaxyShuttleControl/>

3 Dシャトル効果が実現しました。

最后还差一点，ChokCoco 大佬的动画里加上了 hueRotate ，让颜色一直变化。UWP 里也可以使用 HueRotationEffect 实现这点，不过它的 Angle 的值范围是 0 到 2 * Math.Pi。要实现它的动画可以试试 Windows Community Toolkit 里的 PipelineVisualFactory 和 AnimationSet，这两个工具可以用来处理很复杂的效果和动画，用在这里反而大材小用：

<media:UIElementExtensions.VisualFactory>
    <media:PipelineVisualFactory>
        <media:HueRotationEffect x:Name="HueRotationEffect" IsAnimatable="True"/>
    </media:PipelineVisualFactory>
</media:UIElementExtensions.VisualFactory>
<animations:Explicit.Animations>
    <animations:AnimationSet x:Name="HueAnimation" >
        <animations:AnimationScope>
            <animations:HueRotationEffectAnimation From="0" To="6.28318530718" Target="{Binding ElementName=HueRotationEffect}"  Repeat="Forever" Duration="0:0:28"/>
        </animations:AnimationScope>
    </animations:AnimationSet>
</animations:Explicit.Animations>

最終的な効果は次のとおりです。

好奇心を満たしたら、次のステップ（自分で画像を生成する）は遊びません。3 Dシャトルアニメーションを実現することは難しくありませんが、最も難しい部分はChokCocoビッグブラザーが提供するアイデアです。ChokCocoビッグブラザーが次回私にコピーさせてくれる他のアニメーションを期待しています。

最後に、MAIUまたはWin UI 3を使用することができるはずですが、これらの2つの技術はよりファッショナブルに聞こえますが、残念ながらまだ公式バージョンをリリースしていませんが、私はまだUWPと一緒にいます。

ソースコード：https://github.com/DinoChan/uwp_design_and_animation_lab

3 Dシャトル効果？UWPでも使えます。

延伸阅读

バージョン別の. NETサポート状況（250 7 0 7更新）

NETクロスプラットフォームネイティブライブラリの実装

Razor Pagesのウェブサイトを再構築

AOTの使用経験