Linux触摸屏动效

触摸拖尾特效

实现原理

参考cocos2d中MotionStreak拖尾特效的实现。MotionStreak 的拖尾效果，原理实际上是：触摸手指在移动的过程中，会动态生成一段段条带段（如图），然后这些条带段会在生命周期Fade秒内，渐渐隐去（慢慢变透明），从而形成了拖尾的效果。

条带使用的是OpenGL中三角形条带。条带上的关键点并不是触摸点，而是相邻触摸坐标线段的垂直平分线上距离线段中点距离为[条带宽度/2]的点，坐标计算方式如下：

触摸相邻点的线段的倾斜角α已知，L为 条带的宽度，那么三角形条带相对于线段中点的$(x_m,y_m)$ 偏移量 $dx,dy$为
$$dx=\frac{L\ast \cos \beta }{2},dy=\frac{L\ast \sin \beta }{2},\alpha +\beta =\frac{\mathrm{\Pi }}{4}$$
至此，条带上的所有关键点可以计算得出。条带上内侧的关键点放到顶点数组的奇数位置，外侧的关键点放到顶点数组的偶数位置，最后将顶点数组按照OpenGL中三角形条带（GL_TRIANGLE_STRIP）的方式依次连接，便可得到三角形条带，最后将纹理（如下图）和颜色混合后映射到条带上，便可得到触摸拖尾特效。

效果

触摸点击、长按特效

实现原理

触摸点击的效果是点击位置出现一个圆，手指离开后圆半径逐渐缩小，直至消失。触摸长按的效果是长按位置出现圆环，手指离开后圆环消失。两个动画根本上是进行圆环的绘制，圆其实就是个内径为零的圆环。但在OpenGL中基本图元中并不包含圆，需要用三角形去拟合。圆环的绘制是采用OpenGL的三角形条带进行绘制，难点在顶点数组的计算，如下图：

建模后：已知当前的坐标$(x,y)$，偏移角度$\alpha$, 圆心$(cx,cy)$，圆半径为$r$, 我们需要推导出$(x\prime ,y\prime )$,做辅助角$\beta$，以圆心为坐标原点建系，则有
$$x=rcos(\alpha +\beta );x^{\prime }=rcos\beta ;y=rsin(\alpha +\beta );y^{\prime }=rsin\beta$$
最终可推导出：
$$x^{\prime }=xcos\alpha -ysin\alpha ;y^{\prime }=xsin\alpha +ycos\alpha$$
假设我们用一个N多边形去拟合圆，则有：
$$\alpha =\frac{2\mathrm{\Pi }}{N}$$
至此，圆环上的所有的关键点可以推导得出。然后，将圆环内侧的关键点放入顶点数组的奇数位置，外侧的关键点放到顶点数组的偶数位置，通过OpenGL中的三角形条带（GL_TRIANGLE_STRIP）的方式，进行绘制，便可得到圆环，然后将圆环的纹理贴合上去，最后，通过QAnimation做成渐变的效果。至此，点击、长按动画便大功告成。

效果

1. 触摸点击动效
   

2. 触摸长按动效