我可以不按时间设置动画速度，而是按对象的大小设置动画速度吗？答案

【问题标题】：Can I set the animation speed not by time, but by the size of the object?我可以不按时间设置动画速度，而是按对象的大小设置动画速度吗？
【发布时间】：2023-01-22 16:49:41
【问题描述】：

我有一个动画会在不同大小（从 50 到几千像素）的对象上触发，因此固定的动画时间看起来不太好。是否可以以像素/秒为单位设置动画速度？那么例如1000px/second，无论ramzer如何，旋转速度都是一样的？

  animations: [
    trigger('slideInOut', [
      state('in', style({
        height: '*',
      })),
      state('out', style({
        height: '0px',
      })),
      transition('in => out', animate(`500ms ease-in-out`)),
      transition('out => in', animate(`500ms ease-in-out`))
    ])
  ]

【问题讨论】：

标签： angular

【解决方案1】：

不幸的是，无法使用 Angular 中的 animate() 函数以每秒像素为单位设置动画速度。 animate() 函数只接受以毫秒为单位的持续时间，而不是每秒像素数。

实现所需动画速度的一种方法是使用 CSS 中的 animation-timing-function 属性。此属性允许您通过定义将动画时间映射到动画进度的数学函数来控制动画速度。

这是一个示例，说明如何将动画计时功能设置为线性并实现一致的动画速度，而不管对象的大小如何：

animations: [
    trigger('slideInOut', [
      state('in', style({
        height: '*',
      })),
      state('out', style({
        height: '0px',
      })),
      transition('in => out', animate(`500ms linear`)),
      transition('out => in', animate(`500ms linear`))
    ])
  ]

另一种方法是使用 animation-duration 属性，该属性也接受以秒为单位的值，但不接受每秒像素数。您可以一起使用 animation-duration 和 animation-iteration-count 属性来获得所需的结果。

animations: [
    trigger('slideInOut', [
      state('in', style({
        height: '*',
      })),
      state('out', style({
        height: '0px',
      })),
      transition('in => out', [
        animate('0.5s', keyframes([
          style({height: '*', offset: 0}),
          style({height: '0px', offset: 1})
        ]))
      ]),
      transition('out => in', [
        animate('0.5s', keyframes([
          style({height: '0px', offset: 0}),
          style({height: '*', offset: 1})
        ]))
      ]),
    ])
  ]

重要的是要注意这种方法有一些缺点，因为动画不会很流畅，它会有一个固定的持续时间，对于不同的尺寸可能看起来不太好。

【讨论】：