前言

之前没有接触过动画开发，今天参加猿创营实训活动学习下拓展下知识面
原版vanmoof商城地址

最终效果

使用到的技术

Pixi

一个非常快的2D sprite渲染引擎
可以帮助你显示、动画和管理交互式图形，这样你就可以轻松地使用JavaScript和其他HTML5技术制作游戏和应用程序

GSAP

一个从flash时代一直发展到今天的专业动画库

开发过程

创建一个PIXI.Application实例

constructor(selector) {this.app = new PIXI.Application({widtd: window.innerWidth,height: window.innerHeight,backgroundColor: 0xffffff,resizeTo: window}      document.querySelector(selector).appendChild(this.app.view)
...
}

加载项目需要用到的图片资源

this.loader = new PIXI.Loader();
this.loader.add("btn.png", "images/btn.png");
this.loader.add("btn_circle.png", "images/btn_circle.png");
this.loader.add("brake_bike.png", "images/brake_bike.png");
this.loader.add("brake_handlerbar.png", "images/brake_handlerbar.png");
this.loader.add("brake_lever.png", "images/brake_lever.png");
this.loader.add("malu_line.png", "images/malu_line.png");
this.loader.load();

绘制按钮给按钮加上动画

let actionButton = new PIXI.Container();let btnImage = new PIXI.Sprite(this.loader.resources['btn.png'].texture);
let btnCircle = new PIXI.Sprite(this.loader.resources['btn_circle.png'].texture)
let btnCircle2 = new PIXI.Sprite(this.loader.resources['btn_circle.png'].texture)actionButton.addChild(btnImage);
actionButton.addChild(btnCircle);
actionButton.addChild(btnCircle2);btnImage.pivot.x = btnImage.pivot.y = btnImage.width / 2
btnCircle.pivot.x = btnCircle.pivot.y = btnCircle.width / 2
btnCircle2.pivot.x = btnCircle2.pivot.y = btnCircle2.width / 2
btnCircle.scale.x = btnCircle.scale.y = 0.8
actionButton.scale.x = actionButton.scale.y = 0.8
gsap.to(btnCircle.scale, { duration: 1, x: 1.3, y: 1.3, repeat: -1 })
gsap.to(btnCircle.scale, { duration: 1, alpha: 0, repeat: -1 })
return actionButton;

绘制自行车

const bikeContainer = new PIXI.Container();
this.stage.addChild(bikeContainer)bikeContainer.scale.x = bikeContainer.scale.y = 0.3;
const bikeImage = new PIXI.Sprite(this.loader.resources['brake_bike.png'].texture);
bikeContainer.addChild(bikeImage)const bikeLeverImage = new PIXI.Sprite(this.loader.resources['brake_lever.png'].texture);
bikeContainer.addChild(bikeLeverImage)bikeLeverImage.pivot.x = 455;
bikeLeverImage.pivot.y = 455;bikeLeverImage.x = 722;
bikeLeverImage.y = 900;
const bikeHandbarImage = new PIXI.Sprite(this.loader.resources['brake_handlerbar.png'].texture);
bikeContainer.addChild(bikeHandbarImage)

绘制粒子效果

let particleContainer = new PIXI.Container();
this.stage.addChild(particleContainer);particleContainer.rotation = 35 * Math.PI / 180;
particleContainer.pivot.x = window.innerWidth / 2;
particleContainer.pivot.y = window.innerHeight / 2;particleContainer.x = window.innerWidth / 2;
particleContainer.y = window.innerHeight / 2;let particles = [];
const colors = [0xf1cf54, 0xb5cea8, 0xf1cf54, 0x818181, 0x000000];
for (let i = 0; i < 10; i++) {let gr = new PIXI.Graphics();let randomColor = Math.floor(Math.random() * colors.length)gr.beginFill(colors[randomColor]);gr.drawCircle(0, 0, 6);gr.endFill();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 += .5;speed = Math.min(speed, 20);for (let i = 0; i < particles.length; i++) {let pItem = particles[i];// pItem.gr.y += 10;pItem.gr.y += speed;if (speed >= 20) { // since slow to fastpItem.gr.scale.y = 40;pItem.gr.scale.x = 0.03;}if (pItem.gr.y > window.innerHeight) {pItem.gr.y = 0;}}
}
function start() {speed = 0;// gasp.ticker.add(loop)gsap.ticker.add(loop);
}
function pause() {gsap.ticker.remove(loop);for (let i = 0; i < particles.length; i++) {let pItem = particles[i];// pItem.gr.y += 10;pItem.gr.y += speed;pItem.gr.scale.y = 1;pItem.gr.scale.x = 1;gsap.to(pItem.gr, { duration: .6, x: pItem.sx, y: pItem.sy, ease: 'eelastic.out' })}}

给按钮绑定事件触发车把手的变化和粒子变化

actionButton.on("mousedown", () => {gsap.to(bikeLeverImage, { duration: .6, rotation: Math.PI / 180 * -30 })pause();
});
actionButton.on("mouseup", () => {gsap.to(bikeLeverImage, { duration: .6, rotation: 0 })start();
});

源码地址

PIXI+GSAP 防刹车动效相关推荐

前端canvas动效实战，PIXI+GSAP仿写vanmoof刹车动效 | 猿创营
前言事情是这样的,上个月接了一个活儿.客户要我们模仿一个国外的网站 https://www.vanmoof.com/en-NL/s3?color=dark 为他们做几个展示动效. 确实很酷!这个项目 ...
如何选取合适的前端动效方案？
一.原因前端动画场景需求多对众多动画场景的技术实现方案选择上比较模糊各动画方案的优劣及适用场景认识模糊现有动画库太多,不知道选哪个主流动画库的适用场景认识模糊二.分类动画用途展示型的动 ...
前端实现炫酷动效_20个网页动效设计的炫酷神器
如今很多 UI 设计师不是正在做动效,就正在学着做动效. 动效现在已经无处不在了.有的动效可能是一个微妙的悬停效果,使用 Bttn.css 或者是 Hover Buttons 的帮助下,添加到按钮上, ...
UI设计素材|切换动效，打破界面沉闷感
恰当的动效应用,不仅能够丰富页面的交互元素的视觉效果,也有助于提升整个页面的逻辑感和空间感. 在进行用户界面设计的时候,动效可以存在于交互.转场和具体的控件操作上,动效作为一种状态转变.交互反馈和 ...
动效引擎_要做动效？这75款动效工具让你无所不能（上）
原标题:要做动效?这75款动效工具让你无所不能(上) 动效这两年崛起非常之迅猛,几乎是网页设计领域最强大的设计趋势之一.无论是在设计师群体还是在用户当中,它的受欢迎程度都非常之高,大家都对它津津乐道. ...
HarmonyOS玩转ArkUI动效 - 水母动画
前言本文会详细讲解我参加: HarmonyOS[挑战赛第三期]玩转ArkUI动效的项目我的参赛项目源码:[挑战赛第三期]JellyfishAnimation 动画效果参考自:cassie-code ...
APP动效之美需内外兼修（转载自伯乐在线）
APP动效之美需内外兼修 2014/08/06 | 分类: 设计 | 0 条评论 | 标签: 交换设计分享到: 12 原文出处: 百度MUX 欢迎分享原创到伯乐头条移动互联网时代已经到来,AP ...
ui动效 unity_Unity - UIWidgets 2. 控件组合
UIWidgets没有提供完整文档, 称可以去看Flutter的文档中文 \ 英文控件(Control)在Flutter中称为"Widget", 一个界面的若干控件是通过wid ...
three相机在模型上_基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师梁神一.背景粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...
【骚气的动效】无限循环往下往复淡入淡出运动，通常用于向下箭头，提示用户可以往下滚动或者点击展开
/* 无限循环往下往复淡入淡出运动 */%auto-down-animate {animation: auto-down-animate 1s ease-in-out infinite;-moz-an ...

PIXI+GSAP 防刹车动效

前言

最终效果

使用到的技术

开发过程

创建一个PIXI.Application实例

加载项目需要用到的图片资源

绘制按钮给按钮加上动画

绘制自行车

绘制粒子效果

给按钮绑定事件触发车把手的变化和粒子变化

PIXI+GSAP 防刹车动效相关推荐

最新文章

热门文章