开天辟地 HarmonyOS(鸿蒙) - 动画: 关键帧动画

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

开天辟地 HarmonyOS(鸿蒙) - 动画: 关键帧动画

示例如下:

pages\animation\KeyframeAnimateDemo.ets

/*
 * 关键帧动画
 *
 * this.getUIContext().keyframeAnimateTo() - 关键帧动画
 *   可以指定动画中,不同时间点的关键帧的状态
 */

import { TitleBar } from '../TitleBar'

@Entry
@Component
struct KeyframeAnimateDemo {

  @State myScale: number = 1.0;

  build() {
    Column({ space: 10 }) {
      TitleBar()

      Column().width(100).height(100).backgroundColor(Color.Red)
        .scale({ x: this.myScale, y: this.myScale })
        .onClick(() => {
          this.myScale = 1;
          /*
           * this.getUIContext().keyframeAnimateTo() - 关键帧动画
           *   param - 动画参数(KeyframeAnimateParam 对象)
           *     delay - 动画的延迟播放时间(单位:毫秒)
           *     iterations - 动画的播放次数(0 代表无动画,-1 代表无线循环)
           *     onFinish - 动画播放完成后的回调
           *   keyframes - 关键帧状态集合(KeyframeState 对象集合)
           *     duration - 此关键帧时间点与上一个关键帧时间点之间的时长(单位:毫秒)
           *     curve - 动画曲线,即动画的缓动类型(参见 AnimationDemo.ets 中的说明)
           *     event - 在此处指定此关键帧需要达到的状态
           */
          this.getUIContext().keyframeAnimateTo({
            delay: 0,
            iterations: 3,
            onFinish: () => {

            }
          }, [
            {
              // 第 1 段关键帧动画时长 200 毫秒,scale 1 到 1.5 做动画
              duration: 200,
              event: () => {
                this.myScale = 1.5;
              }
            },
            {
              // 第 2 段关键帧动画时长 2000 毫秒,scale 1.5 到 1 做动画
              duration: 2000,
              event: () => {
                this.myScale = 1;
              }
            }
          ]);
        })
    }
  }
}

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

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