开天辟地 HarmonyOS(鸿蒙) - 动画: 显式动画

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

开天辟地 HarmonyOS(鸿蒙) - 动画: 显式动画

示例如下:

pages\animation\AnimationToDemo.ets

/*
 * 显式动画
 *
 * animateTo() - 显式动画,建议使用 this.getUIContext().animateTo()
 *   指定动画效果,以及需要做动画的变量的目标值
 *   注:做动画的变量只有应用于 width, height, backgroundColor, opacity, scale, rotate, translate 等属性才会有效
 * animateToImmediately() - 高优先级的 animateTo()
 *
 * 关于动画效果请参见 AnimationDemo.ets 中的说明
 */

import { TitleBar } from '../TitleBar'

@Entry
@Component
struct AnimationToDemo {

  build() {
    Column({ space: 10 }) {
      TitleBar()
      Tabs() {
        TabContent() { MySample1() }.tabBar('animateTo()').align(Alignment.Top)
        TabContent() { MySample2() }.tabBar('renderFit()').align(Alignment.Top)
        TabContent() { MySample3() }.tabBar('animateToImmediately()').align(Alignment.Top)
      }
      .scrollable(true)
      .barMode(BarMode.Scrollable)
    }
  }
}

@Component
struct MySample1 {

  @State translateY:number = 0

  build() {
    Column({space:20}) {

      Column().width(100).height(100).backgroundColor(Color.Red)
        .translate({ y: this.translateY })

      Button('button')
        .onClick(() => {
          /*
           * animateTo() - 显式动画,建议使用 this.getUIContext().animateTo()
           */
          this.getUIContext().animateTo({ // 关于动画效果请参见 AnimationDemo.ets 中的说明
            duration: 1000,
            tempo: 1.0,
            curve: Curve.Linear,
            delay: 0,
            iterations: 1,
            playMode: PlayMode.Normal,
            expectedFrameRateRange: {
              min: 20,
              max: 120,
              expected: 90,
            },
            onFinish: () => {
              this.translateY = 0
            }
          }, () => { // 设置需要做动画的变量的目标值
            this.translateY = 200
          })
        })
    }
  }
}

@Component
struct MySample2 {

  @State myWidth:number = 100
  @State myHeight:number = 50

  build() {
    Column({space:20}) {

      /*
       * renderFit() - 在宽高变化的动画中,组件内容的填充方式(RenderFit 枚举)
       *   CENTER, TOP, BOTTOM, LEFT, RIGHT, TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, RESIZE_FILL, RESIZE_CONTAIN, RESIZE_CONTAIN_TOP_LEFT, RESIZE_CONTAIN_BOTTOM_RIGHT, RESIZE_COVER, RESIZE_COVER_TOP_LEFT
       */

      Text("Text").fontSize(16)
        .width(this.myWidth)
        .height(this.myHeight)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Center)

      Text("Text").fontSize(16)
        .width(this.myWidth)
        .height(this.myHeight)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Center)
        .renderFit(RenderFit.CENTER)

      Text("Text").fontSize(16)
        .width(this.myWidth)
        .height(this.myHeight)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Center)
        .renderFit(RenderFit.RESIZE_FILL)

      Button('button')
        .onClick(() => {
          this.getUIContext().animateTo({
            duration: 1000,
            iterations: -1,
            playMode: PlayMode.Alternate,
          }, () => {
            this.myWidth = 200
            this.myHeight = 100
          })
        })
    }
  }
}

@Component
struct MySample3 {

  @State translateY:number = 0

  build() {
    Column({space:20}) {

      Column().width(100).height(100).backgroundColor(Color.Red)
        .translate({ y: this.translateY })

      /*
       * animateToImmediately() - 高优先级的 animateTo()
       */
      Button('button')
        .onClick(() => {
          animateToImmediately({
            duration: 1000,
            iterations: -1,
            playMode: PlayMode.Alternate,
          }, () => {
            this.translateY = 200
          })
        })
    }
  }
}

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

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