当前位置：首页 > 编程日记 > 正文

【HarmonyOS开发】拖拽动画的实现

编程日记 2023-12-14 22:49:28

动画的原理是在一个时间段内，多次改变UI外观，由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数，帧率越高则动画就会越流畅。
ArkUI中，产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律（即曲线）等参数。当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。

1、动画分类

输入图片说明

2、常见动画的使用

通过改变元素的宽高、位置、布局等触发动画
官方文档-动画

// 显式动画 https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-explicit-animation-0000001281480722
animateTo(value: AnimateParam, event: () => void): void
// 属性动画 https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-animatorproperty-0000001333321185 
animation(value: AnimateParam)
// 转场动画-必须和animateTo配合使用 https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-page-transition-animation-0000001281201178
transition(value: TransitionOptions)
transition({ type: TransitionType.All, scale: { x: 0, y: 0 } }) // 全部使用一种动画
transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 }, opacity: 0 }) // 进入/插入动画
transition({ type: TransitionType.Delete, rotate: { x: 0, y: 0, z: 1, angle: 360 } }) // 移出/删除动画

3、矩阵动画的使用

这一块我们重点关注几个常用的属性

3.1 translate（拖拽动画实现的主要属性）

translate({x?: number, y?: number, z?: number}): Object

当x,y坐标为0时，则意味着，每个元素按照各自的位置进行排列（例如：grid、list、Stack等）。
因此，我们可以根据元素的下标index，通过一些算法来改变坐标的位置，从而实现拖拽动画，具体见代码

DOM的实现

// isStartDrag 为是否开始拖拽，当开始拖拽时，我们动态改变矩阵中元素的坐标
Grid() {
    ForEach(this.selected, (item: dataListType) => {
        GridItem() {
            Text(item.text).blockTextStyle(this.blockWidth)
        }
        .translate({
            x: this.isStartDrag ? this.geyCoodXY(index).x : 0,
            y: this.isStartDrag? this.geyCoodXY(index).y : 0
        })
        .animation({
            duration: DURATION, // 动画时长
            curve: Curve.Linear, // 动画曲线
            iterations: 1, // 播放次数
            playMode: PlayMode.Normal // 动画模式
        })
    })
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(16)
.rowsGap(16)
.editMode(true)  //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
.supportAnimation(true) // 开启动画

坐标改变的算法

  geyCoodXY(index) {
    const gridCol = this.getGridCol()
    let x = 0
    let y = 0
    if(this.insterIndex != -1) {
      if(index >= this.insterIndex) {
        // 判断是否需要换行
        // 需要取余如果等于0，则需要换行，需要进行下移和左移
        if(parseInt(((index) % gridCol).toString()) === gridCol - 1) {
          // 判断是否为当前列的最后一个
          if(this.options.type === 'object') {
            x = x - this.blockWidth * (gridCol - 1) - 16 * (gridCol - 2) - 19
            y = y + this.blockHeight - 16.5
          } else {
            x = x - this.blockWidth * (gridCol - 1) - 16 * (gridCol - 2) - 13
            y = y + this.blockHeight + 18
          }
        } else {
          // 默认右移
          x = x + 16 + this.blockWidth + 1
        }
      }

      if(!this.isStartDrag) {
        x = 0
        y = 0
      }
    }
    return {
      x: x,
      y: y
    }
  }

  /**
   * 获取Grid高度计算是否需要+1
   *     场景1：当前数组（data）长度小于列（colNum）的长度
   *     场景2：当前数组的长度等于拖拽前的长度 && 对数组长度%列长度区域不为0
   * */
  getGridNum(data) {
    let len = data.length
    let num = 0
    if(len < this.colNum) {
      num = 1
    }
    if(parseInt((len % this.colNum).toString()) !== 0 && this.editGridDataLength === len) {
      num = 1
    }
    return num
  }

  /**
   * 获取当前布局列数
   * 默认：文本COL_TEXT：4
   * 默认：图文COL_IMAGE_TEXT：3
   * */
  getGridCol() {
    return this.options.type === 'object' ? COL_IMAGE_TEXT : COL_TEXT
  }

3.2 scale

缩放函数，配合transform进行使用

scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object

3.3 rotate

旋转函数

rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object

3.4 transformPoint

坐标映射，可以将当前的变换效果作用到一个坐标点上。

源码地址：MeshObjectEdit

输入图片说明

4、注意点

4.1 Grid布局中的Item使用属性动画时，只能使用自带的curve，无法自定义

4.2 底层渲染问题

在开发拖拽动画时，发现png的图片在拖拽结束后，会出现图片闪动的不流畅问题，改为svg图片解决。因此通过大量的对比验证，确认为鸿蒙底层窜然问题。

HarmonyOS总结harmonyos华为

https://www.dkcj.cn/info/363.html

openharmony开发版应用安装签名

配置签名信息应用/服务在真机设备上运行，需要提前为应用/服务进行签名，DevEco Studio为开发者提供了自动化签名方案，可以一键完成应用/服务签名。具体操作如下：单击File > Project Structure > Project > Signing Configs界面勾选Automatically generate signature，等待自动签名完成即可，单击OK。如下图所示：说明。

编程日记2024/02/01 21:40:49

鸿蒙Harmony-页面路由（router）详解

慢慢理解世界，慢慢更新自己，希望你的每一个昨天，今天，和明天都会很快乐，你知道的，先好起来的从来都不是生活，而是你自己

编程日记2024/01/21 19:26:19

鸿蒙harmony--数据库sqlite详解

今天是1月20号星期六，早安，岁末大寒至，静后春归来。愿他乡故人，漂泊有归宿，前程有奔赴，愿人间不寒，温暖常伴，诸事顺利，喜乐长安。

编程日记2024/01/21 15:48:23

HarmonyOS 应用开发入门

HarmonyOS 应用有两种模型，分别是 FA（Feature Ability）模型和Stage模型。FA模型ArkTS应用（过时）JS应用（最新版IDE已不再支持）Stage模型ArkTS应用（推荐）应用模型的演进API 4-8 仅支持FA模型，API 9 后新增 Stage模型，是目前主推且会长期演进的模型，FA 暂时保留但不推荐。Stage模型的优点为复杂应用而设计支持多设备和多窗口形态平衡应用能力和系统管控成本对比传统FA模型和Stage模型。

编程日记2024/01/20 15:18:24

解决鸿蒙APP的内存泄漏

解决鸿蒙应用的内存泄漏问题需要开发者对鸿蒙框架和组件的生命周期有深入的了解，以确保资源能够在适当的时候得到释放。LeakCanary同样可以用于鸿蒙应用，它是一款流行的内存泄漏检测库，可以在应用运行时检测内存泄漏并提供详细的报告。使用这些工具来监测应用的内存使用情况，找到潜在的内存泄漏问题。在某些场景下，使用弱引用（WeakReference）可以帮助避免对对象的强引用，从而减少内存泄漏的可能性。通过模拟各种使用场景，找到潜在的内存泄漏问题。释放不再需要的资源，避免在组件销毁后仍然持有对它的引用。

编程日记2024/01/17 14:22:49

15.鸿蒙HarmonyOS App(JAVA)进度条与圆形进度条

/设置无限模式,运行查看动态效果。15.鸿蒙HarmonyOS App(JAVA)进度条与圆形进度条。//创建并设置无限模式元素。

编程日记2024/01/16 00:45:17

鸿蒙APP闪退的问题

以下是一些建议的步骤，可以帮助你定位和解决鸿蒙应用闪退的原因，希望对大家有所帮助。使用鸿蒙开发者工具中的调试功能，尝试在应用发生闪退的情况下进行调试。这可以帮助你实时观察应用的状态，查看变量的值，并找到可能的问题。如果你的应用使用版本控制工具（如Git），回退到之前的稳定版本，看看问题是否仍然存在。有时，一个小的更改可能导致应用闪退，因此查看最近的代码修改是很重要的。如果应用使用第三方库或依赖，确保它们的版本与应用的其他部分兼容。使用鸿蒙开发者工具提供的崩溃分析服务，分析应用的崩溃报告。

编程日记2024/01/15 18:00:06

鸿蒙Harmony-层叠布局（Stack）详解

我们总是为了太多遥不可及的东西去拼命，却忘了人生真正的幸福不过是灯火阑珊处的温暖，柴米油盐的充实，人生无论你赚的钱，是多还是少，经历的事情是好还是坏，都不如过好当下的每一天！

编程日记2024/01/14 22:40:18

HarmonyOS开发FA应用模型下多个页面的声明方式

HarmonyOS配套的IDE是DevEco Studio，目前的版本是3.1。官网可以直接下载。

编程日记2024/01/13 17:48:24

华为路由器OSPF动态链路路由协议配置

【代码】华为路由器OSPF动态链路路由协议配置。

编程日记2024/01/13 13:25:59

鸿蒙开发-ArkTS基础，它与TS区别在那？

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。说明：也就是前端开发过程中所有的js/ts语法大部分支持的，比如es6中的箭头函数-模板字符串-promise-async/await-数组对象方法- 注意：根据对下一代的Next版本的内部沟通，下一版本的ArkTs对类型最了更一步的限制。

编程日记2024/01/12 10:02:54

【HarmonyOS】装饰器下的状态管理与页面路由跳转实现

从今天开始，博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”，对于刚接触这项技术的小伙伴在学习鸿蒙开发之前，有必要先了解一下鸿蒙，从你的角度来讲，你认为什么是鸿蒙呢？它出现的意义又是什么？鸿蒙仅仅是一个手机操作系统吗？它的出现能够和Android和IOS三分天下吗？它未来的潜力能否制霸整个手机市场呢？抱着这样的疑问和对鸿蒙开发的好奇，让我们开始今天对ArkUI状态管理的掌握吧！

编程日记2024/01/07 13:08:26

OpenHarmony之消息机制实现

以上只是消息机制核外用户态的实现，最后会执行到系统调用以上的内容只是简单介绍了OpenHarmony之消息机制实现，没有具体到代码分析，移植等细节。要想成为一名鸿蒙高级开发，以上知识点是必须要掌握的，除此之外，还需要掌握一些鸿蒙应用开发相关的一些技术，需要我们共同去探索。

编程日记2024/01/06 12:00:05

HarmonyOS应用开发学习笔记包名、icon图标，应用名修改 UIAbility组件介绍、UIAbility启动模式、UIAbility组件基本用法

UIAbility组件是一种包含UI界面的应用组件，主要用于和用户交互。UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口；一个UIAbility组件中可以通过多个页面来实现一个功能模块。每一个UIAbility组件实例，都对应于一个最近任务列表中的任务。UIAbility声明:UIAbility编辑完成后，还需要在module.json5上声明，才能使用"name": "EntryAbility", // UIAbility组件的名称。

编程日记2024/01/06 11:59:20

HarmonyOS UI框架简介

HarmonyOSUI框架是一个用于构建跨设备应用的开发框架，它属于HarmonyOS系统架构的上层框架。该框架通过提供一系列的开发模型、声明式UI范式、系统API等，帮助开发者更高效地构建用户界面。在HarmonyOSUI框架中，开发语言目前主要支持arkts/TS语言。该框架通过自研的声明式UI范式，使开发者能够描述用户界面的状态和变化，而无需关注具体的实现细节。这种范式降低了学习成本，提高了开发效率。

编程日记2024/01/06 09:01:22

HarmonyOS 应用开发学习笔记 ets组件生命周期

官网文档里有一句话：一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期经木子测，自定义组件用@Entry修饰了不能触发（onPageShow、onPageHide、onBackPress ）回调index.ets 组件（入口组件）能触发 onPageShow、onPageHide、onBackPress、aboutToAppear、aboutToDisappear自定义组件ComponentA。

编程日记2024/01/05 12:15:55

是否需要跟上鸿蒙（OpenHarmony）开发岗位热潮？

自打华为2019年发布鸿蒙操作系统以来，网上各种声音百家争鸣。尤其是2023年发布会公布的鸿蒙4.0宣称不再支持Android，更激烈的讨论随之而来。本文没有宏大的叙事，只有基于现实的考量。

编程日记2024/01/03 11:58:19

OpenHarmony之HDF驱动框架

HDF最核心几大块：配置管理，驱动管理，对外服务，消息机制对外接口侧重于服务，消息，而不是设备节点，这个是很大的一个转变以上内容主要概括了《OpenHarmony之HDF驱动框架》基础知识，为了让大家更快的了解《OpenHarmony4.0&Next》，我特意邀请几位行业大佬，联合整理了一份思维导图提供大家参考学习，大家可以根据自己的情况借鉴：《做鸿蒙应用开发到底学习些啥？除了上面整理的思维导图以外，这里还特别整理的一份《鸿蒙 (Harmony OS)开发学习手册》给大家进行参考学习：一、入门必看。

编程日记2024/01/02 23:30:32