HarmonyOS 转场动画

今天我们来说组件内转场动画

我们可以先编写代码如下

@Entry
@Component
struct Index {

  @State flag:boolean = true;

  build() {
    Column({space: 30}) {
      Button("转换").onClick(()=> {

      })
      Image("https://img1.baidu.com/it/u=1699929707,733321099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
        .width(200)
    }
    .width('100%')
    .height('100%')
  }
}

定义了一个状态变量叫 flag 类型为布尔默认值给了个true
然后定义了一个button按钮定义了一个点击事件还没有写内容
下面放了个image图片组件

然后我们将 Column 组件内的内容改成这样

Button(this.flag?"隐藏":"显示").onClick(()=> {
    this.flag = !this.flag;
})
if(this.flag){
	Image("https://img1.baidu.com/it/u=1699929707,733321099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
	 .width(200)
}

我们通过 flag 控制 image组件的显示
然后按钮的点击事件取反就是如果是 true 就赋值 false 如果是false就赋值trrue
我们点击一次就会赋值为false image图片就没了
在这里插入图片描述
然后再点一下就变成 true 图片就又出来了

但是目前是没有任何动画效果的

这里我们用一个新的方法 transition
我们这样写

Image("https://img1.baidu.com/it/u=1699929707,733321099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
.width(200)
.transition({
  type: TransitionType.
})

然后下面就会弹出提示告诉我们 TransitionType 下的三种类型
在这里插入图片描述
其中
Insert 组件加载时动画
Delete 组件销魂时动画
All 加载和移除都附带动画
这里我们选择 All

但是现在我们会看到点击后依旧是马上显示和马上消失并没有什么动画效果

因为这里我们还是要写它的动画属性
我们将 Column 组件内的代码改写如下

Button(this.flag?"隐藏":"显示").onClick(()=> {
  animateTo({
    duration: 3000,
    curve: Curve.Linear,
    //delay: 2000,
    iterations: 3,
    playMode: PlayMode.Alternate,
    onFinish: (()=>{
        console.log("动画结束");
    })
  },()=>{
    this.flag = !this.flag;
  })
})
if(this.flag){
  Image("https://img1.baidu.com/it/u=1699929707,733321099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
    .width(200)
    .transition({
      type: TransitionType.All
    })
}

我们在点击事件中调用 animateTo 还是第一个参数是 json的动画参数配置
第二个参数则是需要执行的逻辑
此时我们点击它就会有个渐渐虚化消失的动画了
在这里插入图片描述
然后我们动画还可以做的再花哨一点
将 if 下的代码改写如下

if(this.flag){
    Image("https://img1.baidu.com/it/u=1699929707,733321099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
    .width(200)
    .transition({
      type: TransitionType.Insert,
      translate: {x: 200,y: 100}
    })
}

这里我们用 Insert 表示加载时触发动画
translate 这里我们控制 x轴 200 y轴 100 表示插入时从这个位置插入进来

我们点击隐藏后然后点击显示
会发现它是从我们指定的位置进入然后回归正常位置的
在这里插入图片描述
然后我们还可以设置透明度
通过 opacity 字段实现属性控制

还是点击隐藏然后点击显示
这时我们动画刚进来是指定的位置然后是透明的然后一点一点恢复正常位置透明度慢慢减掉元素完全展示出来
在这里插入图片描述
我们还可以控制它的旋转 rotate

设置我们元素默认更新进来是一个循环 80度的效果
然后会慢慢旋转会正常状态

350度则是转一整圈