[C#/WPF] DoubleAnimationUsingKeyFrames 엘리먼트 : 테이블 위 상자 움직이기

■ DoubleAnimationUsingKeyFrames 엘리먼트을 사용해 테이블 위의 상자를 움직이는 애니메이션을 만드는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="DoubleAnimationUsingKeyFrames 엘리먼트 : 테이블 위 상자 움직이기"
    Width="800"
    Height="600">
    <Window.Resources>
        <!-- 단위 큐브 : 전면, 후면, 왼쪽 면, 오른쪽 면, 위쪽 면, 아래쪽 면 -->
        <MeshGeometry3D x:Key="CubeMeshGeometry3DKey"
            Positions="-0.5  0.5  0.5,  0.5  0.5  0.5,
                       -0.5 -0.5  0.5,  0.5 -0.5  0.5,
                        0.5  0.5 -0.5, -0.5  0.5 -0.5,
                        0.5 -0.5 -0.5, -0.5 -0.5 -0.5,
                       -0.5  0.5 -0.5, -0.5  0.5  0.5,
                       -0.5 -0.5 -0.5, -0.5 -0.5  0.5,
                        0.5  0.5  0.5,  0.5  0.5 -0.5,
                        0.5 -0.5  0.5,  0.5 -0.5 -0.5,
                       -0.5  0.5 -0.5,  0.5  0.5 -0.5,
                       -0.5  0.5  0.5,  0.5  0.5  0.5,
                        0.5 -0.5 -0.5, -0.5 -0.5 -0.5,
                        0.5 -0.5  0.5, -0.5 -0.5  0.5"
            TriangleIndices=" 0  2  1,  1  2  3
                              4  6  5,  5  6  7,
                              8 10  9,  9 10 11,
                             12 14 13, 13 14 15
                             16 18 17, 17 18 19
                             20 22 21, 21 22 23" />
        <DiffuseMaterial x:Key="WoodDiffuseMaterialKey"
            Brush="BurlyWood" />
        <!-- 테이블 다리 -->
        <GeometryModel3D x:Key="TableLegGeometryModel3DKey"
            Geometry="{StaticResource CubeMeshGeometry3DKey}"
            Material="{StaticResource WoodDiffuseMaterialKey}">
            <GeometryModel3D.Transform>
                <ScaleTransform3D
                    CenterY="-1"
                    ScaleX="0.1"
                    ScaleY="2"
                    ScaleZ="0.1" />
            </GeometryModel3D.Transform>
        </GeometryModel3D>
        <!-- 테이블 -->
        <Model3DGroup x:Key="TableModel3DGroupKey">
            <Model3DGroup>
                <StaticResource ResourceKey="TableLegGeometryModel3DKey" />
                <Model3DGroup.Transform>
                    <TranslateTransform3D
                        OffsetX="-1"
                        OffsetZ="-1" />
                </Model3DGroup.Transform>
            </Model3DGroup>
            <Model3DGroup>
                <StaticResource ResourceKey="TableLegGeometryModel3DKey" />
                <Model3DGroup.Transform>
                    <TranslateTransform3D
                        OffsetX="1"
                        OffsetZ="-1" />
                </Model3DGroup.Transform>
            </Model3DGroup>
            <Model3DGroup>
                <StaticResource ResourceKey="TableLegGeometryModel3DKey" />
                <Model3DGroup.Transform>
                    <TranslateTransform3D
                        OffsetX="-1"
                        OffsetZ="1" />
                </Model3DGroup.Transform>
            </Model3DGroup>
            <Model3DGroup>
                <StaticResource ResourceKey="TableLegGeometryModel3DKey" />
                <Model3DGroup.Transform>
                    <TranslateTransform3D
                        OffsetX="1"
                        OffsetZ="1" />
                </Model3DGroup.Transform>
            </Model3DGroup>
            <GeometryModel3D
                Geometry="{StaticResource CubeMeshGeometry3DKey}"
                Material="{StaticResource WoodDiffuseMaterialKey}">
                <GeometryModel3D.Transform>
                    <Transform3DGroup>
                        <ScaleTransform3D
                            ScaleX="2.5"
                            ScaleZ="2.5"
                            ScaleY="0.1" />
                        <TranslateTransform3D OffsetY="2.05" />
                    </Transform3DGroup>
                </GeometryModel3D.Transform>
            </GeometryModel3D>
        </Model3DGroup>
    </Window.Resources>
    <Viewport3D>
        <!-- 녹색 리놀륨 바닥 -->
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D Geometry="{StaticResource CubeMeshGeometry3DKey}">
                    <GeometryModel3D.Material>
                        <DiffuseMaterial Brush="Lime" />
                    </GeometryModel3D.Material>
                </GeometryModel3D>
            </ModelVisual3D.Content>
            <ModelVisual3D.Transform>
                    <ScaleTransform3D
                        CenterY="-0.05"
                        ScaleX="6"
                        ScaleY="0.1"
                        ScaleZ="4" />
            </ModelVisual3D.Transform>
        </ModelVisual3D>
        <!-- 테이블 -->
        <ModelVisual3D Content="{StaticResource TableModel3DGroupKey}">
            <ModelVisual3D.Transform>
                <RotateTransform3D CenterX="1.05">
                    <RotateTransform3D.Rotation>
                        <AxisAngleRotation3D x:Name="tableAxisAngleRotation3D"
                            Axis="0 0 -1" />
                    </RotateTransform3D.Rotation>
                </RotateTransform3D>
            </ModelVisual3D.Transform>
        </ModelVisual3D>
        <!-- 테이블 위의 상자 -->
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D Geometry="{StaticResource CubeMeshGeometry3DKey}">
                    <GeometryModel3D.Material>
                        <DiffuseMaterial Brush="Blue" />
                    </GeometryModel3D.Material>
                    <GeometryModel3D.Transform>
                        <Transform3DGroup>
                            <ScaleTransform3D
                                ScaleX="0.5"
                                ScaleY="0.5"
                                ScaleZ="0.5" />
                            <RotateTransform3D x:Name="boxRotateTransform3D1"
                                CenterY="-0.5">
                                <RotateTransform3D.Rotation>
                                    <AxisAngleRotation3D Axis="0 0 -1" />
                                </RotateTransform3D.Rotation>
                            </RotateTransform3D>
                            <TranslateTransform3D x:Name="boxTranslateTransform3D"
                                OffsetY="2.35" />
                            <RotateTransform3D x:Name="boxRotateTransform3D2"
                                CenterX="1.05">
                                <RotateTransform3D.Rotation>
                                    <AxisAngleRotation3D Axis="0 0 -1" />
                                </RotateTransform3D.Rotation>
                            </RotateTransform3D>
                        </Transform3DGroup>
                    </GeometryModel3D.Transform>
                </GeometryModel3D>
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <!-- 조명 -->
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <Model3DGroup>
                    <AmbientLight Color="#404040" />
                    <DirectionalLight
                        Color="#c0c0c0"
                        Direction="2, -3 -1" />
                </Model3DGroup>
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <!-- 카메라 -->
        <Viewport3D.Camera>
            <PerspectiveCamera
                Position="2 4 8"
                LookDirection="-1.5 -2.25 -5"
                UpDirection="0 1 0"
                FieldOfView="45" />
        </Viewport3D.Camera>
    </Viewport3D>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.MouseDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="tableAxisAngleRotation3D"
                        Storyboard.TargetProperty="Angle">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"  />
                        <LinearDoubleKeyFrame   KeyTime="0:0:1" Value="10" />
                        <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="10" />
                        <LinearDoubleKeyFrame   KeyTime="0:0:4" Value="0"  />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="boxRotateTransform3D2"
                        Storyboard.TargetProperty="Rotation.Angle">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"  />
                        <LinearDoubleKeyFrame   KeyTime="0:0:1" Value="10" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="boxTranslateTransform3D"
                        Storyboard.TargetProperty="OffsetX">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"   />
                        <SplineDoubleKeyFrame   KeyTime="0:0:3" Value="1.25" KeySpline="0.25 0 0.6 0.2" />
                        <LinearDoubleKeyFrame   KeyTime="0:0:4" Value="1.5" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="boxRotateTransform3D1"
                        Storyboard.TargetProperty="Rotation.Angle">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"  />
                        <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="0"  />
                        <LinearDoubleKeyFrame   KeyTime="0:0:4" Value="80" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="boxTranslateTransform3D"
                        Storyboard.TargetProperty="OffsetY">
                        <DiscreteDoubleKeyFrame KeyTime="0"       Value="2.35" />
                        <DiscreteDoubleKeyFrame KeyTime="0:0:3.1" Value="2.35" />
                        <SplineDoubleKeyFrame   KeyTime="0:0:4"   Value="0.83" KeySpline="0.25 0 0.6 0.2" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="DoubleAnimationUsingKeyFrames 엘리먼트 : 테이블 위 상자 움직이기"

Width="800"

Height="600">

<Window.Resources>

<MeshGeometry3D x:Key="CubeMeshGeometry3DKey"

Positions="-0.5 0.5 0.5, 0.5 0.5 0.5,

-0.5 -0.5 0.5, 0.5 -0.5 0.5,

0.5 0.5 -0.5, -0.5 0.5 -0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

-0.5 0.5 -0.5, -0.5 0.5 0.5,

-0.5 -0.5 -0.5, -0.5 -0.5 0.5,

0.5 0.5 0.5, 0.5 0.5 -0.5,

0.5 -0.5 0.5, 0.5 -0.5 -0.5,

-0.5 0.5 -0.5, 0.5 0.5 -0.5,

-0.5 0.5 0.5, 0.5 0.5 0.5,

0.5 -0.5 -0.5, -0.5 -0.5 -0.5,

0.5 -0.5 0.5, -0.5 -0.5 0.5"

TriangleIndices=" 0 2 1, 1 2 3

4 6 5, 5 6 7,

8 10 9, 9 10 11,

12 14 13, 13 14 15

16 18 17, 17 18 19

20 22 21, 21 22 23" />

<DiffuseMaterial x:Key="WoodDiffuseMaterialKey"

Brush="BurlyWood" />

<GeometryModel3D x:Key="TableLegGeometryModel3DKey"

Geometry="{StaticResource CubeMeshGeometry3DKey}"

Material="{StaticResource WoodDiffuseMaterialKey}">

<GeometryModel3D.Transform>

<ScaleTransform3D

CenterY="-1"

ScaleX="0.1"

ScaleY="2"

ScaleZ="0.1" />

</GeometryModel3D.Transform>

</GeometryModel3D>

<Model3DGroup.Transform>

<TranslateTransform3D

OffsetX="-1"

OffsetZ="-1" />

</Model3DGroup.Transform>

</Model3DGroup>

<Model3DGroup.Transform>

<TranslateTransform3D

OffsetX="1"

OffsetZ="-1" />

</Model3DGroup.Transform>

</Model3DGroup>

<Model3DGroup.Transform>

<TranslateTransform3D

OffsetX="-1"

OffsetZ="1" />

</Model3DGroup.Transform>

</Model3DGroup>

<Model3DGroup.Transform>

<TranslateTransform3D

OffsetX="1"

OffsetZ="1" />

</Model3DGroup.Transform>

</Model3DGroup>

<GeometryModel3D

Geometry="{StaticResource CubeMeshGeometry3DKey}"

Material="{StaticResource WoodDiffuseMaterialKey}">

<GeometryModel3D.Transform>

<ScaleTransform3D

ScaleX="2.5"

ScaleZ="2.5"

ScaleY="0.1" />

</Transform3DGroup>

</GeometryModel3D.Transform>

</GeometryModel3D>

</Model3DGroup>

</Window.Resources>

<ModelVisual3D.Content>

<GeometryModel3D.Material>

</GeometryModel3D.Material>

</GeometryModel3D>

</ModelVisual3D.Content>

<ModelVisual3D.Transform>

<ScaleTransform3D

CenterY="-0.05"

ScaleX="6"

ScaleY="0.1"

ScaleZ="4" />

</ModelVisual3D.Transform>

</ModelVisual3D>

<ModelVisual3D.Transform>

<RotateTransform3D.Rotation>

<AxisAngleRotation3D x:Name="tableAxisAngleRotation3D"

Axis="0 0 -1" />

</RotateTransform3D.Rotation>

</RotateTransform3D>

</ModelVisual3D.Transform>

</ModelVisual3D>

<ModelVisual3D.Content>

<GeometryModel3D.Material>

</GeometryModel3D.Material>

<GeometryModel3D.Transform>

<ScaleTransform3D

ScaleX="0.5"

ScaleY="0.5"

ScaleZ="0.5" />

<RotateTransform3D x:Name="boxRotateTransform3D1"

CenterY="-0.5">

<RotateTransform3D.Rotation>

</RotateTransform3D.Rotation>

</RotateTransform3D>

<TranslateTransform3D x:Name="boxTranslateTransform3D"

OffsetY="2.35" />

<RotateTransform3D x:Name="boxRotateTransform3D2"

CenterX="1.05">

<RotateTransform3D.Rotation>

</RotateTransform3D.Rotation>

</RotateTransform3D>

</Transform3DGroup>

</GeometryModel3D.Transform>

</GeometryModel3D>

</ModelVisual3D.Content>

</ModelVisual3D>

<ModelVisual3D.Content>

<DirectionalLight

Color="#c0c0c0"

Direction="2, -3 -1" />

</Model3DGroup>

</ModelVisual3D.Content>

</ModelVisual3D>

<Viewport3D.Camera>

<PerspectiveCamera

Position="2 4 8"

LookDirection="-1.5 -2.25 -5"

UpDirection="0 1 0"

FieldOfView="45" />

</Viewport3D.Camera>

</Viewport3D>

<Window.Triggers>