如何使用角度动画实现此过渡动画？

Question

我一直在尝试从列表https://stories.uplabs.com/10-impressive-uses-of-motion-and-animations-in-material-design-ecf8b94df02d-＃7中实现Dropbox动画。我正在尝试获得单击登录时发生的向上滑动过渡。这就是我到目前为止所取得的成就，但是我觉得我从一开始就走错了路。我没能力 首先要确保流畅的运动和clipPath动画看起来都是断断续续的。一点都不顺利。

    trigger('signInAnimation',[
  state('show',style({
    transform:"translate3d(0,-2%,0)"
  })),
  state('hide',style({
    transform:"translate3d(0,100%,0)"
  })),
  transition('show => hide', animate('400ms ease-in-out')),
  transition("* => show",
    [
    animate('400ms  linear',keyframes([
        style({transform:"translate3d(0,99%,0)",clipPath: "ellipse(90%)",offset:0.0}),
        style({transform:"translate3d(0,59%,0)",clipPath:'ellipse(400%)',offset:0.45}),
        style({transform:"translate3d(0,0%,0)",offset:0.8}),
        style({transform:"translate3d(0,-2%,0)",offset:0.9}),
        style({transform:"translate3d(0,0%,0)",offset:0.95})
     ])
      )
    ]
    )]

有想法吗？