Flutter 动画 Hero、更多动画示例

左手的ㄟ右手 2023-07-24 03:23 32阅读 0赞

### 文章目录 ###

*   *   *  Hero 动画
         *   *  效果示例
         *  更多动画
         *   *  效果展示

### Hero 动画 ###

> 在 `Android`中有共享元素动画，能够实现页面之间共享元素的切换效果。`Flutter` 中也提供 相应的 `Hero widget` 实现该效果。

既然 `Hero`是个`widget`，按照惯例，我们来看看构造函数支持哪些字段：

const Hero({
        Key key,
        @required this.tag, // 共享元素标识符，两个页面的 tag 需要一样且唯一
        this.createRectTween, // 定义目标 Hero 从起始路径 飞向目标路径时的边界变化。
        this.flightShuttleBuilder,// 可选替代，以提供在 Hero 动画执行期间显示的小部件。
        this.placeholderBuilder, //动画执行后，将占位符小部件保留为 Hero 的 child。
        this.transitionOnUserGestures = false, // 如果 PageRoute 转换是由用户手势（例如iOS上的向后滑动）触发的，是否执行 Hero 转换，默认是 false
        @required this.child, // 共享动画执行的 child 
      })

比较常用的属性也就两个：`tag 和 child`，下面来看简单的示例

#### 效果示例 ####

> 该效果是从网格列表中点击 `item` 跳转到详情页面有一个过度的效果，这是使用了 `Hero` 动画实现共享动画。在这两个页面之间的共享元素是 展示的图片。

![在这里插入图片描述][20200409150001932.gif]

在实现以上效果的时候，为了保证`tag`的统一，我将它们放到常量类里面，统一调用.  
![在这里插入图片描述][20200409153745106.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
但是使用的时候还是出现问题了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

There are multiple heroes that share the same tag within a subtree.

大概意思就是说`Hero`存在多个相同的`tag`，导致的根本原因还没仔细研究。  
不过既然是`tag`相同那么，保存`tag`唯一就行了。  
这里文章的`id`是唯一的因此在`tag`中添加文章的`id`即可保证`tag`的唯一

Container(
      color: Colors.grey,
      child:Hero(
        tag: '${Constant.heroPhotoDetail} $id', // 使用常量标识符 + id 
        child:  ExtendedImage.network(
          envelopePic,
          fit: BoxFit.fitWidth,
        ),
      )
    ),

> 详细代码实现可查看 [YGragon/Flutter-WanAndroid][YGragon_Flutter-WanAndroid] 中的 `photo_page 、photo_page_detail`这两个包。

### 更多动画 ###

*  查看里面的视频讲解。[https://flutter.dev/docs/development/ui/animations][https_flutter.dev_docs_development_ui_animations]
 *  `Flutter`提供的`widget`动画[https://flutter.dev/docs/development/ui/widgets/animation][https_flutter.dev_docs_development_ui_widgets_animation]

#### 效果展示 ####

> 以下效果来源于：[https://flutter.dev/docs/development/ui/widgets/animation][https_flutter.dev_docs_development_ui_widgets_animation]

*  AnimatedDefaultTextStyle  
    ![在这里插入图片描述][20200409161350777.gif]
 *  AnimatedContainer  
    ![在这里插入图片描述][20200409161707259.gif]
 *  [AnimatedCrossFade ][AnimatedCrossFade]
 *  AnimatedOpacity  
    ![在这里插入图片描述][20200409162139375.gif]
 *  AnimatedPhysicalModel  
    ![在这里插入图片描述][2020040916221958.gif]
 *  AnimatedPositioned  
    ![在这里插入图片描述][20200409162307886.gif]
 *  DecoratedBoxTransition  
    ![在这里插入图片描述][20200409162438525.gif]
 *  FadeTransition  
    ![在这里插入图片描述][20200409162531993.gif]
 *  PositionedTransition  
    ![在这里插入图片描述][20200409162703368.gif]
 *  RotationTransition  
    ![在这里插入图片描述][2020040916274548.gif]
 *  ScaleTransition  
    ![在这里插入图片描述][20200409162827378.gif]
 *  SizeTransition

> 对自己的大小进行动画处理，然后裁剪并对齐其子级。

![在这里插入图片描述][20200409162913190.gif]

*  SlideTransition  
    ![在这里插入图片描述][20200409163041885.gif]

[20200409150001932.gif]: /images/20230528/77879f341bf6470e84c776d678ee4b21.png
[20200409153745106.png]: /images/20230528/0583323b0bb541b1920b0027e2a6c406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/f7fdb92ae58145b0a8d3e8b775ff058b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/a0926fd5b283476fb95b7cc032420d1f.png
[YGragon_Flutter-WanAndroid]: https://github.com/YGragon/Flutter-WanAndroid
[https_flutter.dev_docs_development_ui_animations]: https://flutter.dev/docs/development/ui/animations
[https_flutter.dev_docs_development_ui_widgets_animation]: https://flutter.dev/docs/development/ui/widgets/animation
[20200409161350777.gif]: /images/20230528/724c95d1917f48a8babb8d4b52885bca.png
[20200409161707259.gif]: /images/20230528/d8e469d74265440a9b491a31fb53f0a0.png
[AnimatedCrossFade]: https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html
[20200409162139375.gif]: /images/20230528/a8fcf3f498514014b6e6c929726ac6db.png
[2020040916221958.gif]: /images/20230528/63570f0cf3814e5083792d94419d58f8.png
[20200409162307886.gif]: /images/20230528/cf68466601904a3db132c8d5a844adcd.png
[20200409162438525.gif]: /images/20230528/d83eac26872b47e19286d2d6d45ef4f9.png
[20200409162531993.gif]: /images/20230528/23f325bb44ec433388add3fa677148a0.png
[20200409162703368.gif]: /images/20230528/6a7ffcd26c824543983abadfd20649a5.png
[2020040916274548.gif]: /images/20230528/41e590cf546a42a9a149ed525d9aa20d.png
[20200409162827378.gif]: /images/20230528/0b99f35156b747689a653daad12ef671.png
[20200409162913190.gif]: /images/20230528/3ca6e70e2ea54e63a5d7e4bdd4f59a9f.png
[20200409163041885.gif]: /images/20230528/93cc6cd1c8fb4dc99a6335a6c0adab6a.png