帧动画，也称为帧序列动画，是通过将一系列图像（帧）按顺序快速播放来创建动画效果的技术。每一帧都是动画中的一个静态图像，连续播放这些帧就形成了动态效果。通过返回应用onFrame逐帧回调的方式，让开发者在应用侧的每一帧都可以设置属性值，从而实现设置了该属性值对应组件的动画效果。相比于属性动画，开发者可感知动画的过程，实时修改UI侧的值，具有事件可实时响应、可暂停的优点，但性能上不如属性动画。

在HarmonyOS中，帧动画一般情况下，主要涉及下面的操作：

接下来分享关于帧动画的具体实现过程，本文主要是通过使用animator实现动画效果和使用animator实现小球抛物运动来做示例演示。

引入相关依赖，具体如下所示：

import { AnimatorOptions, AnimatorResult } from '@kit.ArkUI';

创建执行动画的对象，具体如下所示：

// 创建动画的初始参数
let options: AnimatorOptions = {                        
   duration: 1500,                               
   easing: "friction",                        
   delay: 0,                           
   fill: "forwards",                                  
   direction: "normal",                                  
   iterations: 2,                                        
   // 动画onFrame 插值首帧值                                    
   begin: 200.0,                                         
   // 动画onFrame 插值尾帧值                                    
   end: 400.0                                            
}; 
let result: AnimatorResult = this.getUIContext().createAnimator(options);
   // 设置接收到帧时回调，动画播放过程中每帧会调用onFrame回调
    result.onFrame = (value: number) => {

}

动画执行完成后手动释放AnimatorResult对象，具体如下所示：

// 释放动画对象 
result = undefined;

定义要做动画的组件，具体如下所示：

Button()
  .width(60)
  .height(60)
  .translate({ x: this.translateX, y: this.translateY })

然后在onPageShow中，创建AnimatorResult对象，具体如下所示：

onPageShow(): void {
    //创建animatorResult对象
    this.animatorOptions = this.getUIContext().createAnimator(options);
    this.animatorOptions.onFrame = (progress: number) => {
    this.translateX = progress;
    if (progress > this.topWidth && this.translateY < this.bottomHeight) {
       this.translateY = Math.pow(progress - this.topWidth, 2) * this.g;
    }
 }
 //动画取消时执行方法
 this.animatorOptions.onCancel = () => {
    this.animatorStatus = '取消';
 }
 //动画完成时执行方法
 this.animatorOptions.onFinish = () => {
    this.animatorStatus = '完成';
 }
 //动画重复播放时执行方法
 this.animatorOptions.onRepeat = () => {

 }
}

定义动画播放，重置，暂停的按钮，具体如下所示：

Button('播放').onClick(() => {
  this.animatorOptions?.play();
  this.animatorStatus = '播放中'
}).width(80).height(35)
Button("重置").onClick(() => {
  this.translateX = 0;
  this.translateY = 0;
}).width(80).height(35)
Button("暂停").onClick(() => {
  this.animatorOptions?.pause();
  this.animatorStatus = '暂停'
}).width(80).height(35)

在页面隐藏或销毁的生命周期中释放动画对象，避免内存泄漏，具体如下所示：

onPageHide(): void {
  this.animatorOptions = undefined;
}

除了上面基本的帧动画功能，开发使用者还可以根据应用的需求自定义帧动画，比如下面的操作：

不用多说，就可以看出帧动画是HarmonyOS开发中的一项基本功能，它为应用提供了丰富的视觉效果和用户互动。通过本文的介绍，大家应该都了解了如何在HarmonyOS应用中实现帧动画，以及后面的开发中也会运用帧动画相关的技术点来实现动画效果。随着技术的不断发展，帧动画将在HarmonyOS生态中继续扮演重要的角色和地位，为用户带来更加丰富和好用的体验。

HarmonyOS开发：关于帧动画使用分享

目录引言帧动画技术概述关于帧动画实现帧动画animator实现动画效果animator实现小球抛物运动自定义帧动画结束语引言在移动开发中，帧动画是移动应用中一种常见的动画形式，通过连续播放一系列静态图像来创建动画效果，而且随着用户需求的越来越复杂，帧动画的应用也会越来越广泛。在HarmonyOS中，帧动画的使用不仅可以提升应用的交互体验，还能增强视觉效果，是鸿蒙原生开发中的关键技术点。那么本文就来

前端

本文介绍了HarmonyOS应用中帧动画的实现方法，包括帧动画的基本概念、操作步骤及代码示例。通过animator实现动画效果和小球抛物运动，展示了帧动画的应用及自定义方式，提升应用交互与视觉体验。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

HarmonyOS开发：关于帧动画使用分享

HarmonyOS开发：关于帧动画使用分享

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐