94.HarmonyOS NEXT动画系统实现教程:深入理解FuncUtils

embedded/2025/3/17 5:27:31/

温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!

HarmonyOS NEXT动画系统实现教程:深入理解FuncUtils

文章目录

  • HarmonyOS NEXT动画系统实现教程:深入理解FuncUtils
    • 1. 动画系统基础
      • 1.1 核心概念
      • 1.2 动画执行函数解析
    • 2. 动画实现详解
      • 2.1 参数说明
      • 2.2 动画曲线类型
    • 3. 角度计算功能
      • 3.1 角度标准化函数
      • 3.2 角度计算原理
    • 4. 实践应用
      • 4.1 基本动画示例
      • 4.2 复杂动画组合
    • 5. 最佳实践
      • 5.1 动画性能优化
      • 5.2 错误处理
    • 6. 调试与优化
      • 6.1 动画调试
      • 6.2 常见问题解决

1. 动画系统基础

1.1 核心概念

概念说明应用场景
动画持续时间动画执行的时长控制动画速度
动画曲线动画的变化规律定义动画效果
动画回调动画执行的具体内容实现状态变化

1.2 动画执行函数解析

export function runWithAnimation(fn: Function,duration: number = ImageViewerConstants.ANIMATE_DURATION,curve: Curve = Curve.Smooth): void {animateTo({ duration: duration, curve: curve }, () => {fn();})
}

2. 动画实现详解

2.1 参数说明

参数类型默认值说明
fnFunction-动画执行的回调函数
durationnumberANIMATE_DURATION动画持续时间
curveCurveCurve.Smooth动画曲线类型

2.2 动画曲线类型

// 常用动画曲线
const curves = {Smooth: Curve.Smooth,    // 平滑过渡Linear: Curve.Linear,    // 线性变化EaseIn: Curve.EaseIn,   // 渐入EaseOut: Curve.EaseOut  // 渐出
};

3. 角度计算功能

3.1 角度标准化函数

export function simplestRotationQuarter(angle: number): number {const FULL_CIRCLE = 360;const QUADRANT_DEGREES = 90;const BOUNDARY_OFFSET = 44.5;// 标准化角度let normalizedAngle = angle % FULL_CIRCLE;// 计算象限const QUADRANT = Math.floor((Math.abs(normalizedAngle) + BOUNDARY_OFFSET) / QUADRANT_DEGREES) % 4;// 获取标准角度const standardRotations = [0, 90, 180, 270];let rotation = standardRotations[QUADRANT];// 保持方向let finalRotation = rotation * (angle >= 0 ? 1 : -1);return finalRotation || 0;
}

3.2 角度计算原理

  1. 角度标准化

    • 使用取模运算限制在360度内
    • 处理负角度情况
    • 保持旋转方向
  2. 象限确定

    • 使用偏移量处理边界情况
    • 计算所在象限
    • 映射到标准角度

4. 实践应用

4.1 基本动画示例

// 简单的淡入动画
runWithAnimation(() => {this.opacity = 1;
}, 300, Curve.EaseIn);// 旋转动画
runWithAnimation(() => {this.rotation = simplestRotationQuarter(this.currentAngle);
});

4.2 复杂动画组合

// 组合多个动画效果
function complexAnimation() {runWithAnimation(() => {// 同时改变多个属性this.scale = 1.2;this.opacity = 0.8;this.rotation = 45;}, 500, Curve.Smooth);
}

5. 最佳实践

5.1 动画性能优化

  1. 合理使用动画
// 避免频繁触发
let isAnimating = false;
function safeAnimation() {if (isAnimating) return;isAnimating = true;runWithAnimation(() => {// 动画内容}, 300, Curve.Smooth);setTimeout(() => {isAnimating = false;}, 300);
}
  1. 动画时长控制
// 根据设备性能调整动画时长
const duration = performanceMode ? 200 : 300;
runWithAnimation(fn, duration);

5.2 错误处理

function safeRunAnimation(fn: Function) {try {runWithAnimation(() => {fn();});} catch (error) {console.error('Animation failed:', error);// 直接执行,不使用动画fn();}
}

6. 调试与优化

6.1 动画调试

  1. 状态监控
runWithAnimation(() => {this.value = newValue;console.log('Animation value:', this.value);
});
  1. 性能分析
const startTime = Date.now();
runWithAnimation(() => {// 动画内容
}, 300, Curve.Smooth);
console.log('Animation duration:', Date.now() - startTime);

6.2 常见问题解决

问题原因解决方案
动画卡顿执行时间过长减少动画时长,简化动画内容
动画不流畅帧率过低使用简单的动画曲线,减少同时动画数量
动画不生效参数错误检查参数类型和值范围

通过合理使用动画系统,可以为应用添加流畅的交互效果。在实际开发中,要注意性能优化和错误处理,确保动画效果既美观又流畅。同时,合理使用角度计算功能,可以实现准确的旋转效果。


http://www.ppmy.cn/embedded/173258.html

相关文章

LLM论文笔记 25: Chain-of-Thought Reasoning without Prompting

Arxiv日期:2024.5.31机构:Google DeepMind 关键词 cot-decoding推理路径pretrain 核心结论 1. LLMs 不需要prompting就可以生成链式推理路径,prompting只是将这些能力显性化的一种手段 2. cot path 往往与更高的model confidence相关&…

DeepSeek-R1:开源大模型的技术革命与行业影响分析

一、发布背景与开发者定位 DeepSeek-R1由幻方量化旗下AI公司深度求索(DeepSeek)于2025年1月20日正式发布,标志着中国AI公司在生成式大模型领域取得突破性进展。该模型的推出具有多重战略意义: 技术突破性:作为全球首…

使用 Docker 部署前端项目全攻略

文章目录 1. Docker 基础概念1.1 核心组件1.2 Docker 工作流程 2. 环境准备2.1 安装 Docker2.2 验证安装 3. 项目配置3.1 项目结构3.2 创建 Dockerfile 4. 构建与运行4.1 构建镜像4.2 运行容器4.3 访问应用 5. 使用 Docker Compose5.1 创建 docker-compose.yml5.2 启动服务5.3 …

数学建模历程之初见

第一次接触数学建模是在上大学前,当时只是听过。起源于我在大学的老乡群里聊天,由于当时年轻有点傻,说的话太多了,什么都问哈哈哈哈哈。 后来有个学长从老乡群里加我,问我怎么话那么多,你们懂当时对我幼小…

从Online Softmax到FlashAttention

目录 前言0. Abstract1. The Self-Attention2. (Safe) Softmax3. Online Softmax4. FlashAttention结语参考 前言 最近在学习 FlashAttention,看到一份不错的手稿分享下🤗 manuscript:From Online Softmax to FlashAttention 0. Abstract Fl…

golang开发支持onlyoffice的token功能

一直都没去弄token这块,想着反正docker run的时候将jwt置为false即可。 看了好多文章,感觉可以试试,但是所有文件几乎都没说思路。 根据我的理解和成功的调试,思路是: 我们先定义2个概念,一个是文档下载…

电子招采软件系统,如何实现10年可追溯审计

一、在当前经济环境下,中小企业面临着巨大的生存压力,传统产业的数字化转型迫在眉睫。AI技术为企业的低成本高效发展提供了新机会,混合办公成为新常态,数据安全法的深入落实则进一步推动企业重视数据安全。区块链存证技术凭借独特…

Mac下安装Zed以及Zed对MCP(模型上下文协议)的支持

Zed是当前新流行的一种编辑器,支持MCP(模型上下文协议) Mac下安装Zed比较简单,直接有安装包,在这里: brew install --cask zedMac Monterey下是可以安装上的,亲测有效。 配置 使用CtrlShiftP…