Flutter如何修改Container沿Y轴的旋转方向(逆时针转顺时针)
沿Y轴顺时针旋转修改方案
你当前使用Transform组件实现3D旋转的方案是正确的,RotationTransition仅支持沿Z轴的2D旋转,无法满足沿Y轴的3D旋转需求,无需更换组件。
要实现沿Y轴从逆时针旋转切换为顺时针旋转,仅需调整rotateY方法传入的角度符号即可:
Flutter 3D旋转遵循右手定则:沿Y轴旋转时,正角度对应逆时针旋转,负角度对应顺时针旋转,只需给原有角度值添加负号即可完成方向切换。
修改后的完整代码如下:
Center( child: AnimatedBuilder( animation: _controller, builder: (_, child) { return Transform( alignment: Alignment.center, transform: Matrix4.identity() ..setEntry(3, 2, 0.001) ..rotateY( // 仅需在这里添加负号即可反转旋转方向 -_controller.value * (math.pi), ), 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), ), ] ), ), ), ), ),
内容的提问来源于stack exchange,提问作者who-aditya-nawandar
相关产品推荐
相关产品推荐

