WPF3D立方体图形展开动画思路

WPF3D立方体图形展开动画

效果图:

规定：

立方体中心为（000），棱长为2，则（111）（-1-1-1）等1，-1三维组合的八个点为其顶点

坐标系：

补充：

WPF 3D 分为中心对称旋转（RotateTransform3D），平移旋转（TranslateTransform3D）和比例缩减（ScaleTransform3D），立体图形展开目前只用到对称和平移变换

1 按轴旋转的面

如图所示，则其是按照由（-1-1-1）到（1-1-1）的轴运动

换算成中心对称，也就是这条边的中点，则对称点为（0，-1，-1）

此动画可描述为，对点（0，-1，-1）做中心对称变换，沿X轴旋转90度。

Code:

			//设置对称中心
	    face0RotateTransform3D.CenterX = 0;
            face0RotateTransform3D.CenterY = -1;
            face0RotateTransform3D.CenterZ = -1;
			//设置旋转角度
            (face0RotateTransform3D.Rotation as AxisAngleRotation3D).Axis = new Vector3D(1, 0, 0);
            DoubleAnimation face0AxisAngleRotation3DAnimation = new DoubleAnimation();
            face0AxisAngleRotation3DAnimation.From = 0;
            face0AxisAngleRotation3DAnimation.To = -90;
            face0AxisAngleRotation3DAnimation.Duration = new Duration(TimeSpan.FromSeconds(keyFrameAnimationTotalTimeM));

同理可得另一个面：对点（1，-1，-1）做中心对称变换，沿Z轴旋转90度。

Code：

 	    face3RotateTransform3D.CenterX = 1;
            face3RotateTransform3D.CenterY = -1;
            face3RotateTransform3D.CenterZ = -1;
            (face3RotateTransform3D.Rotation as AxisAngleRotation3D).Axis = new Vector3D(0, 0, 1);
            DoubleAnimation DoubleAnimation = new DoubleAnimation();
            DoubleAnimation.From = 0;
            DoubleAnimation.To = -90;

2 连接按轴旋转的面的面

即二级旋转面

此时，我们可以把它理解为两个旋转的结合，一个轴对称旋转+一个平移旋转

1 轴对称旋转：

描述为，对点(11-1)进行旋转，沿Z轴旋转180度。

Code：

            face4RotateTransform3D.CenterX = 1;
            face4RotateTransform3D.CenterY = 1;
            face4RotateTransform3D.CenterZ = -1;
            (face4RotateTransform3D.Rotation as AxisAngleRotation3D).Axis = new Vector3D(0, 0, 1);
            DoubleAnimation DoubleAnimation = new DoubleAnimation();
            DoubleAnimation.From = 0;
            DoubleAnimation.To = -180;

2 平移旋转：

从侧面看的平移轨迹：

此平移按X和Y轴方向分解示意图：

其中X方向可以描述为：

在t时间内，L为边长

x方向值为：x=L*Sin(a)

y方向值为：y=L*Cos(a)

其中角度a可描述为：(PI/2)*currentTime/totalAnimationDuration

如果我们将动画描述成帧动画，综上：

X方向平移动画帧

 LinearDoubleKeyFrame GetFace4OffsetXKeyFrame(double time)
        {
            return new LinearDoubleKeyFrame(borderLength * Math.Sin(time * (Math.PI / 2) / keyFrameAnimationTotalTimeM), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(time)));
        }

Y方向平移动画帧

  LinearDoubleKeyFrame GetFace4OffsetYKeyFrame(double time)
        {
            return new LinearDoubleKeyFrame(-(borderLength - borderLength * Math.Cos(time * (Math.PI / 2) / keyFrameAnimationTotalTimeM)), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(time)));
        }

3 三级旋转面

同理，我们可以把它理解为两个旋转的结合，一个轴对称旋转+一个平移旋转

轴对称旋转：

描述为，对点(-110)进行旋转，沿Z轴旋转270度。

Code：

            face1RotateTransform3D.CenterX = -1;
            face1RotateTransform3D.CenterY = 1;
            face1RotateTransform3D.CenterZ = 0;
            (face1RotateTransform3D.Rotation as AxisAngleRotation3D).Axis = new Vector3D(0, 0, 1);
            DoubleAnimation DoubleAnimation = new DoubleAnimation();
            DoubleAnimation.From = 0;
            DoubleAnimation.To = -270;
            DoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(keyFrameAnimationTotalTimeM));

平移旋转：

平移旋转的量需要通过分解轴旋转来得出。

通过观察我们可以将其分为两个轴旋转，第一个旋转是该面沿着A轴的轴对称旋转（自身旋转），第二个是二级面的沿着B轴的轴对称旋转（相对面旋转）

A棱边沿着A·轨迹旋转，B棱边沿着B·轨迹旋转

则沿着B轴的旋转，与二级面分解一样：

A轴旋转分解:

对于y，y=Sin(a2)

对于x，分为两种情况：

当a2处于0-PI/2时，x=Cos(a2)，

当a2处于PI/2-PI时，y=L-Cos(a2)

把上述两个分解加一起就得到了X=xa+xb，y=ya+yb，

Code：

X

 LinearDoubleKeyFrame GetFace1OffsetXKeyFrame(double time)
        {
            //自身边的定位坐标
            double angle = time / keyFrameAnimationTotalTimeM;
            double xa, xb;
            double xTotal;
            if (angle <= 1 / 2)
            {
                //0-1/2PI
                xa = borderLength * Math.Cos(Math.PI * time / keyFrameAnimationTotalTimeM);
            }
            else
            {
                //1/2PI-PI
                xa = borderLength - borderLength * Math.Cos(Math.PI * time / keyFrameAnimationTotalTimeM);
            }
            //前轴定位坐标
            xb = borderLength * Math.Sin((Math.PI / 2) * time / keyFrameAnimationTotalTimeM);
            xTotal = xa + xb;
            return new LinearDoubleKeyFrame(xTotal, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(time)));
        }

Y

 Timeline Face1ExpandedAnimation_MoveOffsetY_UsingKeyFrames()
        {
            DoubleAnimationUsingKeyFrames DoubleAnimation = new DoubleAnimationUsingKeyFrames();
            DoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(keyFrameAnimationTotalTimeM));
            DoubleAnimation.Completed += ((sender, e) =>
            {
                faceStoryboard.Remove(tileButton);
            });
            Storyboard.SetTargetName(DoubleAnimation, "face1TranslateTransform3D");
            Storyboard.SetTargetProperty(DoubleAnimation,
                new PropertyPath(TranslateTransform3D.OffsetYProperty));

            for (double i = 0; i <= keyFrameAnimationTotalTimeM + keyFrameAnimationIntervalM; i += keyFrameAnimationIntervalM)
            {
                DoubleAnimation.KeyFrames.Add(GetFace1OffsetYKeyFrame(i));
            }
            return DoubleAnimation;
        }C

4 双重轴对称旋转+平移旋转面

如图所示，左边这个橙色的面，在黑色的三级旋转面之上又增加一个沿着Z轴的旋转。

此时可以简单地分解为三级旋转面的旋转+沿着Z轴的旋转。

三级旋转面的旋转：

见上文

Z轴旋转

可描述为：对点(-1-11)进行旋转，沿Z轴旋转90度。

            face5RotateTransform3D.CenterX = -1;
            face5RotateTransform3D.CenterY = -1;
            face5RotateTransform3D.CenterZ = 1;
            (face5RotateTransform3D.Rotation as AxisAngleRotation3D).Axis = new Vector3D(0, 1, 0);
            DoubleAnimation DoubleAnimation = new DoubleAnimation();
            DoubleAnimation.From = 0;
            DoubleAnimation.To = -90;
            DoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(keyFrameAnimationTotalTimeM));