Question

我不太了解线性代数，因为这个问题，我正在尝试学习它。对于那些了解线性代数的人，我很确定这是一个简单的问题。

我将尝试解释并显示一些图片，视频和代码以更好地描述它。

首先，乍一看，我的目标非常简单。是要创建this sort of animation

Widget getWidget(Type type)
{
    Matrix4 _pmat(num pv) {
        return new Matrix4(
            1.0, 0.0, 0.0, 0.0, //
            0.0, 1.0, 0.0, 0.0, //
            0.0, 0.0, 1.0, pv * 0.001, //
            0.0, 0.0, 0.0, 1.0,
        );
    }

    double delta = _panDown ? _delta : _animationOffset.value;
    Matrix4 perspective = _pmat(0.35);

    if (type == Type.NEXT)
    {
        delta -= MAX_DELTA;
    }

    double xOffset = ((delta / 70) / 2.5) * (deviceWidth / 2);
    double zOffset = (delta / 70 / (math.pi - 0.55)).abs() * 180.0;
    double rotateY = (math.pi - (delta / 3) * math.pi / 180) - math.pi;

    if (type == Type.NEXT)
    {
        xOffset = ((delta / 70) / 2.5) * (deviceWidth);
        zOffset *= 2;
    }

    perspective.translate(xOffset, 0.0, zOffset);

    double angleOffset = delta * -0.5;

    return new Transform(
        alignment: FractionalOffset.center,
        transform: perspective.scaled(1.0, 1.0, 1.0)
            ..rotateX(0.0)
            ..rotateY(rotateY)
            ..rotateZ(0.0),
        child: new Container(color: Colors.red),
    );
}

如您所见，我当前正在用“幻数”移动每个“页面”，我称其为幻数，因为我对线性代数非常了解，我在这里所做的只是一点点的理解。有+反复试验。显然不是正确的方法。

我拥有的增量基本上只是用户GestureDetector所要使用的偏移量。

现在，对于这个立方体转换的所有示例，我都看到了，例如在CSS中，它们只是旋转/平移了每一面。然后移动/旋转“相机”或我猜的父母？

我也尝试过使用该方法：

赞：

Widget getWidget(Type type)
{
    AlignmentGeometry alignmentGeometry;
    Matrix4 matrix4;

    switch (type)
    {
        case Type.PREVIOUS:
            alignmentGeometry = FractionalOffset.center;
            matrix4 = Matrix4.identity()
                ..setEntry(3, 2, 0.001) // perspective
                ..rotateY(-90.0 * math64.degrees2Radians)
                ..translate(deviceWidth / 2, 0.0, deviceWidth / 2);
            break;

        case Type.CURRENT:
            alignmentGeometry = FractionalOffset.center;
            matrix4 = Matrix4.identity()
                ..setEntry(3, 2, 0.001);
            break;

        case Type.NEXT:
            alignmentGeometry = FractionalOffset.center;
            matrix4 = Matrix4.identity()
                ..setEntry(3, 2, 0.001) // perspective
                ..rotateY(90.0 * math64.degrees2Radians)
                ..translate(-deviceWidth / 2, 0.0, deviceWidth / 2);
            break;
    }

    return new Transform(
        alignment: alignmentGeometry,
        transform: matrix4,
        child: new Container(
            color: type == Type.NEXT ? Colors.green : type == Type.PREVIOUS ? Colors.red : Colors.black.withOpacity(0.5),
        ),
    );
}

然后让我们简单地向右旋转父级？

Widget build(BuildContext context)
{
    List<Widget> widgets = [];

    widgets.add(getWidget(Type.PREVIOUS));
    widgets.add(getWidget(Type.CURRENT));
    widgets.add(getWidget(Type.NEXT));

    return new Scaffold(
        key: _scaffoldKey,
        body: new Container(
            color: Colors.black,
            child: new GestureDetector(
                child: new Container(
                    color: Colors.white,
                    child: new Transform(
                        alignment: FractionalOffset.center,
                        transform: Matrix4.identity()
                            ..setEntry(3, 2, 0.0001)
                            ..rotateY(45.0 * math64.degrees2Radians),
                            child: new Stack(
                                children: widgets,
                            ),
                    )
                ),
            )
        )
    );
}

否：

将其设置为90度会使其全部消失。

现在，我知道我需要某种“枢轴旋转点”或更改“原点”或“锚点”，甚至不知道如何调用它。

因此，为了说明它，例如，我们也有一个底面。所以我想要底面的中心（例如，在一个立方体中）。因此它将如下所示：

现在，如果我要在Y轴上旋转该“原点”，我应该获得正确的动画了吗？

围绕自定义枢轴点旋转

0 个答案: