mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-01-19 12:49:25 +08:00
完善碎裂特效
This commit is contained in:
parent
61f520bcf1
commit
b31afca4b1
2
idea.md
2
idea.md
@ -75,5 +75,5 @@ dam4.png ---- 存档 59
|
|||||||
[] 优化开头动画
|
[] 优化开头动画
|
||||||
[] 玩家可以设置字体大小
|
[] 玩家可以设置字体大小
|
||||||
[] 完全删除 functions.js
|
[] 完全删除 functions.js
|
||||||
[] 优化插件加载系统
|
[x] 优化插件加载系统
|
||||||
[] 优化 Scroll 组件
|
[] 优化 Scroll 组件
|
||||||
|
@ -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);
|
||||||
|
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user