用户7844528313236

hellow，我是沐阳，刚开始在掘金上水文。作为一位初级前端，开发经验往往只停留在了后台管理系统，或者一些简单的h5页面。大多数的时候因为技术水平有限，所以很少有时间去学习了解很多的东西。想过自己利用

今天周末在家，发现大家都没有水群了🧐。肯定是在手机屏幕面学习，自己偷偷的在家里卷，然后惊艳所有人。在卷王泛滥的时代，我知道自己要努力了。接着上一章在html中进行pixi.js和gsap的实践。

前言 这是一篇制作刹车动效讲解, 使用pix 号称是性能最高, 最快速的html5创意引擎, webgl2d的图形渲染引擎 gsap 是老牌引擎, 经历过flash, 从flash过度而来的引擎. 通

用PixiJS和GSAP仿写vanmoof动效的入门笔记，在大帅老师的猿创营直播讲解中，第一次了解了PixiJS的实操。跟写完刹车动效，微微膨胀地写起了变速器动效，然后就卡壳了。。

在写这篇文章之前，先感谢大帅老师@大帅老猿，是他让我重新拿起了笔在掘金上输出文章。本人17年就注册了掘金账号，潜水到21年初，才在掘金写了第一篇文章，之后又陆续写了3篇，都没有啥点赞和阅读量，兴致就低

刹车效果展示 相关链接 PIXI:https://pixijs.com GASP:https://greensock.com

缘起： 在工作之余，经常逛公众号和各种社区的我，发现了一个宝藏公众号 大帅老猿 开启了兼职之旅。 旨在接触更多的真实案例增加自身的业务思考和提升技术视野。 这个动画效果即一个客户案例脱敏后的产物。那么

本文的 刹车动效 是基于pixijs与gsap动画库创作而成，感兴趣的小伙伴可以联系作者拿源码，创作不易，希望能本篇文字点赞

效果 分析 首先准备一些图片素材 其次用一块画布把素材装起来，排好布局 最后让素材动起来 方案 PixiJS实现画布效果 GSAP实现动画效果 实现 🎨 PixiJS 初始化PIXI实例，在页面上插入