Angular中的随机动画

Question

考虑以下代码：

<div class="red-square" 
     *ngIf="someCondition"
     [@showHideAnimation]
></div>

有没有办法使上述div 随着随机动画消失 ？

随机动画是，例如，对象在30到150之间旋转任意数量的度数 。

Answer 1

我有一个主意，但它本身并不是随机的。

给你你的动画

animations: [
  trigger('animationName', [
    state('void', style({
      // hidden case
    })),
    state('*', style({
      // visible case
    })),
    transition(':enter', animate('TIME [DELAY] EASING')),
    transition(':leave', animate('TIME [DELAY] EASING'))
  ])
]

您可以做的是像这样创建一个全局函数

function randomizeAnimation(propertiesNumber: number, state: number) {
  let properties = ['borderBottom', 'opacity', 'All of the properties you want to animate here'];
  let randomIndex = () => Math.random() * properties.length;

  let style = {};
  for (let i = 0; i < propertiesNumber; i++) {
    let index = randomIndex();
    let voidValue = '0';
    let showValue = '*';
    // Why it's not "randomized" : you need to make custom rules here. Example : colors
    if (properties[index].toLowerCase().includes('color')) { 
      let RdmOct = () => Math.random() * 256;
      let generateRandomColor = () => `rgb(${RdmOct()}, ${RdmOct()}, ${RdmOct()})`;
      voidValue = generateRandomColor();
      showValue = generateRandomColor();
    }
    style[properties[index]] = state ? voidValue : showValue;
  }
  return style;
}

该函数的作用是需要许多属性进行动画处理，并设置动画状态（布尔值或0/1）。 然后，它在其数组中选择随机属性，使其成为“随机”。 如果属性具有特殊的用例，例如颜色（通配符'*'不起作用），则必须进行处理。 一旦创建了随机样式，它将返回它以用于动画功能。 它不像Math.random（）那样“随机化”，但是可以解决问题！

在组件中，您现在可以在动画中调用此函数：

animations: [
  trigger('animationName', [
    state('void', style(randomizeAnimation(1, 0))),
    state('void', style(randomizeAnimation(1, 1))),
    transition(':enter', animate('275ms ease-out')),
    transition(':leave', animate('275ms ease-in'))
  ])
]

我不确定它是否可以正常工作，但是我想这已经足够满足您的需求！

编辑您甚至可以通过设置动画间隔，每分钟左右更改动画来走得更远。 但是，如果这种方法甚至行不通...我将不会浪费更多时间来编写此代码

Answer 2

对于具有随机值的动画，您将需要创建接受参数的动画。 这将允许您在动画中提供不同的值，以便获得随机行为。 您将需要根据要设置的动画设置一个或多个动画，并在值上设置参数，如下所示：

animations: [
    trigger('randomAnimation', [
        transition('* => colorFade', [
            animate("500ms ease-in", keyframes([
                style({'background-color': "{{color}}"}),
                style({'opacity': "{{opacity}}"}),
            ]))
        ], {params : { color: "yellow", opacity: "0" }}),
        transition('rotateFade', [
            animate("{{time}}ms ease-in", keyframes([
                style({'transform': 'rotate({{rotate}}deg);'}),
                style({'opacity': "{{opacity}}"}),
            ]))
        ], {params : { time: "500", rotate: "45", opacity: "0.6 }})
    ])
]

然后，在视图中可以将动画绑定到其中具有随机值的动画对象。

<div class="red-square" [@randomAnimation]="animationConfig"></div>

在您的组件中，您可以创建使动画随机化的对象。

public setRandomAnimation() {
    this.animationConfig = {
        value: Math.random() > 0.5 ? 'colorFade' : 'rotateFade',
        params: {
            time: Math.floor(Math.random() * 5000) + 200,
            color: `#${(Math.floor(Math.random() * 255)).toString(16)}${(Math.floor(Math.random() * 255)).toString(16)}${(Math.floor(Math.random() * 255)).toString(16)}`,
            opacity: Math.random(),
            rotate: Math.floor(Math.random() * 360),
    };
}

上面的方法只是一个示例，您可以进一步扩展此方法，而不必将其全部塞入一个方法中。 动画不使用的参数将被忽略，因此即使例如colorFade未使用它，也可以指定rotate 。

上一个答案

您可以定义任意数量的动画状态，然后设置过渡，以便当它们从任何状态转到特定状态时，都会发生特定的动画。 这是动画状态可能看起来的示例：

animations: [
  trigger('randomAnimation', [
    transition('* => yellowDisappear', [
      animate(300, keyframes([
        style({'background-color': 'yellow'}),
        style({opacity: 0})
      ])),
    transition('* => rotateFade', [
      animate(300, keyframes([
        style({'transform': 'rotate(45deg);'}),
        style({opacity: 0.6})
      ]))
  ])
]

然后，您可以指定要在模板中应用的动画。

<div class="red-square" [@randomAnimation]="'yellowDisappear'"></div>
<div class="red-square" [@randomAnimation]="'rotateFade'"></div>

如果您希望它随机发生，那么我将设置某种可观察的对象来随机更改动画，如果您希望它在某些条件下发生，那么我将在组件中创建一个方法来设置动画的当前状态。在某些条件下。

Angular中的动画有些棘手，但本教程中提供了很好的信息，并且MatiasNiemelä（Angular动画模块的主要开发者之一）也为此撰写了一篇不错的文章 。 如果您的项目要使用动画，我建议您检查一下

Answer 3

我不确定这是否行得通，但是您可以像这样将状态添加到动画div ：

<div class="red-square" 
     *ngIf="someCondition"
     [@showHideAnimation]="getRandomState()"
></div>

getRandomState方法可以随机返回几个预定义的字符串。

接下来，您只需要为每个字符串创建到void过渡，例如：

transition('yellowFirstState => void',[
  style({'background-color':'yellow'}),
  animate(100)
])