【发布时间】：2015-11-11 04:40:43
【问题描述】：
这里的代码示例：
import QtQuick 2.0
Item {
width: 200; height: 200
Rectangle {
width: 100; height: 100
anchors.centerIn: parent
color: "#00FF00"
Rectangle {
color: "#FF0000"
width: 10; height: 10
anchors.top: parent.top
anchors.right: parent.right
}
}
}
将产生这个输出：
现在我想从这个绿色矩形的中心应用一个 3D 旋转。首先，我想在 X 上旋转 -45 度（向下鞠躬），然后在 Y 上旋转 -60 度（向左转）。
我使用了下面使用 GLM 截断的 c++ 代码来帮助我计算轴和角度：
// generate rotation matrix from euler in X-Y-Z order
// please note that GLM uses radians, not degrees
glm::mat4 rotationMatrix = glm::eulerAngleXY(glm::radians(-45.0f), glm::radians(-60.0f));
// convert the rotation matrix into a quaternion
glm::quat quaternion = glm::toQuat(rotationMatrix);
// extract the rotation axis from the quaternion
glm::vec3 axis = glm::axis(quaternion);
// extract the rotation angle from the quaternion
// and also convert it back to degrees for QML
double angle = glm::degrees(glm::angle(quaternion));
这个小 C++ 程序的输出给了我一个{-0.552483, -0.770076, 0.318976} 的轴和一个73.7201 的角度。所以我将我的示例代码更新为：
import QtQuick 2.0
Item {
width: 200; height: 200
Rectangle {
width: 100; height: 100
anchors.centerIn: parent
color: "#00FF00"
Rectangle {
color: "#FF0000"
width: 10; height: 10
anchors.top: parent.top
anchors.right: parent.right
}
transform: Rotation {
id: rot
origin.x: 50; origin.y: 50
axis: Qt.vector3d(-0.552483, -0.770076, 0.318976)
angle: 73.7201
}
}
}
这正是我想看到的：
到目前为止一切顺利。现在是困难的部分。我该如何制作动画？例如，如果我想从 {45.0, 60.0, 0} 转到 {45.0, 60.0, 90.0}。换句话说，我想从这里开始动画
到这里
我在这里插入了目标旋转
// generate rotation matrix from euler in X-Y-Z order
// please note that GLM uses radians, not degrees
glm::mat4 rotationMatrix = glm::eulerAngleXYZ(glm::radians(-45.0f), glm::radians(-60.0f), glm::radians(90.0f);
// convert the rotation matrix into a quaternion
glm::quat quaternion = glm::toQuat(rotationMatrix);
// extract the rotation axis from the quaternion
glm::vec3 axis = glm::axis(quaternion);
// extract the rotation angle from the quaternion
// and also convert it back to degrees for QML
double angle = glm::degrees(glm::angle(quaternion));
这给了我一个{-0.621515, -0.102255, 0.7767} 的轴和一个129.007 的角度
所以我将这个动画添加到我的示例中
ParallelAnimation {
running: true
Vector3dAnimation {
target: rot
property: "axis"
from: Qt.vector3d(-0.552483, -0.770076, 0.318976)
to: Qt.vector3d(-0.621515, -0.102255, 0.7767)
duration: 4000
}
NumberAnimation {
target: rot;
property: "angle";
from: 73.7201; to: 129.007;
duration: 4000;
}
}
“几乎”有效。问题是，如果你尝试一下，你会发现在动画的前半部分旋转完全偏离了它想要的旋转轴，但在动画的后半部分会自行修复。起始轮换很好，目标轮换也很好，但是中间发生的任何事情都不够好。如果我使用较小的角度（例如 45 度而不是 90 度）会更好，如果我使用较大的角度（例如 180 度而不是 45 度）会更糟糕，因为它只是沿随机方向旋转直到到达最终目标。
如何让这个动画在开始旋转和目标旋转之间看起来正确？
------------------- 编辑 -------------------
我要再添加一个标准：我正在寻找的答案必须绝对提供与我上面提供的屏幕截图相同的输出。
例如，将 3 个旋转轴拆分为 3 个单独的旋转变换不会给我正确的结果
transform: [
Rotation {
id: zRot
origin.x: 50; origin.y: 50;
angle: 0
},
Rotation {
id: xRot
origin.x: 50; origin.y: 50;
angle: -45
axis { x: 1; y: 0; z: 0 }
},
Rotation {
id: yRot
origin.x: 50; origin.y: 50;
angle: -60
axis { x: 0; y: 1; z: 0 }
}
]
给我这个：
这是不正确的。
【问题讨论】：