总结雅思听力小程序
首页，星球动效，查看 homeLottie文件夹
四个星球使用的绝对定位，首次进入的爆炸动效，使用关键帧动画，是组合动画，同时修改位置，缩放，角度
@keyframes topright {
0% {
transform: translate3d(-65%, 24%, 0) scale(0.1,0.1) rotate(-360deg);
}
100% {
transform: none;
}
}
执行完爆炸动效，星球需要在一定范围内漂移：也是关键帧动画：修改translateY
@keyframes shakeY {
50%{
transform: translateY(10rpx);
}
100% {
transform: translateY(0rpx);
}
}
完整的动画是topright 和 shakeY组合而来：
.genImg {
320rpx;
height: 280rpx;
position: absolute;
left: 420rpx;
top: 120rpx;
animation-name: topright, shakeY;
animation-duration: 1.4s, 6s;
animation-delay:0.3s, 1.7s;
animation-iteration-count: 1,infinite;
transition: left 0.5s , top 0.5s;
animation-fill-mode: both,none;
display: flex;
align-items: center;
justify-content: center;
}
注意 ：
animation-iteration-count: 1,infinite; infinite表示动画要无限循环执行shakeY漂移动画;
animation-fill-mode：表示动画保持在结束 还是开始状态
四个球的 animation-name 值不同，分别从中间向左上，右上，左下，右下三开，这样就基本实现了一个爆炸效果
四个球出现的先后顺序不同，通过设置 animation-delay:0s->0.3s->0.5s->0.7s 实现
点击前两个大球，会出现3个或者2个隐藏的小球，同时其他三个大球向外三开，这个动效是通过修改元素的left, top实现的；
具体实现：点击第一个大球，这个大球稍微往中间移动，另外三个球向四周散开，是修改了这四个球的left值；再次点击第一个大球，这四个大球同时移动回原来的位置。 点击第一个大球，隐藏在大球下面的三个小球位移出来，是通过修改这三个小球的left, top实现的。再次点击大球，收起这三个小球，小球的left,top复位
首页，星星的闪烁，是使用png图片实现的；闪烁的频率不同，是三张频率不同的png。尝试过gif和lottie动画，都有一些问题：gif动画的画质太低，lottie动画会造成卡顿，编译器都卡。最后通过设计师提供的png动画实现了星星闪烁的动效
优化
TODO:
- 使用transform: translate(10rpx,10rpx ) 替换 transition: left 0.5s , top 0.5s; 前者性能好于后者，但是点击缩放效果有bug
- 坐标写成json文件
- 坐标接口给
抽卡页面，具体查看 component/tarot 文件夹
使用的绝对定位
思路：
- 创建80张卡片，每张卡片的left, top都不同，再给一个偏转角度。实验可行
- 给每张卡片添加手势，touchMove方法里通过touch.clientX计算水平方向移动距离，再通过反三角函数，计算出需要偏转的角度
- 修改每张卡片的角度，再根据角度计算出新的left, top;
- 修改每张卡片的left,top, angle会有个bug:滑动卡片的时候每张卡片都会闪
- 为了解决这个bug,改成修改卡片容器角度的方式来实现卡片的旋转
如何实现循环滑动： 滑动到一定的角度，强制复位
遇到的问题：
- 找不到终点， 问的大海，left给偏移 - cardWidth / 2； top给偏移 - cardH / 2
展开动画： 80张牌的初始化角度为0，
点击出牌动画: 修改卡片的left,top； 收起之前出来的牌
降落动画
todo:
- 卡片位移动画代码替换lottie
- bug:某些版本的微信会闪
- iPhone8P 出卡动画没显示