2w单子用PIXI+GSAP仿写vanmoof刹车动效是什么样? | 猿创营

前端的木木
1,375 阅读3分钟

前言

这是一篇制作刹车动效讲解, 使用pix 号称是性能最高, 最快速的html5创意引擎, webgl2d的图形渲染引擎 gsap 是老牌引擎, 经历过flash, 从flash过度而来的引擎. 通过以上技术来实现vanmoof刹车动效2, 3D交互的感觉.

改刹车功能分别有两个, 一个是开始时粒子流动的特效, 效果图如下:

5.png

另一个是鼠标按入时, 粒子暂停的特效, 车刹按下的效果, 按回则恢复原来的样子, 效果图如下:

6.png

接下来我们来看刹车动效的实现吧, 首先有以下几部分内容, 小白也会更快理解学会这个动效.

本文就是记录了这个动效整个探索的实现过程, 请尽情享用~

制作按住动态按钮

首先我们新建文件, 定义一个demo和js脚本, 定义刹车的一个类, 定义刹车按钮, 具体demo以下图片所示.

7.png

接着定一个类, 实例化刹车的一个对象, 进行页面加载, 刹车类如同所示.

1.png

通过PIXIJS下的add添加图片,通过PIXIJSon.Complete.add这个方法完成图片加载,图片挂载通过PIXI.Sprite的这个方法实现挂载图片.

制作按住动效按钮

2.png

接着我们做个容器指向app通过PIXI.Container, 调整圆心位置btnImage, btnCircle, btnCircle2, 最后我配置actionButton的x, y水平垂直方向配置为400挂载中间.

添加车架

3.png

我们定义手柄和手把, 然后挂载图片, 获取手把中心位置, 获取手柄中心位置调整好位置.

然后控制手刹动效, 运用移入移出功能事件配合gsap动画引擎, 做一个延时透明的淡入淡出特效, 并且点击按钮, 会有一个刹车的特效.

6.png

创建粒子特效

创建粒子,调整中心位置,随机生成. 开始呈现粒子动态运动, 按住停止动态运动, 缓冲由快到慢的speed速度变量, 实现动效粒子可空性.

// 创建粒子
    let particleContainer = new PIXI.Container();
    // 把移动到中心店
    particleContainer.pivot.y = window.innerHeight / 2;
    particleContainer.pivot.x = window.innerWidth / 2;
    particleContainer.y = window.innerHeight / 2;
    particleContainer.x = window.innerWidth / 2;
    particleContainer.rotation = (35 * Math.PI) / 180;
    this.stage.addChild(particleContainer);
    let particles = [];
    let colors = [
      0xf1cf54, 0xb5cea8, 0xf1cf54, 0x818181, 0x000000, 0xf1cf54, 0xf1cf54,
      0xab11, 0xbbcc, 0xccee, 0xfa1a,
    ]; //粒子有多个颜色
    for (let i = 0; i < 15; i++) {
      //10
      let gr = new PIXI.Graphics();
      // 开始填充 画圆 结束填充
      gr.beginFill(colors[Math.floor(Math.random() * colors.length)]);
      gr.drawCircle(0, 0, 6);
      gr.endFill();

      // gr.x = Math.random() * window.innerWidth;
      // gr.y = Math.random() * window.innerHeight;
      let pItem = {
        sx: Math.random() * window.innerWidth,
        sy: Math.random() * window.innerHeight,
        gr: gr,
      };
      gr.x = pItem.sx;
      gr.y = pItem.sy;
      particleContainer.addChild(gr);
      particles.push(pItem);
    }
    let speed = 0;
    //循环函数 向某一个角度持续移动
    function loop() {
      speed += 0.5;
      speed = Math.min(speed, 20);
      for (let i = 0; i < particles.length; i++) {
        let pItem = particles[i];
        pItem.gr.y += speed;
        if (speed >= 20) {
          // 速度慢到快 有一个时间才连成线
          pItem.gr.scale.y = 40; // 技巧 运动拉伸屏幕宽高
          pItem.gr.scale.x = 0.03; //颗粒状 变越小
        }
        //超出边界后回到顶部继续移动
        if (pItem.gr.y > window.innerHeight) pItem.gr.y = 0;
      }
    }

    function start() {
      speed = 0; //停止运动
      gsap.ticker.add(loop);
    }
    function pause() {
      gsap.ticker.remove(loop);
      // 添加线性粒子运动
      for (let i = 0; i < particles.length; i++) {
        let pItem = particles[i];
        pItem.gr.scale.y = 1;
        pItem.gr.scale.x = 1;
        gsap.to(pItem.gr, {
          // 暂停运动回复原位
          duration: 6,
          x: pItem.sx,
          y: pItem.sy,
          ease: "elastice.out", //停止的时候还有一点回弹的效果
        });
      }
    }
    start();
  }

玻璃门.jpg 好了, PIXI+GSAP仿写vanmoof刹车动效到现在就结束了, 谢谢观看文章。

小结

这么好用PIXI原生动效制作，希望能打开你的视野并帮助到你，快快学起来吧。

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

avatar
文章
阅读
粉丝