可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果):DraggableFlagView

jopen 10年前

可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果),拖拽一定的距离可以消失回调。

可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果):DraggableFlagView 可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果):DraggableFlagView

可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果):DraggableFlagView 可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果):DraggableFlagView

可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果):DraggableFlagView 可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果):DraggableFlagView

实现原理:

当根据touch事件的移动,不断调用onDraw()方法进行刷新绘制。

*注意:这里原来的小红点称为红点A;根据手指移动绘制的小红点称为红点B。

touch事件移动的时候需要处理的逻辑:

1. 红点A的半径根据滑动的距离会不断地变小。

2. 红点B会紧随手指的位置移动。

3. 在红点A和红点B之间需要用贝塞尔曲线绘制连接区域。

4. 如果红点A和红点B之间的间距达到了设置的最大的距离,则表示,这次的拖拽会有效,一旦放手红点就会消失。

5. 如果达到了第4中情况,则红点A和中间连接的贝塞尔曲线不会被绘制。

6. 如果红点A和红点B之间的距离没有达到设置的最大的距离,则放手后,红点B消失,红点A从原来变小的半径使用反弹动画变换到原来最初的状态

项目主页:http://www.open-open.com/lib/view/home/1419473662593