首先给大家演示一下最终效果!
ps:学PIXI之前:这啥啊?这咋写啊??
学PIXI之后:就这???
这种交互,动感!是不是很酷炫兄弟们!
好了,进入正题:它是如何实现的!
首先我们要思考
- 它有哪些东西
- 哪些是图片
- 如何运动
- 运动如何绑定
首先它需要的东西很明显,界面上就可以看到,我们需要:
- 一个按钮(来控制按下的操作)
- 一个自行车的图片(自行车,以及车把的图片,因为要按下的时候刹车,所以需要一个单独的刹车图片)
- 公路(底层的公路)
- 运动线条
好的,东西我们分析完毕了,然后我们可以开始敲代码了! 我们要使用PIXI,肯定要引用了,这我相信各位大佬已经不用演示了,直入主题
然后我们需要加载一下我们的图片资源,如下:
因为我们要加载图片,我们的运动肯定是基于图片加载完毕才会显示,所以我们使用‘onComplete’来调取各种渲染事件。
好了,接下来开始添加按钮!我直接封装为了一个方法,为大家写好注释了!
创建按钮并绑定按钮按下及松开事件!
此时的界面:此时按下和松开已经可以实现车把的效果了!
流动的线
好了,接下来让我们加上流动的线,因为车是斜向运动的,我们斜向的算法比较复杂(但是后边的公路用到了)。
这个斜向运动没有那么复杂,所以我们采用的是新建一些各种颜色的圆点,让它在容器里上下运动,然后来旋转这个容器! 直接上干货!
好了,接下来就是让点来运动(改变点的Y坐标即可)
难点:公路
好了,接下来了到了最后的难点了,公路怎么加???
改变Y轴?旋转?不不不,我已经试过了,此方法行不通,因为我们的公路不像圆一样,怎么旋转都是不变的!
所以:我采用了旋转+斜向运动!!!
第一步:引入马路!
第二步:重置时,改变马路位置!
第三部:重点!!!通过计算让马路动起来!!!
大哥!搞定!最终效果!
PS:灵感以及技术学习来自 大帅老猿
,一个编程三十多年的老程序猿猴!
在公众号里搜 大帅老猿
,在他这里可以学到很多东西!快来和我一起学习!卷!