如何围绕 3D 轴 (Y) 旋转 2D UIElement? [英] How to rotate 2D UIElement around a 3D axis (Y)?

问题描述

我有一个带有一些内容(图像、文本)的 Grid，我想在 3D 空间中围绕 y 轴旋转它 - 不知何故是动画倾斜效果.

I have a Grid with some content (image, text) and I would like to rotate it around y-axis in 3D space - somehow an animated tilt effect.

有没有像 Rotate3DTransform 这样的简单方法直接适用于 Grid?

Is there an easy way like Rotate3DTransform directly applicable to the Grid?

推荐答案

使用 Viewport3D

如果您愿意使用 3D 模型和旋转，那么这里是我尝试为您制作的示例，我尝试重现预期结果，可能不准确

if you are willing to use 3D models and rotations then here is a sample I attempted to for you, I tried to reproduce the expected result, may not be accurate

    <Viewport3D>
        <Viewport3D.Resources>
            <Style TargetType="Image">
                <Setter Property="Width"
                        Value="20" />
                <Setter Property="Margin"
                        Value="4" />
                <Setter Property="Source"
                        Value="desert.jpg" />
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect BlurRadius="4"
                                          Direction="0"
                                          ShadowDepth="0" />
                    </Setter.Value>
                </Setter>
            </Style>
        </Viewport3D.Resources>
        <Viewport3D.Camera>
            <PerspectiveCamera Position="0, 0, 4" />
        </Viewport3D.Camera>
        <Viewport2DVisual3D>
            <Viewport2DVisual3D.Transform>
                <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                        <QuaternionRotation3D x:Name="rotate"
                                              Quaternion="0, 0, 0, 0.5" />
                    </RotateTransform3D.Rotation>
                </RotateTransform3D>
            </Viewport2DVisual3D.Transform>
            <Viewport2DVisual3D.Geometry>
                <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
                                TextureCoordinates="0,0 0,1 1,1 1,0"
                                TriangleIndices="0 1 2 0 2 3" />
            </Viewport2DVisual3D.Geometry>
            <Viewport2DVisual3D.Material>
                <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />
            </Viewport2DVisual3D.Material>
            <UniformGrid Columns="3"> <!--host your content here-->
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
                <Image />
            </UniformGrid>
        </Viewport2DVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <DirectionalLight Color="#FFFFFFFF"
                                  Direction="0,0,-1" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Viewport3D.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <QuaternionAnimation Storyboard.TargetName="rotate"
                                             Storyboard.TargetProperty="Quaternion"
                                             To="-0.25, 0.25, 0.15, 0.65"
                                             Duration="0:0:10"
                                             RepeatBehavior="Forever">
                            <QuaternionAnimation.EasingFunction>
                                <ElasticEase />
                            </QuaternionAnimation.EasingFunction>
                        </QuaternionAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Viewport3D.Triggers>
    </Viewport3D>

现在您可以旋转您的模型，它是 UI 主机，当前托管带有图像图块的网格.

now you can rotate your model which is the UI host, currently hosting the grid with the image tiles.

您也可以将其转换为样式 &带有用于旋转的附加属性的 ContentControl 模板，并在您想要的地方重用它.

also you can convert same to a style & template for ContentControl with attached properties for rotation and reuse it where you want.

使用二维变换

使用法线变换实现 3D 到网格的示例

a sample for you to achieve 3D transform into grid with normal transformations

关键是将 3D 变换转换为 2D 并直接应用于网格，无需复杂的 3D 内容(此示例没有任何转换)它只是演示了一个 3D 外观的网格变换供您参考.

the key is to convert 3D transform to 2D and apply to grid directly without complex 3D stuff (this sample does not have any converstion) it simply demonstrate a 3D looking grid transformation for your reference.

    <Grid Width="100" Height="100" >
        <Grid.Background>
            <ImageBrush Opacity=".5" ImageSource="Desert.jpg"/>
        </Grid.Background>
        <Button Content="Some Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Grid.RenderTransform>
            <SkewTransform x:Name="skew" CenterX="50" CenterY="50"/>
        </Grid.RenderTransform>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="skew" Duration="0:0:25" Storyboard.TargetProperty="AngleX" From="0" To="60" RepeatBehavior="Forever">
                            <DoubleAnimation.EasingFunction>
                                <ElasticEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="skew" Duration="0:0:20" Storyboard.TargetProperty="AngleY" From="0" To="50" RepeatBehavior="Forever">
                            <DoubleAnimation.EasingFunction>
                                <ElasticEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>

这篇关于如何围绕 3D 轴 (Y) 旋转 2D UIElement?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！