鸿蒙开发学习:动画

简介: 鸿蒙原生动画API使用


页面分类动画

显示动画

function animateTo(value: AnimateParam, event: () => void): void;

代码如下:(实现属性变化引发的动画)

@Entry
@Component
struct Animate_Page1 {
  @State boxWidth: number = 100;
  @State boxHeight: number = 100;
  @State flag: boolean = true;
  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      Column() {
        Row() {
        }
        .width(this.boxWidth)
        .height(this.boxHeight)
        .backgroundColor(Color.Red)
      }
      .height('100%')
      .width('100%')
      .justifyContent(FlexAlign.Center)
      Button("动画")
        .width(50)
        .height(50)
        .margin(20)
        .onClick(() => {
          animateTo({
            duration: 1000 //动画时间
          }, () => {
            if (this.flag) {
              this.boxWidth = 240;
              this.boxHeight = 240;
            } else {
              this.boxWidth = 100;
              this.boxHeight = 100;
            }
            this.flag = !this.flag;
          })
        })
    }
    .width('100%')
  }
}

常见属性

  • duration:动画执行时间
  • iterations:动画播放次数,-1表示无限次播放
  • curve:播放曲线
  • playMode:动画播放模式
  • delay:动画延迟播放时间

属性动画

使用animation属性去定义动画的属性,需要注意的点是,如果在animation方法后定义的属性,在改变时将不会触发动画。

@Entry
@Component
struct Animate_Page2 {
  @State boxWidth: number = 100;
  @State boxHeight: number = 100;
  @State flag: boolean = true;
  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      Column() {
        Row() {
        }
        .width(this.boxWidth)
        .height(this.boxHeight)
        .backgroundColor(Color.Red)
        .animation({
          duration: 1000
        })
      }
      .height('100%')
      .width('100%')
      .justifyContent(FlexAlign.Center)
      Button("动画")
        .width(50)
        .height(50)
        .margin(20)
        .onClick(() => {
          if (this.flag) {
            this.boxWidth = 240;
            this.boxHeight = 240;
          } else {
            this.boxWidth = 100;
            this.boxHeight = 100;
          }
          this.flag = !this.flag;
        })
    }
    .width('100%')
  }
}

常见属性

  • duration:动画执行时间
  • iterations:动画播放次数,-1表示无限次播放
  • curve:播放曲线
  • playMode:动画播放模式
  • delay:动画延迟播放时间

弹簧曲线动画(springCurve属性)

实现组件的左右抖动

import curves from '@ohos.curves';
@Entry
@Component
struct Animate_Page3 {
  @State message: string = '登录框';
  @State translateX: number = 0;
  @State translateY: number = 0;
  jumpWithSpeed(velocity: number) {
    this.translateX = -10;
    animateTo({
      duration: 2000,
      //速度(velocity)质量(mass)刚度(stiffness)阻尼(damping)
      curve: curves.springCurve(velocity, 1, 1, 1)
    }, () => {
      this.translateX = 0;
    })
  }
  build() {
    Column() {
      Row() {
        Text(this.message).fontSize(40).width('100%').textAlign(TextAlign.Center)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Gray)
      .margin({
        top: 20,
        bottom: 50
      })
      .translate({
        x: this.translateX,
        y: this.translateY
      })
      Row() {
        Button("jump10").width(100).onClick(() => {
          this.jumpWithSpeed(10)
        })
        Button("jump200").width(100)
          .onClick(() => {
            this.jumpWithSpeed(200)
          })
      }.justifyContent(FlexAlign.SpaceAround)
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

路径动画(motionPath属性)

需要在改变的外层轮廓添加animation属性,才能实现。需要注意点坐标需要乘2.

@Entry
@Component
struct Animate_Page4 {
  @State message: string = 'Hello World';
  @State flag: boolean = true;
  build() {
    Column() {
      Row() {
        Text(this.message).fontSize(20).width('100%').textAlign(TextAlign.Center)
      }
      .width(100)
      .height(100)
      .backgroundColor(Color.Gray)
      .margin(10)
      .onClick(() => {
        this.flag = !this.flag;
      })
      .motionPath({
        path: "M start.x start.y L10 400 L400 400 Lend.x end.y",
        from: 0,
        to: 1,
        rotatable: false//控制组件是否沿运动方向旋转
      })
    }
    .height('100%')
    .width('100%')
    .alignItems(this.flag ? HorizontalAlign.Start : HorizontalAlign.End)
    .animation({
      duration: 2000
    })
  }
}

页面间动画-放大缩小视图

关键属性:sharedTransition属性

sharedTransition属性中的type类型包含Exchange和Static两种,详细简介如下图:

实现两个页面之间的图片放大缩小的方式跳转

Animate_Page5:

import router from '@ohos.router';
@Entry
@Component
struct Animate_Page5 {
  @State message: string = 'Hello World';
  build() {
    Column() {
      Image($r('app.media.app_icon'))
        .width(50)
        .height(50)
        .margin({
          top: 30,
          bottom: 30
        })
        .sharedTransition("icon1", {
          duration: 1000,
          type: SharedTransitionEffectType.Exchange
        })
      Button("点我跳转")
        .width(200)
        .fontSize(20)
        .fontColor(Color.White)
        .onClick((event: ClickEvent) => {
          router.pushUrl({
            url: "pages/Animate_Page5_Image"
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

Animate_Page5_Image:

import router from '@ohos.router';
@Entry
@Component
struct Animate_Page5_Image {
  @State message: string = 'Hello World';
  build() {
    Column() {
      Image($r('app.media.app_icon'))
        .width(50)
        .height(50)
        .onClick(() => {
          router.back();
        })
        .sharedTransition("icon1")
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

实现效果:

页面转场动画

可以设置转场动画方向和透明度等属性

pageTransition() {
    //页面打开时候的动画
  PageTransitionEnter({})
    .onEnter((type: RouteType, progress: number) => {
    })
    //页面离开时候的动画
  PageTransitionExit({})
    .onExit((type: RouteType, progress: number) => {
    })
}


相关文章
|
1天前
|
数据处理
鸿蒙开发:ArkTs字符串string
字符串类型是开发中非常重要的一个数据类型,除了上述的方法概述之外,还有String对象,正则等其他的用处,我们放到以后得篇章中讲述。
48 19
|
1天前
|
存储 Java 编译器
鸿蒙开发:ArkTs数据类型
最后一点是,ArkTS不支持any和unknown类型,需要显式指定具体类型,否则会报异常,具体原因是,这是ArkTS的特性之一,那就是使用静态类型;如果程序采用静态类型,即所有类型在编译时都是已知的,那么开发者就能够容易理解代码中使用了哪些数据结构。同时,由于所有类型在程序实际运行前都是已知的,编译器可以提前验证代码的正确性,从而可以减少运行时的类型检查,有助于提升性能。
鸿蒙开发:ArkTs数据类型
|
1天前
|
数据安全/隐私保护
鸿蒙开发:申请授权权限
还是那句话,在申请权限的时候,应当严格遵循最小权限原则,结合动态申请和清晰的用户引导,避免给用户带来不好体验,同样,遵循,在使用到权限的时候再去申请,切记,过前进行申请。
|
1天前
|
安全 API 数据安全/隐私保护
鸿蒙开发:权限管理之授权方式
在实际的应用开发中,合理选择 system_grant和user_grant是平衡功能实现与用户隐私的关键,system_grant 适用于基础功能,简化开发流程;user_grant 用于敏感操作,需重视用户体验和隐私合规。
鸿蒙开发:权限管理之授权方式
|
2天前
|
开发框架 缓存 自然语言处理
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
20 3
|
2天前
|
IDE API 开发工具
HarmonyOS NEXT-Flutter混合开发之鸿蒙-代码实践
本文介绍了在Flutter三端分离模式下,将纯血鸿蒙混入Flutter项目的实践经验。基于咸鱼团队的flutter_boost和自定义FlutterPlugin实现,涵盖环境搭建、Flutter模块创建、flutter_boost集成、鸿蒙侧适配、双端通信及原生调用等内容。详细说明了Flutter与鸿蒙间的页面跳转、数据传递及方法调用的实现方式,为开发者提供参考。总结指出,通过管理页面栈和实现双端交互,可满足常规开发需求。
|
3天前
|
存储 Java 开发者
鸿蒙开发:ArkTs语言变量和常量
变量是一种用于存储数据的容器,并且其存储的数据值可以在程序执行过程中被改变,变量通常有一个名字(标识符),用于在程序中引用它。
|
3天前
|
前端开发 JavaScript 程序员
鸿蒙开发:console日志输出
针对初学者而言,大家只需要掌握住日志打印即可,等到了鸿蒙应用开发的时候,还有一个鸿蒙原生的打印工具HiLog,到时,我们也会详细的去讲述,也会针对HiLog,封装一个通用的工具类。
36 11
鸿蒙开发:console日志输出
|
3天前
|
IDE 程序员 编译器
鸿蒙开发:ArkTs语言注释
关于注释,有一点需要注意,那就是,注释,不会被编译器或解释器执行,而本小节的重点并不是简单的教大家注释如何去写,而是在实际的项目中,我们能够真正的把注释投入到实际的开发中。
44 18
鸿蒙开发:ArkTs语言注释
|
3天前
|
传感器 存储 安全
鸿蒙开发:权限管理之权限声明
本文,主要简单概述了为什么要有权限管理,以及权限管理的声明原则,这些都是基本的概念内容,大家做为了解即可,重要的是怎么声明权限,在什么位置声明权限,这一点需要掌握。
47 16
鸿蒙开发:权限管理之权限声明

热门文章

最新文章

  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 2
    uniapp 极速上手鸿蒙开发
  • 3
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 4
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
  • 5
    鸿蒙开发:了解@Builder装饰器
  • 6
    鸿蒙开发:wrapBuilder传递参数
  • 7
    鸿蒙web加载本地网页资源异常
  • 8
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 9
    鸿蒙H5离线包技术分享
  • 10
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡