使用 Ionic Angular 实现液体滑动

Implement liquid swipe with Ionic Angular

我对 Ionic 比较陌生,我想制作一个使用滑动功能的应用程序! 我发现了一些有趣的东西,那就是液体刷卡。我知道使用 Flutter (https://www.youtube.com/watch?v=svvJFb-LsgY 1) 是可行的,但我想知道使用 Ionic-Angular 是否可行。有图书馆吗,还是要我自己去? 我的问题不是关于如何处理手势,而是关于视觉效果。

感谢您的帮助。

PS : 抱歉我的英语不好,我是法国人……

此答案不会为您提供确切的实施方式,而只是提供实现途径。

Ionic slides(ion-slides)如评论中所指出的那样在引擎盖下利用了 iDangerous 的滑动器(swiperjs),它允许自定义转换。

Ionic 文档提供了如何自定义内置过渡效果的示例:

https://ionicframework.com/docs/api/slides#custom-animations

但要实现更复杂的功能,您需要利用 "virtualTranslate" 选项:

Enable this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set. Useful when you may need to create custom slide transition

https://swiperjs.com/api/

您可以查看这篇文章,了解如何使用此选项以及使用 GSAP 实现自定义转换的详细信息:https://medium.com/@arnost/creating-custom-slide-transitions-in-swiper-js-also-with-gsap-ac71f9badf53

GSAP 是一个非常强大的动画库,它允许对 Web 元素和 SVG 进行动画处理。

由于您想到的液体滑动器会根据用户触摸输入动态运行,因此您当然需要将其计算在内。所以实现路径就在那里,它只是乏味而且很难给你确切的实现答案。