开天辟地 HarmonyOS(鸿蒙) - 动画: 一组件显示一组件消失时的过渡动画

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 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)
  }
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @   webabcd  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2012-02-06 千呼万唤 HTML 5 (6) - 表单元素之 input 元素
点击右上角即可分享
微信分享提示