HarmonyOS 鸿蒙Next中想要实现红包雨效果，有推荐方案吗

可以参考的demo

class ControllerClass{
  add = (num:string) =>{
  }
}
@Component
struct RedEnvelopePage {
  @State controllerClassIns:ControllerClass = new ControllerClass()
  build() {
    Column() {
      RedEnvelope({dmController:this.controllerClassIns })
      Flex({justifyContent:FlexAlign.SpaceAround}){
        Button('发送红包').onClick(() =>{
          this.controllerClassIns.add('id')
        })
      }.padding(20)
    }
    .border({width:1})
    .width('100%')
    .margin({top:'25%'})
    .height('50%')
  }
}
@Observed
class dmItemClass {
  id:string = ''
}
@Component
struct RedEnvelope {
  @Link dmController:ControllerClass
  @State dmItemList:dmItemClass[] = []
  @State dmHeight:number = 0
  aboutToAppear(): void {
    this.dmController.add = (id:string)=>{
      this.add(id)
    }
  }
  build() {
    Column(){
      ForEach(this.dmItemList,(dmItem:dmItemClass,index) =>{
        Column(){
          RedEnvelopeItem({dmHeight:this.dmHeight})
        }
        .height('100%')
        .position({x:0,y:0})
      },(item:dmItemClass,index) =>index.toString())
    }
    .onSizeChange((old,newVal) =>{
      this.dmHeight = newVal.height as number
    })
    .clip(true)
    .height('100%')
    .width('100%')
  }
  add(id:string){
    let ins = new dmItemClass()
    ins.id = id
    this.dmItemList.push(ins)
    console.info("进入增加弹幕")
  }
}
@Reusable
@Component
struct RedEnvelopeItem{
  @Prop dmHeight:number
  positionX:number = Math.random() * 330
  build() {
    Column(){
    }
    .width(60)
    .height(100)
    .backgroundColor('red')
    .border({width:2})
    .rotate({angle:Math.random()*360})
    .translate({y: this.dmHeight + 50})
    .transition(
      TransitionEffect.translate({y: -200 - this.dmHeight}).animation({duration:4000,curve: Curve.Linear})
    )
    .position({
      x:this.positionX?this.positionX:0
    })
  }
}