欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用Flutter實(shí)現(xiàn)“孔雀開(kāi)屏”的動(dòng)畫(huà)效果

 更新時(shí)間：2020年05月26日 08:44:17   作者：老孟  
這篇文章主要給大家介紹了關(guān)于如何利用Flutter實(shí)現(xiàn)“孔雀開(kāi)屏”的動(dòng)畫(huà)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

今天分享一個(gè)類(lèi)似“孔雀開(kāi)屏”的動(dòng)畫(huà)效果，打開(kāi)新的頁(yè)面時(shí)，新的頁(yè)面從屏幕右上角以圓形逐漸打開(kāi)到全屏。

先來(lái)看下具體的效果

不知道這種效果大家叫什么名字？如果有更合適的名字可以在評(píng)論處告訴我，下面來(lái)說(shuō)下如何實(shí)現(xiàn)此效果。

在使用Navigator進(jìn)入一個(gè)新的頁(yè)面時(shí)，通常用法如下：

Navigator.of(context).push(MaterialPageRoute(
 builder: (context){
  return PageB();
 }
));

MaterialPageRoute就包含了切換頁(yè)面時(shí)的動(dòng)畫(huà)效果，在iOS上效果是左右滑動(dòng)切換，在Android上效果是上下滑動(dòng)，如果想要自定義切換效果如何實(shí)現(xiàn)呢？答案是使用PageRouteBuilder，用法如下：

Navigator.of(context).push(PageRouteBuilder(pageBuilder:
  (BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation) {
 ...
}));

在pageBuilder函數(shù)中使用animation返回新頁(yè)面的動(dòng)畫(huà)效果即可。

新的頁(yè)面以圓形效果逐漸打開(kāi)，注意并沒(méi)有縮放效果，所以新的頁(yè)面是被裁減的，新的頁(yè)面以右上角為圓心，半徑逐漸變大進(jìn)行裁切，就是我們想要的效果。

通過(guò)上面的分析，使用ClipPath對(duì)新的頁(yè)面進(jìn)行裁切

Navigator.of(context).push(PageRouteBuilder(pageBuilder:
  (BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation) {
 return AnimatedBuilder(
  animation: animation,
  builder: (context, child) {
   return ClipPath(
    clipper: CirclePath(animation.value),
    child: child,
   );
  },
  child: PageB(),
 );
}));

重點(diǎn)是CirclePath，這就是裁切的路徑，

class CirclePath extends CustomClipper<Path> {
 CirclePath(this.value);

 final double value;

 @override
 Path getClip(Size size) {
  var path = Path();
  double radius =
    value * sqrt(size.height * size.height + size.width * size.width);
  path.addOval(Rect.fromLTRB(
    size.width - radius, -radius, size.width + radius, radius));
  return path;
 }

 @override
 bool shouldReclip(CustomClipper<Path> oldClipper) {
  return true;
 }
}

由于Path沒(méi)有直接添加圓形的API函數(shù)，因此使用橢圓方法，只需將橢圓的矩形區(qū)域設(shè)置為正方形，那么裁切出來(lái)的就是圓形。

半徑的最大值并不是屏幕的寬或者高，而是屏幕的對(duì)角線長(zhǎng)度。

由于是從右上角開(kāi)始，而且裁切的矩形區(qū)域必須是正方形，所以裁切的矩形區(qū)域是超出頁(yè)面區(qū)域的。

如果很多頁(yè)面都用到了這個(gè)效果，可以進(jìn)行封裝，類(lèi)似于MaterialPageRoute，封裝如下：

class CirclePageRoute extends PageRoute {
 CirclePageRoute({
  @required this.builder,
  this.transitionDuration = const Duration(milliseconds: 500),
  this.opaque = true,
  this.barrierDismissible = false,
  this.barrierColor,
  this.barrierLabel,
  this.maintainState = true,
 });

 final WidgetBuilder builder;

 @override
 final Duration transitionDuration;

 @override
 final bool opaque;

 @override
 final bool barrierDismissible;

 @override
 final Color barrierColor;

 @override
 final String barrierLabel;

 @override
 final bool maintainState;

 @override
 Widget buildPage(BuildContext context, Animation<double> animation,
   Animation<double> secondaryAnimation) {
  return AnimatedBuilder(
   animation: animation,
   builder: (context, child) {
    return ClipPath(
     clipper: CirclePath(animation.value),
     child: child,
    );
   },
   child: builder(context),
  );
 }
}

使用

Navigator.of(context).push(CirclePageRoute(builder: (context) {
 return PageB();
}));

如果你查看CupertinoPageRoute、MaterialPageRoute、PageRouteBuilder的源碼，你會(huì)發(fā)現(xiàn)這3個(gè)都是繼承自PageRoute，所以，不知不覺(jué)我們又學(xué)會(huì)了自定義路由。

總結(jié)

到此這篇關(guān)于利用Flutter實(shí)現(xiàn)“孔雀開(kāi)屏”的動(dòng)畫(huà)效果的文章就介紹到這了,更多相關(guān)Flutter動(dòng)畫(huà)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論