刹车动效| 猿创营

2,122

本文的 刹车动效 是基于pixijs与gsap动画库创作而成,感兴趣的小伙伴可以进入pixijs的官网pixijs.com/ 和gsap动画库的官网 greensock.com/ 进行对应的学习,就不在这对基本使用进行叙述了.

1 环境准备

vscode 编辑器,并安装Live Preview插件(使用微软(microsoft))

image.png

2 code 目录

image目录下放的是我们需要的图片,js用来写交互逻辑,html 定义一个可以访问的页面

image.png

3 html 页面

引入pixijs src="pixijs.download/release/pix…" 引入 gsap src="cdnjs.cloudflare.com/ajax/libs/g…"

image.png

4 brakebanner.js 抒写交互逻辑

利用js的class 进行抒写

image.png

5 利用PIXI创建canvas

image.png

6 使用PIXI的加载器Loader 添加我们要使用图片,并定义回调

image.png

7 使用PIXI的容器Container 和gsap的实现按住刹车的动画效果

image.png

8 使用PIXI的容器Container 加载我们的车架,龙头,刹车器

image.png

9 定义刹车按钮,松开和按住的回调

image.png

10 创建粒子来生动的展现车运动和停住的动画效果

image.png

image.png

11 最终效果

开发刹车柄的动效 按住时

image.png

松开时

image.png

需要代码的小伙伴可以联系作者,可以分享作者的代码给大家

【 在公众号里搜 大帅老猿,找他做技术外包很靠谱 】