Matrix4颤振转捩

Question

我试图在我的代码中创建一个平滑的缩放过渡，但它的行为不像预期的那样，我做错了什么?

所以我在做转换。

Widget _buildPageItem (int index){
//trabalhando o zoom usando a funcao intstate
Matrix4 matrix = new Matrix4.identity();
if (index == _currPageValue.floor()){
var currScale = 1-(_currPageValue-index)*(1-_scaleFactor);
var currTrans = _height*(1-currScale)/2;
matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, currTrans, 0);
}else if (index == _currPageValue.floor()+1){
var currScale = _scaleFactor+(_currPageValue-index+1)*(1-_scaleFactor);
var currTrans = _height*(1-currScale)/2;
matrix = Matrix4.diagonal3Values(1, currScale, 1);
matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, currTrans, 0);
}else if (index == _currPageValue.floor()-1){
var currScale = 1-(_currPageValue-index)*(1-_scaleFactor);
var currTrans = _height*(1-currScale)/2;
matrix = Matrix4.diagonal3Values(1, currScale, 1);
matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, currTrans, 0);
}else{
var currScale = 0.8;
matrix = Matrix4.diagonal3Values(1, currScale, 1);
matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, _height*(1-_scaleFactor)/2, 1);
}

返回Transform函数

Answer 1

最后一个else{}应该是这样的:

}else{
var currScale = 0.8;
matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, _height*(1-_scaleFactor)/2, 1);
}

Answer 2

// For Matrix4 Transition in Flutter, we do the following code:-
// Declare these variables according to your requirement, I have taken values just for an example -
PageController pageController = PageController(viewportFraction: 0.85);
var _currPageValue = 0.0;
double _scaleFactor = 0.8;
double _height = 220;
// Add this code in init and dispose widget -
@override
void initState() {
super.initState();
pageController.addListener(() {
setState(() {
_currPageValue = pageController.page!;
});
});
}
@override
void dispose() {
super.dispose();
pageController.dispose();
}
// Add this code after the above -
@override
Widget build(BuildContext context) {
return Container(
height: 320,
child: PageView.builder(
controller: pageController,
itemCount: 5,
itemBuilder: (context, position) {
return _buildPageItem(position);
}),
);
}
Widget _buildPageItem(int index) {
Matrix4 matrix = new Matrix4.identity();
if (index == _currPageValue.floor()) {
var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
var currTrans = _height * (1 - currScale) / 2;
matrix = Matrix4.diagonal3Values(1, currScale, 1)
..setTranslationRaw(0, currTrans, 0);
} else if (index == _currPageValue.floor() + 1) {
var currScale =
_scaleFactor + (_currPageValue - index + 1) * (1 - _scaleFactor);
var currTrans = _height * (1 - currScale) / 2;
matrix = Matrix4.diagonal3Values(1, currScale, 1);
matrix = Matrix4.diagonal3Values(1, currScale, 1)
..setTranslationRaw(0, currTrans, 0);
} else if (index == _currPageValue.floor() - 1) {
var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
var currTrans = _height * (1 - currScale) / 2;
matrix = Matrix4.diagonal3Values(1, currScale, 1);
matrix = Matrix4.diagonal3Values(1, currScale, 1)
..setTranslationRaw(0, currTrans, 0);
} else {
var currScale = 0.8;
matrix = Matrix4.diagonal3Values(1, currScale, 1)
..setTranslationRaw(0, _height * (1 - _scaleFactor) / 2, 1);
}
return Transform(
transform: matrix,
child: Container()
);
}
// I hope you will be able to scale factor the current widget while sliding it.