【Harmony实战开发】鸿蒙动画效果实现案例

于 2024-07-25 14:10:26 发布
阅读量628 收藏 23
点赞数 13
分类专栏： 鸿蒙 前端 安卓 文章标签： harmonyos 华为 鸿蒙 前端 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maniujiaoyu/article/details/140687668
版权
鸿蒙 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
前端
2 篇文章 0 订阅
订阅专栏
安卓
2 篇文章 0 订阅
订阅专栏

鸿蒙动画效果

UI（用户界面）中包含开发者与设备进行交互时所看到的各种组件（如时间、壁纸等）。属性作为接口，用于控制组件的行为。例如，开发者可通过位置属性调整组件在屏幕上的位置。
属性值的变化，通常会引起UI的变化。动画可在UI发生改变时，添加流畅的过渡效果。如果不加入动画，属性将在一瞬间完成变化。造成突兀感的同时，容易导致用户失去视觉焦点。
在这里插入图片描述

动画的目的包括：

●使界面的过渡自然流畅。
●增强用户从界面获得的反馈感和互动感。
●在内容加载等场景中，增加用户的耐心，缓解等待带来的不适感。
●引导用户了解和操作设备。

在需要为UI变化添加过渡的场景，都可以使用动画，如开机、应用启动退出、下拉进入控制中心等。这些动画可向用户提供关于其操作的反馈，并有助于让用户始终关注界面。
ArkUI中提供多种动画接口（属性动画、转场动画等），用于驱动属性值按照设定的动画参数，从起始值逐渐变化到终点值。尽管变化过程中参数值并非绝对的连续，而是具有一定的离散性。但由于人眼会产生视觉暂留，所以最终看到的就是一个“连续“的动画。UI的一次改变称为一个动画帧，对应一次屏幕刷新。决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数，帧率越高则动画就会越流畅。ArkUI中，动画参数包含了如动画时长、动画曲线等参数。动画曲线作为主要因素，决定了属性值变化的规律。以线性动画曲线为例，在动画时长内，属性值将从起点值匀速变化到终点值。属性过快或过慢的变化，都可能带来不好的视觉感受，影响用户体验。因此动画参数特别是动画曲线，需要结合场景和曲线特点进行设计和调整。
动画接口驱动属性值按照动画参数决定的规律，从原来的状态连续过渡到新的状态，进而在UI上产生的连续视觉效果。本文将按照如下结构，提供各种动画的使用方法和注意事项，使开发者快速学习动画。

在这里插入图片描述

●属性动画：最基础的动画类型，按照动画参数逐帧驱动属性的变化，产生一帧帧的动画效果。

●转场动画：为组件在出现和消失时添加过渡动画。为了保证动画一致性，部分接口动画曲线已内置，不支持开发者自定义。

○不推荐在应用内使用UIAbility组合所有的界面：UIAbility是一个任务，会在多任务界面独立显示一个卡片，UIAbility之间的跳转是任务之间的跳转。以应用内查看大图的典型场景为例，不建议应用内调用图库的UIAbility去打开图片查看大图，会导致任务的跳转，图库的UIAbility也会加入多任务界面中。正确的方式是应用内构建大图组件，通过模态转场去调起大图组件，一个任务内的所有的界面都在一个UIAbility内闭环。

○导航转场中，应使用Navigation组件实现转场动画。过去的page+router方式在实现导航转场过程中，因为page和page之间相互独立，其联动动画效果受限。不仅容易导致页面之间的割裂，并且不支持一次开发多端部署。

●组件动画：组件提供默认动效（如List的滑动动效）便于开发者使用，同时部分组件还支持定制化动效。

●动画曲线：介绍传统曲线和弹簧曲线的特点和使用方式。动画曲线影响属性值的运动规律，进而决定界面的动画效果。

●动画衔接：介绍如何实现动画与动画之间、手势与动画之间的自然过渡。

●高阶动画效果：介绍模糊、大阴影和颜色渐变等高阶效果接口的使用方法。

1. 属性动画

1.1. 介绍

●可动画属性：
对于可动画属性，系统不仅提供通用属性，还支持自定义可动画属性。

○系统可动画属性：组件自带的支持改变UI界面的属性接口，如位置、缩放、模糊等。
○自定义可动画属性：ArkUI提供@AnimatableExtend装饰器用于自定义可动画属性。开发者可从自定义绘制的内容中抽象出可动画属性，用于控制每帧绘制的内容，如自定义绘制音量图标。通过自定义可动画属性，可以为ArkUI中部分原本不支持动画的属性添加动画。

●不可动画属性：zIndex、focusable等。

1.2. animation & animateTo

通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画。属性动画是最基础易懂的动画，ArkUI提供两种属性动画接口animateTo和animation驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画。

在这里插入图片描述

1.2.1. 使用animation产生属性动画

相比于animateTo接口需要把要执行动画的属性的修改放在闭包中，animation接口无需使用闭包，把animation接口加在要做属性动画的可动画属性后即可。animation只要检测到其绑定的可动画属性发生变化，就会自动添加属性动画，animateTo则必须在动画闭包内改变可动画属性的值从而生成动画。

import curves from '@ohos.curves'
​
@Entry
@Component
struct AnimationDemo {
  @State animate: boolean = false;
  // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度
  @State translateX: number = 0; // 组件二偏移量
  @State opacityValue: number = 1; // 组件二透明度
​
  // 第二步：将状态变量设置到相关可动画属性接口
  build() {
    Row() {
      // 组件一
      Column() {
      }
      .opacity(this.opacityValue)
      .rotate({ angle: this.rotateValue })
      // 第三步：通过属性动画接口开启属性动画
      .animation({ curve: curves.springMotion() })
      .backgroundColor('#317AF7')
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        this.animate = !this.animate;
        // 第四步：闭包内通过状态变量改变UI界面
        // 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画
        // 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画
        this.rotateValue = this.animate ? 90 : 0;
        // 组件二的offset属性发生变化，所以会给组件二添加offset偏移动画
        this.translateX = this.animate ? 50 : 0;
        // 父组件column的opacity属性有变化，会导致其子节点的透明度也变化，所以这里会给column和其子节点的透明度属性都加动画
        this.opacityValue = this.animate ? 0.6 : 1;
      })
​
      // 组件二
      Column() {
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#D94838')
      .borderRadius(30)
      .opacity(this.opacityValue)
      .translate({ x: this.translateX })
      .animation({ curve: curves.springMotion() })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在这里插入图片描述

1.2.2. 使用animateTo产生属性动画

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

animateTo接口参数中，value指定动画参数（包括时长、曲线等）event为动画的闭包函数，闭包内变量改变产生的属性动画将遵循相同的动画参数。

import curves from '@ohos.curves'
​
@Entry
@Component
struct AnimateToDemo {
  @State animate: boolean = false;
  // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度
  @State translateX: number = 0; // 组件二偏移量
  @State opacityValue: number = 1; // 组件二透明度
​
  // 第二步：将状态变量设置到相关可动画属性接口
  build() {
    Row() {
      // 组件一
      Column() {
      }
      .rotate({ angle: this.rotateValue })
      .backgroundColor('#317AF7')
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        animateTo({ curve: curves.springMotion() }, () => {
          this.animate = !this.animate;
          // 第三步：闭包内通过状态变量改变UI界面
          // 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画
          // 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画
          this.rotateValue = this.animate ? 90 : 0;
          // 组件二的透明度发生变化，所以会给组件二添加透度的动画
          this.opacityValue = this.animate ? 0.6 : 1;
          // 组件二的offset属性发生变化，所以会给组件二添加offset偏移动画
          this.translateX = this.animate ? 50 : 0;
        })
      })
​
      // 组件二
      Column() {
​
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#D94838')
      .borderRadius(30)
      .opacity(this.opacityValue)
      .translate({ x: this.translateX })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在这里插入图片描述

说明

●在对组件的位置大小的变化做动画的时候，由于布局属性的改变会触发测量布局，性能开销大。scale属性的改变不会触发测量布局，性能开销小。因此，在组件位置大小持续发生变化的场景，如跟手触发组件大小变化的场景，推荐适用scale。
●属性动画应该作用于始终存在的组件，对于将要出现或者将要消失的组件的动画应该使用转场动画。
●尽量不要使用动画结束回调。属性动画是对已经发生的状态进行的动画，不需要开发者去处理结束的逻辑。如果要使用结束回调，一定要正确处理连续操作的数据管理。

2. ImageAnimator 帧动画

提供逐帧播放图片的能力
ImageAnimator不是容器组件，也不需要传递参数，只需要设置属性即可

1.1.1常用属性

在这里插入图片描述

效果
在这里插入图片描述

思路：

1.创建符合要求的数组 ImageFrameInfo
2.渲染ImageAnimator组件

3.1.images() 指定 要渲染的帧动画 数组
2.duration()指定动画的切换时间
3.state()指定动画的播放状态
4.iterations() 指定执行次数

参考代码:

// xxx.ets
@Entry
@Component
struct ImageAnimatorExample01 {
  images: ImageFrameInfo[] = [
    { src: $r("app.media.loading_dog_0") },
    { src: $r("app.media.loading_dog_1") },
    { src: $r("app.media.loading_dog_2") },
    { src: $r("app.media.loading_dog_3") }
  ]
​
  @State state:AnimationStatus = AnimationStatus.Initial
​
  build() {
    Column({ space: 10 }) {
      ImageAnimator()
        .animatorFancy() // 抽取公共属性
        .images(this.images) // 动画数组
        .duration(this.images.length*100)// 持续
        .state(this.state)// 动画状态
        .iterations(-1)// 播放次数
​
      // 按钮控制区域
      Row({space:20}){
        Button('启动').onClick(()=>{
          this.state=AnimationStatus.Running
        })
        Button('暂停').onClick(()=>{
          this.state=AnimationStatus.Paused
        })
        Button('停止').onClick(()=>{
          this.state=AnimationStatus.Stopped
        })
      }
    }
    .width('100%')
    .height('100%')
​
  }
​
  @Styles
  animatorFancy() {
    .width(300)
    .aspectRatio(2)
    .padding(10)
    .borderRadius(10)
  }
}

3. 转场动画

3.1. 模态转场

模态转场是新的界面覆盖在旧的界面上，旧的界面不消失的一种转场方式。
表1 模态转场接口

在这里插入图片描述

使用bindContentCover构建全屏模态转场效果

bindContentCover接口用于为组件绑定全屏模态页面，在组件出现和消失时可通过设置转场参数ModalTransition添加过渡动效。

1.定义全屏模态转场效果bindContentCover。

2.定义模态展示界面。

// 通过@Builder构建模态展示界面
@Builder MyBuilder() {
  Column() {
    Text('my model view')
  }
  // 通过转场动画实现出现消失转场动画效果，transition需要加在builder下的第一个组件 
  .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
}

3.通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果。

// 模态转场控制变量
@State isPresent: boolean = false;
​
Button('Click to present model view')
  // 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择None代表系统不加默认动画，通过onDisappear控制状态变量变换
  .bindContentCover(this.isPresent, this.MyBuilder(), {
            modalTransition: ModalTransition.NONE,
            onDisappear: () => {
              this.isPresent = !this.isPresent;
            }
          })
  .onClick(() => {
    // 改变状态变量，显示模态界面
    this.isPresent = !this.isPresent;
  })

完整示例代码和效果如下。

import curves from '@ohos.curves';
​
interface PersonList {
  name: string,
  cardnum: string
}
​
@Entry
@Component
struct BindContentCoverDemo {
  private personList: Array<PersonList> = [
    { name: '王**', cardnum: '1234***********789' },
    { name: '宋*', cardnum: '2345***********789' },
    { name: '许**', cardnum: '3456***********789' },
    { name: '唐*', cardnum: '4567***********789' }
  ];
  // 第一步：定义全屏模态转场效果bindContentCover
  // 模态转场控制变量
  @State isPresent: boolean = false;
​
  // 第二步：定义模态展示界面
  // 通过@Builder构建模态展示界面
  @Builder
  MyBuilder() {
    Column() {
      Row() {
        Text('选择乘车人')
          .fontSize(20)
          .fontColor(Color.White)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding({ top: 30, bottom: 15 })
      }
      .backgroundColor(0x007dfe)
​
      Row() {
        Text('+ 添加乘车人')
          .fontSize(16)
          .fontColor(0x333333)
          .margin({ top: 10 })
          .padding({ top: 20, bottom: 20 })
          .width('92%')
          .borderRadius(10)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.White)
      }
​
      Column() {
        ForEach(this.personList, (item: PersonList, index: number) => {
          Row() {
            Column() {
              if (index % 2 == 0) {
                Column()
                  .width(20)
                  .height(20)
                  .border({ width: 1, color: 0x007dfe })
                  .backgroundColor(0x007dfe)
              } else {
                Column()
                  .width(20)
                  .height(20)
                  .border({ width: 1, color: 0x007dfe })
              }
            }
            .width('20%')
​
            Column() {
              Text(item.name)
                .fontColor(0x333333)
                .fontSize(18)
              Text(item.cardnum)
                .fontColor(0x666666)
                .fontSize(14)
            }
            .width('60%')
            .alignItems(HorizontalAlign.Start)
​
            Column() {
              Text('编辑')
                .fontColor(0x007dfe)
                .fontSize(16)
            }
            .width('20%')
          }
          .padding({ top: 10, bottom: 10 })
          .border({ width: { bottom: 1 }, color: 0xf1f1f1 })
          .width('92%')
          .backgroundColor(Color.White)
        })
      }
      .padding({ top: 20, bottom: 20 })
​
      Text('确认')
        .width('90%')
        .height(40)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        .fontColor(Color.White)
        .backgroundColor(0x007dfe)
        .onClick(() => {
          this.isPresent = !this.isPresent;
        })
    }
    .size({ width: '100%', height: '100%' })
    .backgroundColor(0xf5f5f5)
    // 通过转场动画实现出现消失转场动画效果
    .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
  }
​
  build() {
    Column() {
      Row() {
        Text('确认订单')
          .fontSize(20)
          .fontColor(Color.White)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding({ top: 30, bottom: 60 })
      }
      .backgroundColor(0x007dfe)
​
      Column() {
        Row() {
          Column() {
            Text('00:25')
            Text('始发站')
          }
          .width('30%')
​
          Column() {
            Text('G1234')
            Text('8时1分')
          }
          .width('30%')
​
          Column() {
            Text('08:26')
            Text('终点站')
          }
          .width('30%')
        }
      }
      .width('92%')
      .padding(15)
      .margin({ top: -30 })
      .backgroundColor(Color.White)
      .shadow({ radius: 30, color: '#aaaaaa' })
      .borderRadius(10)
​
      Column() {
        Text('+ 选择乘车人')
          .fontSize(18)
          .fontColor(Color.Orange)
          .fontWeight(FontWeight.Bold)
          .padding({ top: 10, bottom: 10 })
          .width('60%')
          .textAlign(TextAlign.Center)
          .borderRadius(15)// 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择DEFAULT代表设置上下切换动画效果，通过onDisappear控制状态变量变换。
          .bindContentCover(this.isPresent, this.MyBuilder(), {
            modalTransition: ModalTransition.DEFAULT,
            onDisappear: () => {
              this.isPresent = !this.isPresent;
            }
          })
          .onClick(() => {
            // 第三步：通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果
            // 改变状态变量，显示模态界面
            this.isPresent = !this.isPresent;
          })
      }
      .padding({ top: 60 })
    }
  }
}

在这里插入图片描述

3.2. 共享元素转场

当路由进行切换时，可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。

// 页面 A
组件(){
  
}
  .sharedTransition('标记', { duration: 500 })
​
// 页面 B
组件(){
  
}
  .sharedTransition('标记', { duration: 500 })

动画属性

在这里插入图片描述

代码
Index.ets

import router from '@ohos.router'

export interface ProjectItem {
  id:number
  img: ResourceStr
  title: string
  desc: string
  sub: string
}

@Entry
@Component
struct Index {
  @State projectItem: ProjectItem[] = [
    {
      id:1,
      img: $r('app.media.project02'),
      title: '后台管理系统',
      desc: '以Vue技理后台后台管理系统面试题面试整理',
      sub: '后台系统'
    },
    {
      id:2,
      img: $r('app.media.project01'),
      title: '在线问医生平台（医疗类)',
      desc: '通过vue3+ts实现的在线医疗问诊相关技术整理',
      sub: 'H5项目'
    },
    {
      id:3,
      img: $r('app.media.project03'),
      title: '鸿蒙知识点',
      desc: '以ArkTS与ArkUI为主的鸿蒙基础知识点讲解',
      sub: '鸿蒙应用'
    },
  ]

  build() {
    Column() {
      Row() {
        Text('项目').fontSize(20)
      }
      Column() {
        ForEach(this.projectItem, (item: ProjectItem) => {
          Row({ space: 10 }) {
            Image(item.img).height('100%')
              .sharedTransition(item.id.toString(),{duration:500
              // ,type:SharedTransitionEffectType.Static
              })
            Column() {
              Column({ space: 5 }) {
                Text(item.title).fontSize(18)
                Text(item.desc).fontSize(12).fontColor('#666')
              }
              .alignItems(HorizontalAlign.Start)

              Text(item.sub).fontSize(10)
                .padding(3).fontColor(Color.Green)
                .backgroundColor('rgb(241, 244, 244)')
            }.height('100%')
            .alignItems(HorizontalAlign.Start)
            .justifyContent(FlexAlign.SpaceBetween)
          }.width('100%').height(110)
          .padding({ top: 15, bottom: 15 })
          .onClick(() => {
            router.pushUrl({
              url: "pages/DetailItem",
              params: item
            })
          })
        })
      }
    }.width('100%').height('100%').padding(15)
  }
}

DetailItem.ets

import router from '@ohos.router'
import { ProjectItem } from '../pages/Index'

@Entry
@Component
struct DetailPage {
  aboutToAppear(): void {
    const data = router.getParams() as ProjectItem
    this.data = data
  }

  @State data: ProjectItem = { id: 0 ,img: '', title: '', desc: '', sub: '' }
  @State isShow: boolean = true

  build() {
    Column() {

      Stack() {
        Column({ space: 30 }) {
          Row() {
            Text('<').fontColor('#fff').fontSize(30)
          }
          Row({ space: 10 }) {
            Image(this.data.img).height(150)
              .sharedTransition(this.data.id.toString(),{ duration:500
                // ,type:SharedTransitionEffectType.Static
              })

            Column() {
              Text(this.data.title).fontSize(20).fontColor('#fff')
              Text(this.data.desc).fontColor('#fff')
                .maxLines(2)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .width('65%')

              Text(`学习进度：10%`).fontColor('#999')
            }
            .alignItems(HorizontalAlign.Start)
            .height(150).justifyContent(FlexAlign.SpaceAround)
          }
        }
        .padding(20)
        .alignItems(HorizontalAlign.Start)

        Image($r('app.media.project_bg'))
          .opacity(0.2).width('100%')
          .onClick(() => {
            router.back({
              url: "pages/Index"
            })
          })
      }
      .height('100%')
      .alignContent(Alignment.TopStart)
      .backgroundColor('#683a18')
      .bindSheet($$this.isShow, this.BindSheetContent(), {
        height: 520, showClose: false
      })
    }
  }

  @Builder
  BindSheetContent() {
    Row() {
      Text('问题列表').fontSize(25).fontWeight(500).margin(20)
    }.justifyContent(FlexAlign.Start).width('100%')
  }
}

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。
在这里插入图片描述

「已注销」
关注
  • 13
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024鸿蒙OS实战开发项目大全：从入门到精通（含101个实战案例）超详细的鸿蒙实战案例
sybh的博客
05-17 3350
从基础的UI组件到复杂的分布式场景，从ArkTS的细致教学到JS的灵活运用，这一百个项目涵盖了你需要知道的HarmonyOS实战技术和策略。我们会从溪村小镇的细节世界开始，深入多端部署的可能性，感受如购物应用和音乐专辑这样的实用系统是如何在HarmonyOS中获得生命的。忘却繁杂，把握简单，最后我们将以开发您的第一个快应用（初级版和高级版）为终结，为您的鸿蒙OS开发之旅画上完美的句号。这一百个项目不仅仅是教程或示例，它们是设计思维、创新灵感和开发技巧的集大成，是您实战开发HarmonyOS路上的重要伴侣。
鸿蒙HarmonyOS实战-ArkUI动画（布局更新动画）_鸿蒙系统动画
2401_84160361的博客
04-12 599
平移动画是一种移位动画效果，通过改变元素在屏幕上的位置来实现物体的平移效果。在平移动画中，元素可以沿着水平、垂直或对角线方向移动，或者沿着自定义的路径移动。属性动画是一种在HarmonyOS平台上用于实现动画效果的机制。属性动画可以对任意对象的属性进行动画操作，包括视图的位置、大小、透明度、颜色等属性。属性动画可以实现更灵活、更复杂的动画效果。缩放动画是一种在动画中改变对象的尺寸大小的效果。它可以通过逐渐增大或减小对象的尺寸，或者通过突然改变对象的尺寸来实现。
鸿蒙开发之发动画篇
2401_82772199的博客
02-01 518
动画的原理是在一个时间段内，多次改变UI外观，由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数，帧率越高则动画就会越流畅。ArkUI中，产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律（即曲线）等参数。当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。
鸿蒙应用开发-动画
m0_56255097的博客
03-15 955
组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。`
HarmonyOS实战开发：属性动画接口
2401_84194030的博客
05-10 945
通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画
HarmonyOS NEXT多层级轮播图方案
shudaoshanQAQ的博客
03-21 800
该场景多用于购物、资讯类应用。
鸿蒙os动画,鸿蒙OS 动画开发指导
weixin_39593961的博客
05-27 633
动画是组件的基础特性之一，精心设计的动画使UI变化更直观，有助于改进应用程序的外观并改善用户体验。Java UI 框架提供了数值动画(AnimatorValue)和属性动画(AnimatorProperty)，并提供了将多个动画同时操作的动画集合(AnimatorGroup)。数值动画(AnimatorValue)AnimatorValue 数值从 0 到 1 变化，本身与 Component 无...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
鸿蒙Swiper效果实现.zip
02-07
总的来说，"鸿蒙Swiper效果实现.zip"是一个关于在HarmonyOS平台上实现Swiper组件的实战案例，对于想要提升鸿蒙应用UI体验的开发者来说，是一个宝贵的参考资料。通过深入学习和实践，开发者可以熟练掌握Swiper组件的...
HarmonyOS实战开发-如何实现一个简单的电子相册应用开发
2401_82546228的博客
03-29 1405
本篇Codelab介绍了如何实现一个简单的电子相册应用的开发，主要功能包括：
鸿蒙开发-新建Ability与使用image-animator实现图帧动画示例代码.rar
06-29
鸿蒙开发-新建Ability与使用image-animator实现图帧动画示例代码.rar 鸿蒙开发-新建Ability与使用image-animator实现图帧动画示例代码.rar 鸿蒙开发-新建Ability与使用image-animator实现图帧动画示例代码.rar
HarmonyOS NEXT应用开发—使用弹簧曲线实现抖动动画及手机振动效果案例
2301_79054873的博客
04-15 1002
—ProductView.ets // 视图层-场景列表页面。vibrateeffect // har类型。| |—constantsData.ets // 定义常量数据。// TODO: 知识点：通过animateTo显示动画指定由于闭包代码导致的状态变化插入过渡动效。// 弹簧曲线：初始速度100，质量1，刚度80，阻尼10。
鸿蒙开发之帧动画ImageAnimator
Lu_Ca的博客
01-18 732
鸿蒙帧动画需要借助组件ImageAnimator。使用的时候想要让动画动起来需要设置state为AnimationStatus.Running。
鸿蒙开发教程w3c,鸿蒙OS 动画开发指导
weixin_33436232的博客
05-29 266
动画是组件的基础特性之一，精心设计的动画使UI变化更直观，有助于改进应用程序的外观并改善用户体验。Java UI 框架提供了数值动画(AnimatorValue)和属性动画(AnimatorProperty)，并提供了将多个动画同时操作的动画集合(AnimatorGroup)。数值动画(AnimatorValue)AnimatorValue 数值从 0 到 1 变化，本身与 Component 无...
鸿蒙应用开发-基础动画实战
shudaoshanQAQ的博客
03-13 1088
在移动互联网时代，App的使用体验非常重要，比如布局的变化、页面的切换、弹窗的显示和隐藏都要是平顺的，丝滑的，这就需要用到动画
鸿蒙开发-新建Ability与使用image-animator实现图帧动画
BADAO_LIUMANG_QIZHI的博客
06-29 917
场景 鸿蒙开发-基础组件介绍及chart组件使用： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539 在上面学习了基础组件的使用流程后，下面介绍image-animator这个组件。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 Ability Ability是应用所具备能力的抽象，也是应用
鸿蒙开发之如何实现帧动画
最新发布
qq_14863717的博客
06-21 1014
帧动画是一种通过连续播放一系列静态图像（帧）来创造运动效果的技术。在华为HarmonyOS应用开发中，实现帧动画可以通过多种方式，包括使用JavaScript的函数、设置属性动画和显式动画的帧率，以及使用组件。以下是详细的步骤和知识点：步骤总结：代码示例： 2. 设置属性动画和显式动画的帧率 知识点总结：代码示例：属性动画帧率设置示例 显式动画帧率设置示例 3. 使用组件实现图片帧动画 知识点总结：代码示例： 以上内容涵盖了在华为HarmonyOS应用开发中实现帧动画的主要方法和技巧，包括使用Ja
鸿蒙应用开发 自定义下拉刷新动画
GitHub指北
12-24 1537
属性动画，是最为基础的动画，其功能强大、使用场景多，应用范围较广。一、页面布局发生变化。例如添加、删除部分组件元素。二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素，或者将部分元素从一端移动到另外一端。三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。简单来说，属性动画是组件的通用属性发生改变时而产生的属性渐变效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值