小程序动画完成垃圾分类大作战

~

1）活动背景

近期活动需要，在活动小程序里面增加垃圾分类大作战的场景，场景有动画来呈现，具体是从顶部开始掉下一个物品，然后通过拖拽的形式拖动到对应的

垃圾分类盒子里面

这个涉及以下几个技术点

1）小程序元素拖拽；

2）碰撞检测；

3）相关动画交互，比如分对会有加分的动效以及音乐的播放，分错同样的

2）界面截图

分几项吧

~

~

~

3）技术拆解

1）

2）

3）

4）手指触摸动作

5）

6）震动的动效

7）如何解决不同尺寸手机的定位问题

8）碰撞检测逻辑

具体看下代码片段吧，需要代码片段的私聊滴滴我，谢谢

4）相关代码

分几项吧

~

~

~

~

5）头脑风暴

分几项吧~

~

~

~

~

~

~

~

6）总结

本次技术实现采用的是官方提供的movable-area、movable-view原生组件，同时使用很多我头一次接触的知识点

1）动画

2）碰撞

3）震动效果

7）特别感谢

首先特别感谢群里参与头脑风暴的老铁

TTC

小鱼儿

袁述～ 

小苹果🍎

~

在这里特别感谢社区的朋友@Hanks，提供技术支持。

~

小程序动画完成垃圾分类大作战