0

考虑以下代码：

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

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

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

4

3 回答 3

2

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

给定你的动画

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() 那样“随机化”，但它可以解决问题！

在您的组件中，您现在可以在 animate 中调用此函数：

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'))
  ])
]

我不确定它会起作用，但我猜这已经足够满足您的需要了！

编辑你甚至可以通过在你的动画中设置一个间隔，每分钟左右更改一次动画来走得更远。但是如果这个方法甚至不起作用......我不会浪费更多时间来写这个 ahah

于 2017-11-09T14:17:26.040 回答
1

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

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),
    };
}

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

以前的答案

您可以定义任意数量的动画状态，然后设置转换，以便当它们从任何状态转到特定状态时，会出现特定的动画。以下是动画状态的示例：

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>

如果你想让它随机发生，我会设置某种 Observable 来随机改变动画，如果你希望它在某些条件下发生，那么我会在组件中创建一个方法来设置基于动画的当前状态在某些条件下。

Angular 中的动画有点棘手，但教程中有很好的信息，Matias Niemelä（Angular 动画模块的主要开发人员之一）也写了一篇很好的文章。如果您的项目要使用动画，我建议您检查一下

于 2017-11-09T14:11:33.077 回答
0

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

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

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

接下来，您只需为这些字符串中的每一个创建转换到void，例如：

transition('yellowFirstState => void',[
  style({'background-color':'yellow'}),
  animate(100)
])
于 2017-11-09T14:12:47.973 回答