HarmonyOS 属性动画

经过之前的几篇文章 相信大家对显示动画 有了一个最基本的概念

那么除了显示动画 我们还有属性动画
它也是可以更新我们的布局

他们最大的不同在于 显示动画调用 animateTo 是个函数 而 属性动画是个属性函数
它的属性方法 叫 animation

我们可以先编写代码如下

@Entry
@Component
struct Index {

  @State controlWidth:number = 140;
  @State controlHeight:number = 50;

  build() {
    Column({space: 30}) {
      Button("执行").onClick((event: ClickEvent) => {
        this.controlWidth = 240;
        this.controlHeight = 100;
      })
        .width(this.controlWidth)
        .height(this.controlHeight)
    }
    .width('100%')
    .height('100%')
  }
}

这里 我们编写代码 button按钮 用我们定义的 State 响应式数据 控制了宽高
然后 我们在点击事假中修改了两个响应式数据
这里 我们运行代码

然后当我们点击这个按钮

因为 响应式数据的改变 我们UI界面也随之改变

但这是瞬间变化 完全没有动画那种自然的感觉
这里 我们只需要在需要动画的属性后面 加上 点animation
就OK了 里面接受一个参数 JSON类型 就是动画参数配置
参考代码如下

 Button("执行").onClick((event: ClickEvent) => {
	this.controlWidth = 240;
	this.controlHeight = 100;
})
.width(this.controlWidth).animation({
	duration: 3000,
	curve: Curve.Linear,
	//delay: 2000,
	iterations: 3,
	playMode: PlayMode.Alternate,
	onFinish: (()=>{
	    console.log("动画结束");
	})
})
.height(this.controlHeight).animation({
	duration: 3000,
	curve: Curve.Linear,
	//delay: 2000,
	iterations: 3,
	playMode: PlayMode.Alternate,
	onFinish: (()=>{
	    console.log("动画结束");
	})
})

这样 我们再次点击 就有动画效果了