开天辟地 HarmonyOS(鸿蒙) - 动画: 一组件显示一组件消失时的过渡动画
开天辟地 HarmonyOS(鸿蒙) - 动画: 一组件显示一组件消失时的过渡动画
示例如下:
pages\animation\GeometryTransitionDemo.ets
/*
* 一组件显示一组件消失时的过渡动画
*
* 用于一个组件消失的同时,另一个组件显示的场景,并且两个组件的几何形状不一样(比如他们的大小不一样),并在这个过程中执行一段丝滑的过渡动画效果
*/
import { TitleBar } from '../TitleBar'
@Entry
@Component
struct GeometryTransitionDemo {
build() {
Column({ space: 10 }) {
TitleBar()
Tabs() {
TabContent() { MySample1() }.tabBar('基础').align(Alignment.Top)
}
.scrollable(true)
.barMode(BarMode.Scrollable)
}
}
}
@Component
struct MySample1 {
@State flag: boolean = true;
build() {
Column({space:10}) {
Button('button').width(100).height(30)
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.flag = !this.flag;
})
})
/*
* geometryTransition() - 指定一个标识(此标识相同的不同组件,在显示和消失时,他们的几何形状的变化会有一段过渡动画效果)
*
* 注:
* 1、先参看 TransitionDemo.ets 中的说明
* 2、如果几何形状没有变化,则用不到 geometryTransition()
* 3、以本例来说,要想几何形状的变化之间有过渡动画效果,除了指定 geometryTransition() 外
* 对 flag 的变化也要做动画处理(此处动画的时长对应的是几何形状变化的动画的时长),类似如下
* animateTo({ duration: 1000 }, () => {
* this.flag = !this.flag;
* })
*/
if (this.flag) {
Image($r('app.media.app_icon'))
.width(100)
.height(100)
.geometryTransition("group1")
.transition(TransitionEffect.OPACITY.animation({
duration: 3000,
curve: Curve.Ease
}))
} else {
Image($r('app.media.son'))
.width(200)
.height(200)
.geometryTransition("group1")
.transition(TransitionEffect.OPACITY.animation({
duration: 3000,
curve: Curve.Ease
}))
}
}
.width('100%')
.alignItems(HorizontalAlign.Start)
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2012-02-06 千呼万唤 HTML 5 (6) - 表单元素之 input 元素