【鸿蒙开发基础】Harmony OS Next-动画实现

载物于心

已于 2025-01-07 14:25:29 修改

阅读量790

点赞数 9

文章标签： harmonyos 华为

于 2024-12-26 21:00:07 首次发布

本文链接：https://blog.csdn.net/weixin_74851434/article/details/144678315

版权

1.动画的概念

1.1鸿蒙动画的定义

在Harmony OS Next中，动画不仅仅是一种视觉效果，它还是提升用户界面交互体验的重要手段。动画可以通过为UI变化添加流畅的过渡效果，使得界面的过渡更加自然流畅，增强用户的互动感和反馈感。此外，动画还可以在内容加载等场景中增加用户的耐心，缓解等待带来的不适感。

1.2鸿蒙动画的目的

自然流畅的过渡 ：动画可以使UI组件的变化看起来更加流畅，避免了瞬间变化可能引起的突兀感。
增强用户反馈和互动感 ：通过动画，用户可以更清晰地看到他们的操作所产生的效果，从而增强互动体验。
提高用户体验 ：在各种场景中，如应用启动、退出、下拉进入控制中心等，动画都能提供关于操作的视觉反馈，帮助用户更好地理解和操作设备。

动画的实现方面，鸿蒙的ArkUI提供了多种动画接口，包括属性动画、转场动画等。这些接口允许开发者通过设定动画参数，如动画时长、动画曲线等，来控制属性值的变化规律。例如，线性动画曲线会使属性值在动画时长内从起点值匀速变化到终点值。

总之，动画在鸿蒙系统中是提升应用吸引力和用户体验的关键元素，合理的动画设计和使用可以极大地改善应用的交互质量和用户的整体体验。

2.动画的使用

2.1 字体的变化

在使用动画前，当我们有改变字体大小的需求时，运行的效果显得比较生硬，很难吸引用户。

@Entry
@Component
struct AnimationFcuntion {

  @State message: string = 'Hello World';
//设置用于控制字体大小的变量
  @State fontSizeNum:number=30

  build() {
    Column() {
      Text(this.message)
        .id('AnimationFcuntionHelloWorld')
        .fontSize(this.fontSizeNum)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })

//使用这个按钮让字体变大
      Button('变大')
        .onClick(()=>{
          this.fontSizeNum=50
        })

//使用这个按钮让字体变小
      Button('变小')
        .onClick(()=>{
          this.fontSizeNum=15
        })

    }
    .height('100%')
    .width('100%')
  }
}

以下是切换文字大小的效果

如果想让它切换地更加丝滑，那我们就加入动画的效果再试一试

@Entry
@Component
struct AnimationFcuntion {
  @State message: string = '我是可变化的字体';

  @State fontSizeNum:number=30
  build() {
    Column() {
      Text(this.message)
        .id('AnimationFcuntionHelloWorld')
        .fontSize(this.fontSizeNum)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .animation({
          duration:1000//动画时长为1000毫秒,添加了.animation属性后，文字的切换会自动转换为动画的形式进行切换
        })
      Button('变大')
        .onClick(()=>{
          this.fontSizeNum=45
        })
      Button('变小')
        .onClick(()=>{
          this.fontSizeNum=15
        })

    }
    .height('100%')
    .width('100%')
  }
}

以下是加入动画后的运行效果，可以明显看到，切换的过程变得丝滑了很多

2.2基础属性运用动画

官方文档定义：

通俗地说：当基础属性发生变化时，它是瞬间完成的，通过设置动画，我们可以让它有一个过渡的特效，这样就显得美观。

2.3可重复执行的动画

//1.引入animator
import animator, { AnimatorOptions, AnimatorResult } from '@ohos.animator'

@Entry
@Component
struct AnimatorCase {
@State angle:number=0
@State timer:number=-1
  @State play:boolean=false
  //动画配置
  animateOption:AnimatorOptions={
  duration:10000,
  begin:0,
    end:360,
    //让动画线性变化
    easing:'linear',
    //填充模式
    fill:'none',
    //播放方向
    direction:'normal',
    //循环播放，值为-1时就循环播放
    iterations:-1,
    //0延迟
    delay:0
  }

  //动画遥控
  myAnimator:AnimatorResult=animator.create(this.animateOption)

  aboutToAppear(): void {
  //onFrame允许开发者在每一帧动画播放时都进行一些自定义的处理,这里设置每一帧动画都将改变angle的值
 this.myAnimator.onFrame=(value)=>{
this.angle=value
 }

}
  build() {
   Column({space:20}) {
     //设置旋转的图片
     Image($r('app.media.wlhwyz'))
       .width(200)
       .aspectRatio(1)
       .borderRadius(100)
       //设置旋转的角度
       .rotate(
         {
           angle:this.angle
         }
       )

     Button('播放/暂停')
    
       .onClick(()=>{
      this.play=!this.play
         this.play? this.myAnimator.play():this.myAnimator.pause()//三目运算符，控制图片暂停旋转或者继续旋转

       })

    }
    .height('100%')
    .width('100%')
  }
}

运行效果

通过动画的设置，可以实现一个循环播放或者停止的效果。具体方式可以通过阅读代码体会。

3.总结

动画可以帮助我们实现多种动态效果，提升用户与软件的交互性，读者可以自行阅读官方文档，查询动画animation的各种属性，进行实践并掌握动画的技巧。