欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Flutter 实现酷炫的3D效果示例代码

程序员文章站 2022-07-04 17:04:40
此文讲解3个酷炫的3d动画效果。下面是要实现的效果:flutter 中3d效果是通过 transform 组件实现的,没有变换效果的实现:class transformdemo extends sta...

此文讲解3个酷炫的3d动画效果。

下面是要实现的效果:

Flutter 实现酷炫的3D效果示例代码

flutter 中3d效果是通过 transform 组件实现的,没有变换效果的实现:

class transformdemo extends statelesswidget {
 @override
 widget build(buildcontext context) {
 return scaffold(
 appbar: appbar(
 title: text('3d 变换demo'),
 ),
 body: container(
 alignment: alignment.center,
 color: colors.white,
 child: text('3d 变换demo'),
 ),
 );
 }
}

Flutter 实现酷炫的3D效果示例代码

通过 gesturedetector 组件添加滑动事件监听:

@override
widget build(buildcontext context) {
 return scaffold(
 appbar: appbar(
 title: text('3d 变换demo'),
 ),
 body: gesturedetector(
 onpanupdate: (details) {
 print('$details');
 },
 child: container(
 alignment: alignment.center,
 color: colors.white,
 child: text('3d 变换demo'),
 ),
 ),
 );
}

添加 transform 对组件进入旋转:

@override
widget build(buildcontext context) {
 return transform(
 transform: matrix4.identity()
 ..setentry(3, 2, 0.001)
 ..rotatex(pi/6)
 ..rotatey(pi/6),
 alignment: alignment.center,
 child: scaffold(
 appbar: appbar(
  title: text('3d 变换demo'),
 ),
 body: gesturedetector(
  onpanupdate: (details) {
  },
  child: container(
  alignment: alignment.center,
  color: colors.white,
  child: text('3d 变换demo'),
  ),
 ),
 ));
}

Flutter 实现酷炫的3D效果示例代码

将滑动的偏移和旋转进行关联:

class transformdemo extends statefulwidget {
 @override
 _transformdemostate createstate() => _transformdemostate();
}

class _transformdemostate extends state<transformdemo> {
 double _rotatex = .0;
 double _rotatey = .0;

 @override
 widget build(buildcontext context) {
 return transform(
 transform: matrix4.identity()
  ..rotatex(_rotatex)
  ..rotatey(_rotatey),
 alignment: alignment.center,
 child: scaffold(
  appbar: appbar(
  title: text('3d 变换demo'),
  ),
  body: gesturedetector(
  onpanupdate: (details) {
  setstate(() {
  _rotatex += details.delta.dy * .01;
  _rotatey += details.delta.dx * -.01;
  });
  },
  child: container(
  alignment: alignment.center,
  color: colors.white,
  child: text('3d 变换demo'),
  ),
  ),
 ));
 }
}

Flutter 实现酷炫的3D效果示例代码

基本已经实现了3d效果,但效果比较生硬,尤其垂直方向旋转的时候远点和近点在屏幕上的宽度是一样,

Flutter 实现酷炫的3D效果示例代码

添加近大远小的效果:

transform(
 transform: matrix4.identity()
 ..setentry(3, 2, 0.001)
 ..rotatex(_rotatex)
 ..rotatey(_rotatey),
 ...

Flutter 实现酷炫的3D效果示例代码

翻书效果

Flutter 实现酷炫的3D效果示例代码

上面的效果类似于翻书的效果。

实现的原理:

将图片左右切割为两部分,两张图片共分割为4个新的组件,如下图,分别为1、2、3、4

Flutter 实现酷炫的3D效果示例代码

代码实现:

_child1 = cliprect(
 child: align(
 alignment: alignment.centerleft,
 widthfactor: 0.5,
 child: child1,
 ),
);
_child2 = cliprect(
 child: align(
 alignment: alignment.centerright,
 widthfactor: 0.5,
 child: child1,
 ),
);

_child3 = cliprect(
 child: align(
 alignment: alignment.centerleft,
 widthfactor: 0.5,
 child: child2,
 ),
);

_child4 = cliprect(
 child: align(
 alignment: alignment.centerright,
 widthfactor: 0.5,
 child: child2,
 ),
);

将第一张图片放在第二种图片的上面,先旋转 组件2 从 0度到 90度,然后再旋转 组件3 从 -90度到0度,代码实现:

row(
 mainaxisalignment: mainaxisalignment.center,
 children: <widget>[
 stack(
 children: [
 _child1,
 transform(
  alignment: alignment.centerright,
  transform: matrix4.identity()
  ..setentry(3, 2, 0.001)
  ..rotatey(_animation1.value),
  child: _child3,
 ),
 ],
 ),
 container(
 width: 3,
 color: colors.white,
 ),
 stack(
 children: [
 _child4,
 transform(
  alignment: alignment.centerleft,
  transform: matrix4.identity()
  ..setentry(3, 2, 0.001)
  ..rotatey(_animation.value),
  child: _child2,
 )
 ],
 )
 ],
)

动画控制器设置:

@override
void initstate() {
 init();
 _controller =
 animationcontroller(vsync: this, duration: duration(seconds: 5))
 ..addlistener(() {
  setstate(() {});
 });
 _animation = tween(begin: .0, end: pi / 2)
 .animate(curvedanimation(parent: _controller, curve: interval(.0, .5)));
 _animation1 = tween(begin: -pi / 2, end: 0.0).animate(
 curvedanimation(parent: _controller, curve: interval(.5, 1.0)));
 _controller.forward();
 super.initstate();
}

其中 child1, child2为两种图片,代码如下:

_flipupdemostate(
 container(
 width: 300,
 height: 400,
 child: image.asset(
 'assets/images/b.jpg',
 fit: boxfit.cover,
 ),
 ),
 container(
 width: 300,
 height: 400,
 child: image.asset(
 'assets/images/c.jpeg',
 fit: boxfit.cover,
 ),
 ))

最后生成的效果就是开始的翻书效果。

上面是左右翻页效果,同理换成上下翻页效果:

@override
widget build(buildcontext context) {
 return scaffold(
 appbar: appbar(),
 body: column(
 mainaxisalignment: mainaxisalignment.center,
 children: <widget>[
 stack(
  children: [
  _upperchild1,
  transform(
  alignment: alignment.bottomcenter,
  transform: matrix4.identity()
  ..setentry(3, 2, 0.003)
  ..rotatex(_animation1.value),
  child: _upperchild2,
  ),
  ],
 ),
 sizedbox(
  height: 2,
 ),
 stack(
  children: [
  _lowerchild2,
  transform(
  alignment: alignment.topcenter,
  transform: matrix4.identity()
  ..setentry(3, 2, 0.003)
  ..rotatex(_animation.value),
  child: _lowerchild1,
  )
  ],
 )
 ],
 ),
 );
}

Flutter 实现酷炫的3D效果示例代码

到此这篇关于flutter 实现酷炫的3d效果示例代码的文章就介绍到这了,更多相关flutter 实现酷炫的3d效果内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

相关标签: Flutter 酷炫 3D