Javascript 图像之间的角度交叉淡入

我试图在角度上创建交叉淡入淡出效果，但图像保持脉动，而不是相互淡入淡出。我怎样才能修好它

动画。ts

import { trigger, style, animate, transition, state } from '@angular/animations';

export const fade = [
  trigger('fade', [
    state('in', style({ 'opacity': '1' })),
    state('out', style({ 'opacity': '0' })),
    transition('* <=> *', [
      animate(500)
    ])
  ])
];

export enum AnimationState {
  IN = 'in',
  OUT = 'out'
}

export class AppComponent implements OnInit {
  heroImageArray = [
    "https://drscdn.500px.org/photo/277987267/q%3D80_m%3D2000/v2?webp=true&sig=082269b7b07ec17da1847d5c20cffee3a3a91af1f474eb3fd908eba828d5327c",
    "https://drscdn.500px.org/photo/253947845/q%3D80_h%3D450/v2?webp=true&sig=c645b242f19581b17df5bc68d54ee4e5a3c2f5b1ddd41791683ed9c03c455151"
  ];
  heroActiveImage: string =
    "https://drscdn.500px.org/photo/277987267/q%3D80_m%3D2000/v2?webp=true&sig=082269b7b07ec17da1847d5c20cffee3a3a91af1f474eb3fd908eba828d5327c";
  state = AnimationState.IN;

  ngOnInit() {
    this.toggleImg();
  }

  toggleImg() {
    let count = 0;
    setInterval(() => {
      if (count === this.heroImageArray.length) {
        count = 0;
      }
      this.heroActiveImage = this.heroImageArray[count];
      count++;
    }, 3000);
  }

  onDone() {
    this.toggleState();
  }

  toggleState() {
    this.state =
      this.state === AnimationState.IN ? AnimationState.OUT : AnimationState.IN;
  }
}

---

Stackblitz here:

当状态为OFF时，图像应该更改，否则会闪烁。我已经分叉并更新了您的，更改在动画中（使动画变为1500毫秒而不是500毫秒），并将第一张图片更改为阵列中的第二张图片（因此它不会闪烁为同一张图片）

---

编辑：我认为当

this.state===AnimationState.OUT

时，在toggleState事件上更改图像也会更好（因此您知道在图片淡出时正在切换）

需要执行一些更改，但基本上我将传递给

animate（）

的值从500更改为2000（不用担心，现在有了这些更改，您可以通过更改传递给animate函数的值来调整所需的转换时间），我还将代码块移动到了toggleState函数，以将图像更改为toggleState函数，并对

HeroMageArray

中的字符串重新排序（这是为了防止您提到的关于第一幅图像的错误）

给你密码

---

注意：要减缓或加快转换，只需更改传递给

动画

功能的值。

当您有一组图片时，您可以拥有一个唯一的图像n并执行以下操作

fade out--change the image--fade in--fade-out--change the image--fade in-... 

或者有两个图像（一个在另一个上面），然后

我把这两个动画

  animations: [
    trigger("fade", [
      transition("false=>true", [
        style({ opacity: 0 }),
        animate("2500ms", style({ opacity: 1 }))
      ])
    ]),
    trigger("fade2", [
      transition("false=>true", [
        style({ opacity: 0 }),
        animate("2500ms", style({ opacity: 1 }))
      ]),
      transition("true=>false", [animate("2500ms", style({ opacity: 0 }))])
    ])
  ]

（请看“淡出”只会淡出）如果你有一组图像-我建议，如果你进行stackblitz，你可以使用你的服务器或其他服务器

  imageArray = [
    "https://picsum.photos/200/300?random=1",
    "https://picsum.photos/200/300?random=2",
     ....
  ];

你可以有一个类似html的

或者，如果您使用两个图像

onFade和onFade2函数使用rxjs操作符“timer”在您选择的时间内保持图像的可见性

  onFade(event: any) {
    timer(2000).subscribe(() => {
      if (event.fromState)
        this.count = (this.count + 1) % this.imageArray.length;
      this.toogle = !this.toogle;
    });
  }
  onFade2(event: any) {
    if (!event.fromState) {
      timer(2000).subscribe(() => {
        this.toogle2 = !this.toogle2;
      });
    } else {
      this.toogle2 = !this.toogle2;
      if (event.fromState)
        this.count2 = (this.count2 + 1) % this.imageArray.length;
    }
  }

你可以看到

更新了感谢Eliezer Vegas的评论，我可以改进代码，以便“暂停”动画：

  animations: [
    trigger("fade", [
      transition("false=>true", [
        style({ opacity: 0 }),
        animate("2500ms 2000ms", style({ opacity: 1 }))
      ])
    ]),
    trigger("fade2", [
      transition("false=>true", [
        style({ opacity: 0 }),
        animate("2500ms", style({ opacity: 1 }))
      ]),
      transition("true=>false", [animate("2500ms 2000ms", style({ opacity: 0 }))])
    ])
  ]

及

---

当图像进入第一张图像时，它似乎仍然有点问题。我如何解决这个问题？就像我说的，你应该在淡出完成后切换图像，查看我更新的stackblitz@methuselahThanks这工作得很好，有没有办法减缓照片之间的动画过渡谢谢，我如何调整图像保持在屏幕上？我知道您希望在图像进入后有一个延迟。在这种情况下，您可以向动画功能传递一个字符串，就像这样

animate（“2s 1s”）

（转换2秒，延迟1秒）。您还需要更改转换函数调用，因为延迟将应用于

in=>out

以及

out=>in

使空白空间延迟2秒。您需要有两个转换调用，第一个

转换（“in=>out”，动画（“2s”）

（这会将图像停留的时间设置为2秒。我更新了代码，你可以查看它的信息）和第二次

转换（“out=>in”，animate（“2s0.5s”）

。感谢这个评论，@ElizerVerasvargas，我不知道如何暂停动画-我用大锤敲打螺母，实际上是rxjs计时器-：）

  animations: [
    trigger("fade", [
      transition("false=>true", [
        style({ opacity: 0 }),
        animate("2500ms 2000ms", style({ opacity: 1 }))
      ])
    ]),
    trigger("fade2", [
      transition("false=>true", [
        style({ opacity: 0 }),
        animate("2500ms", style({ opacity: 1 }))
      ]),
      transition("true=>false", [animate("2500ms 2000ms", style({ opacity: 0 }))])
    ])
  ]

  onFade(event: any) {
      if (event.fromState)
        this.count = (this.count + 1) % this.imageArray.length;
      this.toogle = !this.toogle;
  }
  onFade2(event: any) {
      this.toogle2 = !this.toogle2;
      if (event.fromState)
        this.count2 = (this.count2 + 1) % this.imageArray.length;
  }