可以在 Ionic 2 中的图像之间制作淡入淡出动画

Posted 2023-03-13

【中文标题】可以在 Ionic 2 中的图像之间制作淡入淡出动画

【英文标题】：Is possible to make fade animation between images in Ionic 2

【发布时间】：2018-02-08 20:28:45

【问题描述】：

当我搜索 Ionic 2 的动画时。我发现了一些动画，但不是我想要的。

我想在图像之间制作类似“淡入淡出”的动画。例如，我有 5 张图像，2 秒后当前图像变为其他图像并带有淡入淡出动画。

我可以通过使用“setinterval”重复我的代码并在 2 秒后一张一张地更改我的图像来完成一半的工作，但我不知道我是否可以制作淡入淡出动画！

这是我的代码示例（html + TS + 示例 Gif 图像）

HTML

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <img src="imgs/variables.imageName.jpg">
</ion-content>

TS

export class HomePage 
   variables=
       imageName:"image1"
   

  public loop1;

  constructor(public navCtrl: NavController) 
      this.loop1 = setInterval(() => 
          this.changeImage();
      , 2000);
  

  changeImage()
      if(this.variables.imageName=="image1")
          this.variables.imageName="image2";
      
      else if(this.variables.imageName=="image2")
          this.variables.imageName="image3";
      
      else if(this.variables.imageName=="image3")
          this.variables.imageName="image1";
      
   

结果（我想在它们之间淡化）

【问题讨论】：

你可以用javascript做到这一点

@Ashishsah 好的，我会搜索一下 - 也许我能找到任何可以解决我的问题的东西

为什么不在特定的时间间隔隐藏图像而只使用 jquery .fadeIn() 方法

能否请您添加代码中最相关的部分，以便我们可以使用它创建一个 plunker？在 Ionic 中使用 jQuey 不是一个好方法。相反，您可以只使用普通的 css 或 Angular 动画 API。

@sebaferreras 好的，几分钟后，我将用我的代码示例编辑我的问题

【参考方案1】：

这是我的工作jsFiddle :)

我在jquery 中使用了fadeIn() 和fadeout() 方法。希望这会对你有所帮助。

【讨论】：

谢谢，但是我可以在淡出第一张图片的同时淡入第二张图片吗？

所以你想，当第一张图像淡出时，第二张图像直接进入？

是的，就像第二张图片显示在第一张图片前面一样

我认为，由于延迟过渡时间，然后当它淡出时。但如果需要，请尝试调整时间转换

【参考方案2】：

我想我可以找到解决方案 here，但我不确定如何在 Ionic 2 中实现它

（如果我得到想要的结果，我会编辑这篇文章）