FAB 酷炫展开和收敛动画有何思路? #HarmonyOS最强问答官# HarmonyOS 鸿蒙Next

可通过设置 .foregroundFilter 和 .contrast 这 2 个属性，可以实现水滴融合的效果；通过 this.getUIContext()?.animateTo 实现组件的移动，旋转，透明度变化的动画

import { uiEffect } from '@kit.ArkGraphics2D';

@Entry
@Component
struct HoverButtonExample {
  @State flag: boolean = true
  @State opacityValue: number = 0;
  @State BY1: number = 0
  @State BY2: number = 0
  @State BY3: number = 0
  @State BY4: number = 0
  @State angle: number = 0
  @State widthBottom: number = 80
  @State boxWidth: number = 100
  @State itemWidth: number = 60
  @State pad: number = 20
  @State backMove: number = 0
  @State backHeight: number = 50
  @State backWidth: number = 60
  @State distance: number = 100
  @State filterTest1: uiEffect.Filter = uiEffect.createFilter().blur(20)
  @State imageWidth: number = 20
  
  build() {
    Stack() {
      Column() {}
      .width(this.widthBottom)
      .height(this.widthBottom)
      .borderRadius(this.widthBottom / 2)
      .backgroundColor("#333")
      .foregroundFilter(this.filterTest1) // 通过 foregroundFilter 设置模糊效果
      
      Column() {}
      .width(this.itemWidth)
      .height(this.itemWidth)
      .translate({ y: this.BY2 })
      .foregroundFilter(this.filterTest1) // 通过 foregroundFilter 设置模糊效果
      .backgroundColor("#333")
      .borderRadius(30)
      
      Column() {}
      .width(this.itemWidth)
      .height(this.itemWidth)
      .translate({ y: this.BY3 })
      .foregroundFilter(this.filterTest1) // 通过 foregroundFilter 设置模糊效果
      .backgroundColor("#333")
      .borderRadius(30)
      
      Column() {}
      .width(this.itemWidth)
      .height(this.itemWidth)
      .translate({ y: this.BY4 })
      .foregroundFilter(this.filterTest1) // 通过 foregroundFilter 设置模糊效果
      .backgroundColor("#333")
      .borderRadius(30)
      
      Image($r('app.media.ic_public_arrow_left'))
        .width(this.imageWidth)
        .height(this.imageWidth)
        .rotate({ angle: this.angle })
        .zIndex(7)
      
      Image($r('app.media.ic_public_arrow_left'))
        .width(this.imageWidth)
        .height(this.imageWidth)
        .opacity(this.opacityValue)
        .zIndex(8)
        .translate({ y: this.BY2 })
      
      Image($r('app.media.ic_public_arrow_left'))
        .width(this.imageWidth)
        .height(this.imageWidth)
        .opacity(this.opacityValue)
        .zIndex(9)
        .translate({ y: this.BY3 })
      
      Image($r('app.media.ic_public_arrow_left'))
        .width(this.imageWidth)
        .height(this.imageWidth)
        .opacity(this.opacityValue)
        .zIndex(10)
        .translate({ y: this.BY4 })
    }
    .width(this.boxWidth)
    .height("100%")
    .contrast(20)
    .border({ color: "#333", width: 1 })
    .onClick(() => {
      if (this.flag) {
        this.getUIContext()?.animateTo({ curve: Curve.Friction, duration: 2000 }, () => {
          this.backMove = this.distance * 3 / 2
          this.backHeight += this.distance * 3
          this.backWidth = 0
          this.widthBottom = this.widthBottom - this.pad
          this.angle = 45
          this.BY2 = this.BY2 - this.distance
          this.BY3 = this.BY3 - this.distance * 2
          this.BY4 = this.BY4 - this.distance * 3
          this.flag = !this.flag
          this.opacityValue = 1
        })
      } else {
        this.getUIContext()?.animateTo({ curve: Curve.Friction, duration: 2000 }, () => {
          this.backMove = this.backMove - this.distance * 3 / 2
          this.backHeight -= this.distance * 3
          this.backWidth = this.itemWidth
          this.widthBottom = this.widthBottom + this.pad
          this.angle = 0
          this.BY2 = this.BY2 + this.distance
          this.BY3 = this.BY3 + this.distance * 2
          this.BY4 = this.BY4 + this.distance * 3
          this.flag = !this.flag
          this.opacityValue = 0
        })
      }
    })
  }
}

以上是初步分析结论，如有疑问可以展开回复，看到后会继续协助定位阻碍点。

开源网站上收录了UI、系统接口、Web、创新特性等场景化鸿蒙示例DEMO，开发中可以参考：https://gitee.com/scenario-samples/demo-index