前言

在Android中可以设置共享元素，这样两个页面相同的元素在转场时就会有一个过渡动画，效果炫酷，用户体验也更好。

那么在Flutter中有同样的功能么？

答案是一定的，在Flutter它就是Hero，也是一个widget（flutter中万物皆是widget）

Hero

相对于Android中的共享元素功能，Hero使用要简单的非常多，只需要要共享的元素（widge）用Hero包一层即可，比如两个页面中都有一个Image，内容一样，那么就可以通过hero将他们设置为共享元素

页面A中

Hero(tag: 'thumb',child: Image.file(File('xxxx/thumb'),fit: BoxFit.cover,filterQuality: FilterQuality.low,)
)

页面B中

Hero(tag: 'thumb',  //tag与上一个页面的一致child: Image.file(File('xxxx/thumb'),)
)

这样当页面切换是，就可以看到元素的移动缩放等过渡动画了。

这里注意：

在Hero下的tag要必须一致，同时为了获得最佳效果，Hero下面的widget树要几乎相同，比如上面的两个Hero下都只有一个Image，但是也可以是复杂的布局，这时最好widget树相似，否则实际效果会很差。

图片闪烁？

在我实际的开发过程中发现，为Image设置了共享元素后，在切换页面时发现动画时正常的，但是播放完动画后图片闪烁了一下。

经过反复测试发现是图片的cache机制导致的，比如我们将上面的代码修改一下：

页面A中

Hero(tag: 'thumb',child: Image.file(File('xxxx/thumb'),fit: BoxFit.cover,filterQuality: FilterQuality.low,cacheWidth: window.physicalSize.width ~/ 2.2,)
)

页面B中

Hero(tag: 'thumb',  //tag与上一个页面的一致child: Image.file(File('xxxx/thumb'),cacheWidth: window.physicalSize.width ~/ 2.2,)
)

为图片都加上cacheWidth。我们设置cacheWidth或cacheHeight是为了加载图片时压缩图片以节省内存空间，同时缓存到内存里。但是在Hero下的Image如果设置了cacheWidth或cacheHeight，在切换场景情况下动画结束时就会闪一下。

去掉cache就不会再闪烁了，同理猜测如果使用了ResizeImage估计也会闪烁。

但是目前未找到在使用cache的同时不闪烁的解决方法。

Flutter入门：Hero共享元素相关推荐

谈一谈Flutter中的共享元素动画Hero
如果你是一名安卓开发者,应该很熟悉共享元素变换(Shared Element Transition)这个概念,它可以通过几行代码,就在两个Activity或者Fragment之间做出流畅的转场动 ...
Flutter入门：Image组件
前言在flutter中显示图片的就是Image,相当于android中的ImageView,但是要比ImageView功能强大很多. 比如支持gif动图,可以加载网络图片,缓存机制,图片处理等.实际 ...
Flutter Hero 实现共享元素转场动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...
微信小程序共享元素+ page-container假页实现弹出效果
1.实现效果 2.实现原理 page-container page-container 小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗.在页面内加载一个全屏的子页面等),用户进行返回操 ...
31、Flutter之Hero动画
Flutter Hero动画 Hero指的是可以在路由(页面)之间"飞行"的widget. 使用Flutter的Hero widget创建hero动画. 将 hero从一个路由飞到 ...
flutter 入门示例_AnyChart入门— 10个实用示例
flutter 入门示例 If your website is data-intensive, then you will need to make that data easy to visuali ...
Flutter 入门指北(Part 9)之弹窗和提示(SnackBar、BottomSheet、Dialog)
该文已授权公众号「码个蛋」,转载请指明出处前面的小节把常用的一些部件都介绍了,这节介绍下 Flutter 中的一些操作提示.Flutter 中的操作提示主要有这么几种 SnackBar.Botto ...
【Android视图效果】共享元素实现仿微信查看大图效果
在之前的文章中,我们通过动画实现了这个,具体可以查看[Android 动画]动画详解之仿微信查看大图效果(四),这里,我们用过度动画来实现. 什么是共享元素? 它是Android 5.0新加入的一种过 ...
android 活动切换动画,android – 在使用ChangeImageTransform共享元素转换的两个活动之间动画化ImageView...
要在具有共享元素的两个活动之间进行屏幕转换动画, 您可以阅读 this article并按照上述步骤: Enable window content transitions in your theme. ...

Flutter入门：Hero共享元素

前言

Hero

图片闪烁？

Flutter入门：Hero共享元素相关推荐

最新文章

热门文章