挥一挥手，炸弹走你——二阶贝塞尔仿微信扔炸弹动画

Android

2023-12-03 04:49:15

前言

微信炸屎动画风靡一时，相信不少人已经体验过。这里我们先仿照一个微信扔炸弹的动画，后续有时间会做一个更完整的版本。

具体实现

最麻烦的部分是绘制抛物线，爆炸效果只是播放了一个动画。微信似乎都是使用二阶贝塞尔曲线来绘制抛物线的，因为它可以轻松地控制曲线的形状。

一、二阶贝塞尔曲线

二阶贝塞尔曲线由三个点定义：起点、终点和控制点。控制点决定曲线的形状。

要绘制二阶贝塞尔曲线，可以使用以下步骤：

将起点和终点连接成一条直线。
在直线的中点添加一个控制点。
将起点和控制点连接成一条直线。
将控制点和终点连接成一条直线。
这两条直线相交于一点，该点就是二阶贝塞尔曲线上的一点。
重复步骤 3 到 5，直到绘制出整个曲线。

二、代码实现

// 定义起点、终点和控制点
var startPoint = {x: 0, y: 0};
var endPoint = {x: 100, y: 100};
var controlPoint = {x: 50, y: 50};

// 绘制二阶贝塞尔曲线
var curve = new BezierCurve(startPoint, endPoint, controlPoint);

// 将曲线添加到画布上
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "#000";
context.beginPath();
context.moveTo(startPoint.x, startPoint.y);
context.bezierCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
context.stroke();

三、爆炸效果

爆炸效果很简单，只需要播放一个动画即可。

// 创建爆炸动画
var explosion = new Animation("explosion.png", 100, 100);

// 将爆炸动画添加到画布上
context.drawImage(explosion.image, explosion.x, explosion.y);

四、完整代码

// 定义起点、终点和控制点
var startPoint = {x: 0, y: 0};
var endPoint = {x: 100, y: 100};
var controlPoint = {x: 50, y: 50};

// 绘制二阶贝塞尔曲线
var curve = new BezierCurve(startPoint, endPoint, controlPoint);

// 将曲线添加到画布上
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "#000";
context.beginPath();
context.moveTo(startPoint.x, startPoint.y);
context.bezierCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
context.stroke();

// 创建爆炸动画
var explosion = new Animation("explosion.png", 100, 100);

// 将爆炸动画添加到画布上
context.drawImage(explosion.image, explosion.x, explosion.y);