总结雅思听力小程序

总结雅思听力小程序

 

 

首页，星球动效，查看 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:  

1. 使用transform: translate(10rpx,10rpx ) 替换 transition: left 0.5s , top 0.5s; 前者性能好于后者，但是点击缩放效果有bug
2. 坐标写成json文件
3. 坐标接口给

 

 

 

 

抽卡页面，具体查看 component/tarot 文件夹

使用的绝对定位

 

思路：

1. 创建80张卡片，每张卡片的left, top都不同，再给一个偏转角度。实验可行
2. 给每张卡片添加手势，touchMove方法里通过touch.clientX计算水平方向移动距离，再通过反三角函数，计算出需要偏转的角度
3. 修改每张卡片的角度，再根据角度计算出新的left, top;
4. 修改每张卡片的left,top, angle会有个bug:滑动卡片的时候每张卡片都会闪
5. 为了解决这个bug,改成修改卡片容器角度的方式来实现卡片的旋转

 

 

如何实现循环滑动： 滑动到一定的角度，强制复位

 

 

遇到的问题：  

1. 找不到终点， 问的大海，left给偏移 - cardWidth / 2； top给偏移  - cardH / 2

 

展开动画： 80张牌的初始化角度为0， 

 

点击出牌动画: 修改卡片的left,top； 收起之前出来的牌

 

降落动画

 

 

todo:

1. 卡片位移动画代码替换lottie
2. bug:某些版本的微信会闪
3. iPhone8P 出卡动画没显示