AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-19 12:49:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

完善碎裂特效

Browse Source
This commit is contained in:
unanmed 2023-08-01 13:02:56 +08:00
parent 61f520bcf1
commit b31afca4b1
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
idea.md
View File

@ -75,5 +75,5 @@ dam4.png ---- 存档 59
[] 优化开头动画 [] 优化开头动画
[] 玩家可以设置字体大小 [] 玩家可以设置字体大小
[] 完全删除 functions.js [] 完全删除 functions.js
[] 优化插件加载系统 [x] 优化插件加载系统
[] 优化 Scroll 组件 [] 优化 Scroll 组件

12
src/plugin/fx/frag.ts
View File

@ -1,4 +1,4 @@
import { Animation, bezier, sleep } from 'mutate-animate'; import { Animation, linear, sleep } from 'mutate-animate';
interface SplittedImage { interface SplittedImage {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
@ -17,11 +17,11 @@ interface FraggingImage extends SplittedImage {
/** 最大移动距离，最终位置距离中心的距离变成原来的几倍 */ /** 最大移动距离，最终位置距离中心的距离变成原来的几倍 */
const MAX_MOVE_LENGTH = 1.15; const MAX_MOVE_LENGTH = 1.15;
/** 移动距离波动，在最大移动距离的基础上加上多少倍距离的波动距离 */ /** 移动距离波动，在最大移动距离的基础上加上多少倍距离的波动距离 */
const MOVE_FLUSH = 0.2; const MOVE_FLUSH = 0.7;
/** 最大旋转角，单位是弧度 */ /** 最大旋转角，单位是弧度 */
const MAX_ROTATE = 0.4; const MAX_ROTATE = 0.5;
/** 碎裂动画的速率曲线函数 */ /** 碎裂动画的速率曲线函数 */
const FRAG_TIMING = bezier(0.75); const FRAG_TIMING = linear();
export default function init() { export default function init() {
return { applyFragWith }; return { applyFragWith };
@ -30,7 +30,7 @@ export default function init() {
export function applyFragWith( export function applyFragWith(
canvas: HTMLCanvasElement, canvas: HTMLCanvasElement,
length: number = 4, length: number = 4,
time: number = 4000 time: number = 1000
) { ) {
// 先切分图片 // 先切分图片
const imgs = splitCanvas(canvas, length); const imgs = splitCanvas(canvas, length);
@ -44,7 +44,7 @@ export function applyFragWith(
const centerY = v.y + v.canvas.height / 2; const centerY = v.y + v.canvas.height / 2;
const onX = centerX === cx; const onX = centerX === cx;
const onY = centerY === cy; const onY = centerY === cy;
const rate = MAX_MOVE_LENGTH - 1 + Math.random() * MOVE_FLUSH; const rate = MAX_MOVE_LENGTH - 1 + Math.random() ** 3 * MOVE_FLUSH;
let endX = onY ? 0 : (centerX - cx) * rate; let endX = onY ? 0 : (centerX - cx) * rate;
let endY = onX ? 0 : (centerY - cy) * rate; let endY = onX ? 0 : (centerY - cy) * rate;
const mx = Math.abs(endX + centerX) + Math.abs(v.canvas.width); const mx = Math.abs(endX + centerX) + Math.abs(v.canvas.width);

1
src/plugin/game/enemy/battle.ts
View File

@ -206,6 +206,7 @@ core.events.afterBattle = function (
frag.style.top = `${top}px`; frag.style.top = `${top}px`;
frag.style.zIndex = '45'; frag.style.zIndex = '45';
frag.style.position = 'absolute'; frag.style.position = 'absolute';
frag.style.filter = 'sepia(20%)brightness(120%)';
core.dom.gameDraw.appendChild(frag); core.dom.gameDraw.appendChild(frag);
manager.onEnd.then(() => { manager.onEnd.then(() => {
frag.remove(); frag.remove();