本文的 刹车动效 是基于pixijs与gsap动画库创作而成,感兴趣的小伙伴可以进入pixijs的官网pixijs.com/ 和gsap动画库的官网 greensock.com/ 进行对应的学习,就不在这对基本使用进行叙述了.
1 环境准备
vscode 编辑器,并安装Live Preview插件(使用微软(microsoft))
2 code 目录
image目录下放的是我们需要的图片,js用来写交互逻辑,html 定义一个可以访问的页面
3 html 页面
引入pixijs src="pixijs.download/release/pix…" 引入 gsap src="cdnjs.cloudflare.com/ajax/libs/g…"
4 brakebanner.js 抒写交互逻辑
利用js的class 进行抒写
5 利用PIXI创建canvas
6 使用PIXI的加载器Loader 添加我们要使用图片,并定义回调
7 使用PIXI的容器Container 和gsap的实现按住刹车的动画效果
8 使用PIXI的容器Container 加载我们的车架,龙头,刹车器
9 定义刹车按钮,松开和按住的回调
10 创建粒子来生动的展现车运动和停住的动画效果
11 最终效果
开发刹车柄的动效 按住时
松开时
需要代码的小伙伴可以联系作者,可以分享作者的代码给大家
【 在公众号里搜 大帅老猿
,找他做技术外包很靠谱 】