用Ionic Angular实现液体刷卡

问题描述 投票:0回答:1

我对Ionic比较陌生,我想做一个使用刷卡功能的应用程序!我发现了一个有趣的东西,就是液体刷卡。我知道用Flutter是可以的(https:/www.youtube.comwatch?v=svvJFb-LsgY 1)但我想知道是否可以用Ionic-Angular来实现。我的问题不是关于如何处理手势,而是关于视觉效果。

谢谢你的帮助。

PS : 对不起我的英语,我是一个法国人......

angular ionic4 swipe
1个回答
1
投票

这个答案不会给你确切的实现,但只是如何实现的路径。

离子滑块 正如评论中指出的那样,ion-slides)利用了iDangerous的swiper(swiperjs),它允许自定义过渡效果。

Ionic文档中提供了如何定制内置过渡效果的例子。

https:/ionicframework.comdocsapislides#custom-animations。

但要想做一些更复杂的事情,你需要利用 "virtualTranslate "选项。

启用该选项和swiper将像往常一样操作,除了它不会移动,真正的包装上的翻译值将不会被设置。 当你需要创建自定义的滑块过渡时,这个选项非常有用。

https:/swiperjs.comapi。

你可以查看这篇文章,了解如何使用这个选项和使用GSAP实现自定义过渡的细节。https:/medium.com@arnostcreating-custom-slide-transitions-in-swiper-js-also-with-gsap-ac71f9badf53。

GSAP是一个非常强大的动画库,它可以对网页元素和SVG进行动画制作。

由于你心目中的液体刷卡器是根据用户触摸输入动态动作的,当然你需要把这一点算进去。所以实现路径是有的,只是比较繁琐,几乎没有SO会给你准确的实现答案。

© www.soinside.com 2019 - 2024. All rights reserved.