提交 419141d6 authored 作者: Kevin's avatar Kevin

优化了CupertinoPopover的动画

上级 91f7e513
## [0.0.1] - TODO: Add release date. ## [0.0.1] - TODO: Add release date.
* TODO: Describe initial release. * TODO: Describe initial release.
## [0.0.9] - TODO: 修改了CupertionPopover动画
* TODO: 修改了修改了CupertionPopover动画,添加了CupertinoPopoverMenuItem控件
\ No newline at end of file
...@@ -12,8 +12,6 @@ ...@@ -12,8 +12,6 @@
<excludeFolder url="file://$MODULE_DIR$/example/.dart_tool" /> <excludeFolder url="file://$MODULE_DIR$/example/.dart_tool" />
<excludeFolder url="file://$MODULE_DIR$/example/.pub" /> <excludeFolder url="file://$MODULE_DIR$/example/.pub" />
<excludeFolder url="file://$MODULE_DIR$/example/build" /> <excludeFolder url="file://$MODULE_DIR$/example/build" />
<excludeFolder url="file://$MODULE_DIR$/example/build/app/intermediates/flutter/debug/flutter_assets/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/build/app/intermediates/merged_assets/debug/mergeDebugAssets/out/flutter_assets/packages" />
</content> </content>
<orderEntry type="jdk" jdkName="Android API 25 Platform" jdkType="Android SDK" /> <orderEntry type="jdk" jdkName="Android API 25 Platform" jdkType="Android SDK" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
......
...@@ -19,7 +19,8 @@ dependencies: ...@@ -19,7 +19,8 @@ dependencies:
# The following adds the Cupertino Icons font to your application. # The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons. # Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2 cupertino_icons: ^0.1.2
cool_ui: ^0.0.7 cool_ui:
path: ../
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:
......
...@@ -99,22 +99,20 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider ...@@ -99,22 +99,20 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider
static const double _arrowWidth = 26.0; static const double _arrowWidth = 26.0;
static const double _arrowHeight = 13.0; static const double _arrowHeight = 13.0;
double left;
double top;
Rect _arrowRect; Rect _arrowRect;
Rect _bodyRect; Rect _bodyRect;
Rect _currentArrowRect;
Rect _currentBodyRect;
double _currentRadius;
Animation<double> doubleAnimation; Animation<double> doubleAnimation;
AnimationController animation; AnimationController animation;
/// 是否箭头向上 /// 是否箭头向上
bool get isArrowUp{ bool isArrowUp;
return ScreenUtil.screenHeight > widget.attachRect.bottom + widget.height + _arrowWidth;
}
@override @override
void initState() { void initState() {
// TODO: implement initState // TODO: implement initState
isArrowUp = ScreenUtil.screenHeight > widget.attachRect.bottom + widget.height + _arrowWidth;
super.initState(); super.initState();
calcRect(); calcRect();
animation = new AnimationController( animation = new AnimationController(
...@@ -123,34 +121,39 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider ...@@ -123,34 +121,39 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider
); );
// Tween({T begin, T end }):创建tween(补间) // Tween({T begin, T end }):创建tween(补间)
doubleAnimation = new Tween<double>(begin: 0.0, end: 1.0).animate(animation)..addListener((){ doubleAnimation = new Tween<double>(begin: 0.0, end: 1.0).animate(animation)..addListener((){
setState(calcAnimationRect); setState((){});
}); });
animation.forward(from: 0.0); animation.forward(from: 0.0);
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var left = _bodyRect.left;
var top = isArrowUp?_arrowRect.top:_bodyRect.top; var bodyMiddleX = _bodyRect.left + _bodyRect.width / 2; // 计算Body的X轴中间点
var arrowMiddleX = _arrowRect.left + _arrowRect.width /2; //计算箭头的X轴中间点
var leftOffset = (arrowMiddleX - bodyMiddleX) * (1 - doubleAnimation.value); //计算X轴缩小的偏移值
return Stack( return Stack(
children: <Widget>[ children: <Widget>[
Positioned( Positioned(
left:left, left:left + leftOffset,
top:top, top:top,
child: ClipPath( child:ScaleTransition(
clipper:ArrowCliper( alignment: isArrowUp?Alignment.topCenter:Alignment.bottomCenter,
arrowRect: _currentArrowRect, scale: doubleAnimation,
bodyRect: _currentBodyRect, child: ClipPath(
isArrowUp: isArrowUp, clipper:ArrowCliper(
radius: _currentRadius arrowRect:_arrowRect,
), bodyRect: _bodyRect,
child: Container( isArrowUp: isArrowUp,
padding: EdgeInsets.only(top:isArrowUp?_arrowHeight:0.0), radius: widget.radius
color: Colors.white, ),
width: widget.width, child: Container(
height: _bodyRect.height + _arrowHeight, padding: EdgeInsets.only(top:isArrowUp?_arrowHeight:0.0),
child: Material(child: widget.child) color: Colors.white,
), width: widget.width,
height: _bodyRect.height + _arrowHeight,
child: Material(child: widget.child)
),),
), ),
) )
] ]
...@@ -179,37 +182,11 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider ...@@ -179,37 +182,11 @@ class CupertinoPopoverState extends State<CupertinoPopover> with TickerProvider
arrowTop = widget.attachRect.top - _arrowHeight; arrowTop = widget.attachRect.top - _arrowHeight;
bodyTop = widget.attachRect.top - widget.height - _arrowHeight; bodyTop = widget.attachRect.top - widget.height - _arrowHeight;
} }
_arrowRect = Rect.fromLTWH(arrowLeft, arrowTop, _arrowWidth, _arrowHeight);
_bodyRect = Rect.fromLTWH(bodyLeft, bodyTop, widget.width, widget.height);
}
calcAnimationRect(){
var top = isArrowUp?_arrowRect.top:_bodyRect.top;
var middleX = (_arrowRect.left - _bodyRect.left) + _arrowRect.width /2;
var arrowLeft = middleX + ((_arrowRect.left - _bodyRect.left) - middleX) * doubleAnimation.value;
var arrowTop = _arrowRect.top - top;
var bodyLeft = middleX + (0 - middleX) * doubleAnimation.value;
_currentRadius = widget.radius * doubleAnimation.value;
var bodyTop = _bodyRect.top - top;
if(isArrowUp){
bodyTop = arrowTop + _arrowRect.height * doubleAnimation.value ;
}else{
arrowTop += _arrowRect.height *(1 - doubleAnimation.value) ;
bodyTop = arrowTop - _bodyRect.height * doubleAnimation.value ;
}
_currentArrowRect = Rect.fromLTWH( left = bodyLeft;
arrowLeft, top = isArrowUp?arrowTop:bodyTop;
arrowTop, _arrowRect = Rect.fromLTWH(arrowLeft - left, arrowTop - top, _arrowWidth, _arrowHeight);
_arrowRect.width * doubleAnimation.value, _bodyRect = Rect.fromLTWH(0.0, bodyTop - top, widget.width, widget.height);
_arrowRect.height * doubleAnimation.value);
_currentBodyRect = Rect.fromLTWH(
bodyLeft,
bodyTop,
_bodyRect.width * doubleAnimation.value,
_bodyRect.height * doubleAnimation.value);
} }
} }
......
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class CupertinoPopoverMenuItem extends StatelessWidget{ class CupertinoPopoverMenuItem extends StatelessWidget{
final Widget leading;
final Widget child;
const CupertinoPopoverMenuItem({this.leading,this.child});
@override @override
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论