兼职PIXI时入3K?动画特效就是这么给力!(全注释,附源码)| 猿创营

·  阅读 6601
兼职PIXI时入3K?动画特效就是这么给力!(全注释,附源码)| 猿创营
首先给大家演示一下最终效果!

ps:学PIXI之前:这啥啊?这咋写啊??
学PIXI之后:就这???

QQ录屏20220711153337.gif

这种交互,动感!是不是很酷炫兄弟们!

好了,进入正题:它是如何实现的!

首先我们要思考

  1. 它有哪些东西
  2. 哪些是图片
  3. 如何运动
  4. 运动如何绑定
首先它需要的东西很明显,界面上就可以看到,我们需要:
  • 一个按钮(来控制按下的操作)
  • 一个自行车的图片(自行车,以及车把的图片,因为要按下的时候刹车,所以需要一个单独的刹车图片)
  • 公路(底层的公路)
  • 运动线条

好的,东西我们分析完毕了,然后我们可以开始敲代码了! 我们要使用PIXI,肯定要引用了,这我相信各位大佬已经不用演示了,直入主题

图片.png

然后我们需要加载一下我们的图片资源,如下:

图片.png

因为我们要加载图片,我们的运动肯定是基于图片加载完毕才会显示,所以我们使用‘onComplete’来调取各种渲染事件。

图片.png

好了,接下来开始添加按钮!我直接封装为了一个方法,为大家写好注释了!

图片.png

创建按钮并绑定按钮按下及松开事件!

图片.png

此时的界面:此时按下和松开已经可以实现车把的效果了!

图片.png

图片.png

流动的线

好了,接下来让我们加上流动的线,因为车是斜向运动的,我们斜向的算法比较复杂(但是后边的公路用到了)。
这个斜向运动没有那么复杂,所以我们采用的是新建一些各种颜色的圆点,让它在容器里上下运动,然后来旋转这个容器! 直接上干货!

图片.png

此时点位已经加上了:

图片.png

好了,接下来就是让点来运动(改变点的Y坐标即可)

图片.png

QQ录屏20220711160250.gif

难点:公路

好了,接下来了到了最后的难点了,公路怎么加???
改变Y轴?旋转?不不不,我已经试过了,此方法行不通,因为我们的公路不像圆一样,怎么旋转都是不变的!
所以:我采用了旋转+斜向运动!!!

第一步:引入马路!

图片.png

第二步:重置时,改变马路位置!

图片.png

第三部:重点!!!通过计算让马路动起来!!!

图片.png

大哥!搞定!最终效果!

QQ录屏20220711153337.gif

PS:灵感以及技术学习来自 大帅老猿 ,一个编程三十多年的老程序猿猴!

公众号里搜 大帅老猿,在他这里可以学到很多东西!快来和我一起学习!卷!

源码地址:github.com/QZ-WangXian…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改