Flutter 實(shí)現(xiàn)酷炫的3D效果示例代碼
此文講解3個(gè)酷炫的3D動(dòng)畫(huà)效果。
下面是要實(shí)現(xiàn)的效果:
Flutter 中3D效果是通過(guò) Transform 組件實(shí)現(xiàn)的,沒(méi)有變換效果的實(shí)現(xiàn):
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'), ), ); } }
通過(guò) GestureDetector 組件添加滑動(dòng)事件監(jiān)聽(tīng):
@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 對(duì)組件進(jìn)入旋轉(zhuǎn):
@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'), ), ), )); }
將滑動(dòng)的偏移和旋轉(zhuǎn)進(jìn)行關(guān)聯(lián):
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'), ), ), )); } }
基本已經(jīng)實(shí)現(xiàn)了3D效果,但效果比較生硬,尤其垂直方向旋轉(zhuǎn)的時(shí)候遠(yuǎn)點(diǎn)和近點(diǎn)在屏幕上的寬度是一樣,
添加近大遠(yuǎn)小的效果:
Transform( transform: Matrix4.identity() ..setEntry(3, 2, 0.001) ..rotateX(_rotateX) ..rotateY(_rotateY), ...
翻書(shū)效果
上面的效果類(lèi)似于翻書(shū)的效果。
實(shí)現(xiàn)的原理:
將圖片左右切割為兩部分,兩張圖片共分割為4個(gè)新的組件,如下圖,分別為1、2、3、4
代碼實(shí)現(xiàn):
_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, ), );
將第一張圖片放在第二種圖片的上面,先旋轉(zhuǎn) 組件2 從 0度到 90度,然后再旋轉(zhuǎn) 組件3 從 -90度到0度,代碼實(shí)現(xiàn):
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, ) ], ) ], )
動(dòng)畫(huà)控制器設(shè)置:
@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, ), ))
最后生成的效果就是開(kāi)始的翻書(shū)效果。
上面是左右翻頁(yè)效果,同理?yè)Q成上下翻頁(yè)效果:
@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, ) ], ) ], ), ); }
到此這篇關(guān)于Flutter 實(shí)現(xiàn)酷炫的3D效果示例代碼的文章就介紹到這了,更多相關(guān)Flutter 實(shí)現(xiàn)酷炫的3D效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android 三種延遲操作的實(shí)現(xiàn)方法
這篇文章主要介紹了Android 延遲操作的實(shí)現(xiàn)方法的相關(guān)資料,這里提供了三種實(shí)現(xiàn)方法,希望能幫助到大家,需要的朋友可以參考下2017-08-08Android項(xiàng)目實(shí)戰(zhàn)之Glide 高斯模糊效果的實(shí)例代碼
這篇文章主要介紹了Android項(xiàng)目實(shí)戰(zhàn)之Glide 高斯模糊效果的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06Android實(shí)現(xiàn)簡(jiǎn)易的音樂(lè)播放器
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)易的音樂(lè)播放器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05實(shí)例詳解用戶(hù)輸入 i. 檢測(cè)常用手勢(shì)
通過(guò)本段代碼給大家介紹當(dāng)用戶(hù)輸入i檢測(cè)常用手勢(shì)的相關(guān)內(nèi)容,代碼簡(jiǎn)單易懂,感興趣的朋友一起學(xué)習(xí)吧2016-01-01深入理解Android熱修復(fù)技術(shù)原理之代碼熱修復(fù)技術(shù)
在各種 Android 熱修復(fù)方案中,Andfix的即時(shí)生效令人印象深刻,它稍顯另類(lèi), 并不需要重新啟動(dòng),而是在加載補(bǔ)丁后直接對(duì)方法進(jìn)行替換就可以完成修復(fù),然而它的使用限制也遭遇到更多的質(zhì)疑2021-06-06Android 中ActionBar+fragment實(shí)現(xiàn)頁(yè)面導(dǎo)航的實(shí)例
這篇文章主要介紹了Android 中ActionBar+fragment實(shí)現(xiàn)頁(yè)面導(dǎo)航的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09Flutter?繪制風(fēng)車(chē)實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Flutter?繪制風(fēng)車(chē)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android實(shí)戰(zhàn)教程第九篇之短信高效備份
這篇文章主要為大家詳細(xì)介紹了Android實(shí)戰(zhàn)教程第九篇之短信高效備份,利用xml序列化器備份短信,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11