[discuss] 动画效果

[timelic]

因为目前没找到很优雅的实现动画的解决方案。目前我们的项目整体是基于React+Redux的单向数据流方案，UI层只管渲染新状态，不感知从旧状态到新状态的变化，而动画效果正好是需要感知变化的。目前找到一个比较好的方案是Spring框架，但是尝试集成到Neos项目中后发现没有效果，猜测是Spring和Babylon.js配合得不是很好。

我觉得使用Babylon的好处有几个，网页端3D、<canvas />的优秀性能，和更好地支持动画。但如果按照上面的说法，babylon反而不容易实现动画。

一套比较完善的动画方案，应该是在状态更新时能自动从旧状态切换到新状态。Babylon的社区没有自带的解决方案吗？

另外，Babylon有一个不可忽视的缺点是，决斗盘和其他UI其实是割裂的。其他UI的开发和决斗盘的开发是两个部分，这两个部分之间的用户交互显得很“疏离”。开发上，其他UI可以用一些组件和HTML的方法，但是决斗盘不行，从绘图、场景搭建到卡片渲染都需要从头实现。

如果是原生HTML，有anime.js、motion等强大的动画库，React也有Spring这种很棒的动画库。但是想把两者进行集成肯定是很难的事情，因为实际上这些动画库都是针对原生网页元素进行开发的，而不是基于Canvas。

如果要用原生网页元素来实现决斗盘，动画会容易实现一点，但那也不是容易的方案。3D的实现会很头疼，而且卡牌在手卡、牌组、场上、墓地之间的运动会是一个三维运动的过程，需要涉及一系列的位置计算。

[timelic]

如果做原生HTML的2D的决斗盘，然后用css 的 perspective给一个小角度转成3D会不会容易实现一点？这只是一个想法。

[SKTT1Ryze]

好的今天下班看下

[timelic]

做了个demo，也许可以真的用纯React？

[SKTT1Ryze]

感觉你这个想法很好呀！我觉得用Babylon不是一个硬性要求，是怎样效果好怎样来。我们后面详细讨论下这个吧。

[SKTT1Ryze]

我先分享下一开始使用Babylon.js的想法：

1. web上成熟的3D渲染框架；
2. 因为neos定位上是一款游戏，所以需要一个能和web框架（React）比较好结合使用的游戏框架；
3. 看过一些大厂使用Babylonjs制作的产品，效果特别好；

另外还有一点就是当时选择使用Babylonjs的时候还不是很熟悉前端（包括现在也不敢说熟悉，因为我的主技术栈是rust😂）。

对于哥们的这个想法和制作的demo，我的第一反应是很惊艳，如果抛弃Babylon.js转向html+css的话，我有以下考虑：

1. 改造成本：我们是开源项目，本人不希望因为这个项目耽误到研发成员的个人发展（学业或者工作），所以如果要改造的话，需要评估下是否能在不影响个人的前提下完成；
2. 卡片移动，高亮（发动效果的时候），连锁等动画效果是否能比较优雅地实现；
3. 是否会对现有的一些提示框实现（提示玩家选择xxx卡片的Modal）产生冲突，如果产生冲突，解决的成本是否高；
4. 用BabylonJs其实还有一点好处就是，可以支持3D的怪兽模型和VR，但是这个优点现在考虑太早了可以忽略）。

我们如果能对上面几点讨论充分的话，应该就可以得到结论了。

谢谢哥们的建议！非常有价值。

[SKTT1Ryze]

已去掉Babylon.js的依赖，采取html+css的方案。