鸿蒙开发学习:动画

简介: 鸿蒙原生动画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) => {
    })
}


目录
打赏
0
4
4
0
80
分享
相关文章
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
151 92
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
52 23
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
45 14
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
38 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
鸿蒙开发难题多到崩溃?然而 10 亿终端暗藏财富密码-卓伊凡
鸿蒙开发难题多到崩溃?然而 10 亿终端暗藏财富密码-卓伊凡
41 5
鸿蒙开发难题多到崩溃?然而 10 亿终端暗藏财富密码-卓伊凡
鸿蒙NEXT开发App相关工具类(ArkTs)
这段代码展示了一个名为鸿蒙NEXT开发 `AppUtil` 的工具类,主要用于管理鸿蒙应用的上下文、窗口、状态栏、导航栏等配置。它提供了多种功能,例如设置灰阶模式、颜色模式、字体类型、屏幕亮度、窗口属性等,并支持获取应用包信息(如版本号、包名等)。该工具类需在 UIAbility 的 `onWindowStageCreate` 方法中初始化,以便缓存全局变量。代码由鸿蒙布道师编写,适用于鸿蒙系统应用开发,帮助开发者更便捷地管理和配置应用界面及系统属性。
鸿蒙开发:使用Ellipse绘制椭圆
除了使用Ellipse组件可以一个椭圆之外,我们还可以使用Canvas来绘制一个椭圆,但是相对来说,还是没有Ellipse组件高效,所以,如果说Ellipse组件能够满足需求,还是以Ellipse组件为主。
鸿蒙开发:使用Ellipse绘制椭圆
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
234 1
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转
准备好鸿蒙开发环境后,接下来就需要创建鸿蒙项目,掌握项目的创建过程以及配置。项目创建好后,需要把项目运行在模拟器上,鸿蒙的模拟和安卓模拟器有些不同,鸿蒙提供远程模拟器和本地模拟器,通过登录华为账号登录在线模拟器,使用DevEco Studio可将项目部署到远程模拟器中。
1351 1
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(下)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
405 0
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(下)