Flutter - 如何改变容器的旋转方向?
Flutter - How to change the rotation direction of a Container?
所以我有一个容器,当前可以根据需要沿 Y 轴旋转。唯一的问题是我无法改变它的方向(逆时针到顺时针)。
Center(
child: AnimatedBuilder(
animation: _controller,
builder: (_, child) {
// RotationTransition(
// turns: _animTurn,
// child: Icon(
// Icons.settings_sharp,
// size: 100,
// ),
// alignment: Alignment.center,
// );
return Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateY(
_controller.value * (math.pi),
),
// ..rotateZ(
// math.pi *
// 2 *
// _controller
// .value, //change 0 to any value to rotate z Axis
// ),
child: child,
);
},
child: Container(
child: AnimatedContainer(
height: 10,
width: 300,
duration: const Duration(milliseconds: 5000),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
boxShadow:
[
BoxShadow(
color: Colors.yellow.withOpacity(0.8),
spreadRadius: 15,
blurRadius: 20,
offset: const Offset(-10, 0),
),
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 16,
blurRadius: 32,
offset: const Offset(-10, 0),
),
]
),
),
),
),
),
正如您在注释代码中看到的那样,我尝试了 rotationTransition 但它没有帮助,因为它沿 Z 轴旋转。例如https://www.woolha.com/tutorials/flutter-using-rotationtransition-widget-examples
这不是我要找的东西。
您可以通过添加带有 pi 值的减号 (-) 来更改旋转,如下所示:
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateY(
_controller.value * (-math.pi),
),
所以我有一个容器,当前可以根据需要沿 Y 轴旋转。唯一的问题是我无法改变它的方向(逆时针到顺时针)。
Center(
child: AnimatedBuilder(
animation: _controller,
builder: (_, child) {
// RotationTransition(
// turns: _animTurn,
// child: Icon(
// Icons.settings_sharp,
// size: 100,
// ),
// alignment: Alignment.center,
// );
return Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateY(
_controller.value * (math.pi),
),
// ..rotateZ(
// math.pi *
// 2 *
// _controller
// .value, //change 0 to any value to rotate z Axis
// ),
child: child,
);
},
child: Container(
child: AnimatedContainer(
height: 10,
width: 300,
duration: const Duration(milliseconds: 5000),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
boxShadow:
[
BoxShadow(
color: Colors.yellow.withOpacity(0.8),
spreadRadius: 15,
blurRadius: 20,
offset: const Offset(-10, 0),
),
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 16,
blurRadius: 32,
offset: const Offset(-10, 0),
),
]
),
),
),
),
),
正如您在注释代码中看到的那样,我尝试了 rotationTransition 但它没有帮助,因为它沿 Z 轴旋转。例如https://www.woolha.com/tutorials/flutter-using-rotationtransition-widget-examples 这不是我要找的东西。
您可以通过添加带有 pi 值的减号 (-) 来更改旋转,如下所示:
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateY(
_controller.value * (-math.pi),
),