HarmonyOS--属性动画和显示动画

动画-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参考 | 华为开发者联盟 (huawei.com)

在HarmonyOS的ArkUI开发框架中,动画主要分为两种类型:属性动画(Property Animation)和显示动画(Explicit Animation)。

属性动画

属性动画 是通过直接修改组件的样式属性并应用animation属性来实现动画效果。当开发者动态地更改一个组件(如Button、Image等)的尺寸、透明度、背景颜色等样式属性时,如果设置了相应的动画配置,ArkUI会自动填充这些属性变化过程中的每一帧画面,形成平滑的过渡效果。

例如,可以通过设置组件的animation属性来指定动画的执行方式,比如淡入淡出、大小变化等,并且可以控制动画的执行时长、缓动函数等参数。

TypeScript 复制代码
// ArkUI示例代码
//btn:动画start//  
Button('动画按钮')  
   .onClick(() => {  
      if (this.flag) {  
         this.btnWidth = 200  
         this.btnHeight = 50  
      }  
      else {  
         this.btnWidth = 100  
         this.btnHeight = 20  
      }  
      this.flag = !this.flag  // 调转标志位 实现动画循环  
  
   })  
   .width(this.btnWidth) // 改变宽度  
   .height(this.btnHeight) // 改变高度  
   .animation({  // 动画属性  
      duration:2000,  
      curve: Curve.EaseOut,  
      iterations: 1,  
      playMode: PlayMode.Normal,  
      tempo:2  
   })  
//btn:动画end//

但是需要注意的是,animation属性最好写在整体属性之后,尤其是设置动画的属性之后,属性动画-动画-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参考 | 华为开发者联盟 (huawei.com)

显式动画

显示动画 则是通过调用全局动画方法如animateTo来明确指定一组动画操作。这种情况下,开发者需要手动编写动画序列,并明确开始和结束的状态,以及动画的具体行为。

TypeScript 复制代码
// ArkUI 示例代码(伪代码)
import { animateTo } from '@ohos/anim';

// 使用显式动画改变组件宽度
async function animateWidthChange(elementRef) {
  const startSize = elementRef.getWidth();
  const endSize = 200;

  // 创建动画参数对象
  const params = {
    duration: 500,
    timingFunction: 'linear',
    curve: '', // 可选的贝塞尔曲线
    delay: 0,
    iterations: 1,
    fillMode: '',
    direction: '',
    animations: [{
      property: 'width',
      value: [startSize, endSize],
    }],
  };

  // 执行动画
  await animateTo(elementRef, params);
}

总结来说,在ArkUI中,属性动画主要用于简单直观地处理单个或多个样式属性的变化,而显示动画则提供了更多的自定义选项和精细控制,能够创建更复杂的动画场景。

相关推荐
前端 贾公子2 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐2 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
前端小万5 分钟前
一次紧急的现场性能问题排查
前端·性能优化
一只乔哇噻8 分钟前
java后端工程师进修ing(研一版 || day41)
java·开发语言·学习·算法
钮钴禄·爱因斯晨18 分钟前
深入剖析LLM:从原理到应用与挑战
开发语言·人工智能
excel21 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手22 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360224 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep24 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo26 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端