Flying Cards
原力甩卡
如果开两个网页，就可以来回传送卡片。
如果拿两台手机，都打开这个网站，也可以来回传送卡片。
Preview
虽然原理很简单，但是我觉得这个效果很有趣。
image
Demo
http://flyingcards.fastbreakfast.top/
在两个页面(设备)中打开这个网站。
在输入框里输入对应的号码，点击connect。也可以点random。
如果一个页面被清空了，就可以开始滑动啦。
Github
https://github.com/landmadename/Flying-Cards
Usage
- 项目由两个部分组成：
- 前端react：用来显示卡片的动效 (FlyingCards/react-cards)
- 后端Django：用Websockets来模拟传输 (FlyingCards/mysite)
- 修改react-cards/src/index.js 里的 cards 就可以修改图片
- mysite是直接通过修改Channels的教程完成的。所以连名字都没改。
- 可以通过修改mysite/chat/consumers.py完成Websockets的一些修改。
Installation
首先，你需要安装一个redis
git clone https://github.com/GavBaros/react-tinder-cards.git
cd Flying-Cards/react-cards
npm install
npm start
# 再开一个终端，或者把npm start放到后台
cd Flying-Cards/mysite
mkvirtualenv flyingcards
pip install -r requirements.txt
python3 manage.py runserver
# 修改 Flying-Cards/react-cards/src/index.js 里 150行 domin 为自己的地址
# 直接打开 http://localhost:3006/
# 或者部署
Acknowledgements
- 感谢react-spring和react-use-gesture
- 本项目主要是基于 react-spring 和 react-use-gesture 的卡片demo 改造来的。
- 感谢react-tinder-cards
