往期知识点整理
介绍
本方案做的是页面点击卡片跳转到详情预览的转场动画效果
效果图预览
使用说明
点击首页卡片跳转到详情页,再点击进入路由页面按钮,进入新的路由页面
实现思路
首页使用了一种视觉上看起来像是组件的转场动画,这种转场动画通常是通过组件的动态加载和切换来实现的,不是路由页面转场动画。
实现方案如下:
1、入场动画:采用stack布局,容器内有瀑布流卡片列表CardList和卡片详情页DetailPage(展开时是详情页,未展开是卡片组件)
build() {
Stack() {
this.CardList();
this.DetailPage();
}
}
2、入场动画:点击卡片后,记录当前被点击卡片在数组中的索引,DetailPage渲染被点击卡片组件,使用onAreaChange存储每个Card被点击时的位置、宽高信息,用于设置返回动画卡片组件的结束状态位置尺寸信息;
LazyForEach(this.dataSource, (item: CardData, index) => {
FlowItem() {
CardPage({
cardData: item})
.onClick(() => {
this.clickedCardIndex = index;
})
}
.onAreaChange((oldValue, newValue) => {
this.da