update:会员特效
This commit is contained in:
@@ -0,0 +1,387 @@
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
shot: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
playKey: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
targetRadius: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
targetWidth: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
targetHeight: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
hitOffsetPx: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["complete", "impact"]);
|
||||
|
||||
const phase = ref("idle");
|
||||
const activePlayKey = ref("");
|
||||
const animationKey = ref("");
|
||||
const impactEmitted = ref(false);
|
||||
let timers = [];
|
||||
|
||||
const isActive = computed(() => phase.value !== "idle");
|
||||
const ARROW_IMPACT_MS = 340;
|
||||
const COMPLETE_FALLBACK_MS = 980;
|
||||
|
||||
const safeTargetRadius = computed(() => {
|
||||
const radius = Number(props.targetRadius);
|
||||
return Number.isFinite(radius) && radius > 0 ? radius : 20;
|
||||
});
|
||||
|
||||
const safeTargetSize = computed(() => {
|
||||
const width = Number(props.targetWidth);
|
||||
const height = Number(props.targetHeight);
|
||||
return {
|
||||
width: Number.isFinite(width) && width > 0 ? width : 0,
|
||||
height: Number.isFinite(height) && height > 0 ? height : 0,
|
||||
};
|
||||
});
|
||||
|
||||
const shotPoint = computed(() => {
|
||||
const x = Number(props.shot?.x);
|
||||
const y = Number(props.shot?.y);
|
||||
return {
|
||||
x: Number.isFinite(x) ? x : 0,
|
||||
y: Number.isFinite(y) ? y : 0,
|
||||
};
|
||||
});
|
||||
|
||||
const pointDirection = computed(() => {
|
||||
const point = shotPoint.value;
|
||||
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
|
||||
if (distance === 0) return null;
|
||||
|
||||
return {
|
||||
x: point.x / distance,
|
||||
y: point.y / distance,
|
||||
};
|
||||
});
|
||||
|
||||
const hitOffset = computed(() => {
|
||||
const offset = Number(props.hitOffsetPx);
|
||||
const safeOffset = Number.isFinite(offset) && offset > 0 ? offset : 0;
|
||||
const direction = pointDirection.value;
|
||||
|
||||
return {
|
||||
x: direction ? direction.x * safeOffset : 0,
|
||||
y: direction ? -direction.y * safeOffset : 0,
|
||||
};
|
||||
});
|
||||
|
||||
const hitPercent = computed(() => {
|
||||
const point = shotPoint.value;
|
||||
const radius = safeTargetRadius.value;
|
||||
const diameter = radius * 2;
|
||||
|
||||
return {
|
||||
left: ((point.x + radius) / diameter) * 100,
|
||||
top: ((radius - point.y) / diameter) * 100,
|
||||
};
|
||||
});
|
||||
|
||||
const arrowAngle = computed(() => {
|
||||
const size = safeTargetSize.value;
|
||||
if (!size.width || !size.height) {
|
||||
const dx = hitPercent.value.left - 50;
|
||||
const dy = 114 - hitPercent.value.top;
|
||||
const fallbackAngle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
|
||||
return Math.max(-18, Math.min(18, fallbackAngle));
|
||||
}
|
||||
|
||||
const startX = size.width * 0.5;
|
||||
const startY = size.height * 1.14;
|
||||
const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
|
||||
const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
|
||||
const dx = endX - startX;
|
||||
const dy = startY - endY;
|
||||
const angle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
|
||||
return Math.max(-18, Math.min(18, angle));
|
||||
});
|
||||
|
||||
function formatPxOffset(value) {
|
||||
if (!value) return "";
|
||||
const operator = value > 0 ? "+" : "-";
|
||||
return ` ${operator} ${Math.abs(value)}px`;
|
||||
}
|
||||
|
||||
function formatTargetPosition(percent, offset) {
|
||||
const pxOffset = formatPxOffset(offset);
|
||||
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
|
||||
}
|
||||
|
||||
const crackStyle = computed(() => ({
|
||||
left: formatTargetPosition(hitPercent.value.left, hitOffset.value.x),
|
||||
top: formatTargetPosition(hitPercent.value.top, hitOffset.value.y),
|
||||
}));
|
||||
|
||||
function getTargetTranslate(percent) {
|
||||
const absPercent = Math.abs(percent);
|
||||
const operator = percent >= 0 ? "-" : "+";
|
||||
return `calc(${percent}vw ${operator} ${absPercent * 0.5}px)`;
|
||||
}
|
||||
|
||||
const arrowMoveStyle = computed(() => {
|
||||
const size = safeTargetSize.value;
|
||||
let x = getTargetTranslate(hitPercent.value.left - 50);
|
||||
let y = getTargetTranslate(hitPercent.value.top - 114);
|
||||
|
||||
if (size.width && size.height) {
|
||||
const startX = size.width * 0.5;
|
||||
const startY = size.height * 1.14;
|
||||
const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
|
||||
const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
|
||||
x = `${endX - startX}px`;
|
||||
y = `${endY - startY}px`;
|
||||
}
|
||||
|
||||
return {
|
||||
"--shot-tx": x,
|
||||
"--shot-ty": y,
|
||||
"--shot-angle": `${arrowAngle.value}deg`,
|
||||
};
|
||||
});
|
||||
|
||||
function clearTimers() {
|
||||
timers.forEach((timer) => clearTimeout(timer));
|
||||
timers = [];
|
||||
}
|
||||
|
||||
function queueTimer(callback, delay) {
|
||||
const timer = setTimeout(callback, delay);
|
||||
timers.push(timer);
|
||||
}
|
||||
|
||||
function emitImpactOnce(playKey) {
|
||||
if (phase.value === "idle" || activePlayKey.value !== playKey || impactEmitted.value) return;
|
||||
impactEmitted.value = true;
|
||||
emit("impact");
|
||||
}
|
||||
|
||||
function finish(playKey) {
|
||||
if (phase.value === "idle" || activePlayKey.value !== playKey) return;
|
||||
clearTimers();
|
||||
phase.value = "idle";
|
||||
activePlayKey.value = "";
|
||||
emit("complete", playKey);
|
||||
}
|
||||
|
||||
function play() {
|
||||
if (!props.playKey || !props.shot || !props.shot.ring) return;
|
||||
|
||||
clearTimers();
|
||||
activePlayKey.value = props.playKey;
|
||||
animationKey.value = `${props.playKey}`;
|
||||
impactEmitted.value = false;
|
||||
phase.value = "playing";
|
||||
|
||||
queueTimer(() => {
|
||||
emitImpactOnce(activePlayKey.value);
|
||||
}, ARROW_IMPACT_MS);
|
||||
queueTimer(() => {
|
||||
finish(activePlayKey.value);
|
||||
}, COMPLETE_FALLBACK_MS);
|
||||
}
|
||||
|
||||
function handleArrowAnimationEnd() {
|
||||
emitImpactOnce(activePlayKey.value);
|
||||
}
|
||||
|
||||
function handleCrackAnimationEnd() {
|
||||
finish(activePlayKey.value);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.playKey,
|
||||
() => {
|
||||
play();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimers();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
v-show="isActive"
|
||||
:class="['shot-effect', `shot-effect--${phase}`]"
|
||||
:style="arrowMoveStyle"
|
||||
>
|
||||
<view
|
||||
:key="`arrow-${animationKey}`"
|
||||
class="shot-arrow-track"
|
||||
@animationend="handleArrowAnimationEnd"
|
||||
>
|
||||
<image
|
||||
class="shot-arrow"
|
||||
src="../static/vip/svip-jian.png"
|
||||
mode="heightFix"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
:key="`flash-${animationKey}`"
|
||||
class="shot-flash"
|
||||
:style="crackStyle"
|
||||
></view>
|
||||
<view
|
||||
:key="`crack-anchor-${animationKey}`"
|
||||
class="shot-crack-anchor"
|
||||
:style="crackStyle"
|
||||
>
|
||||
<image
|
||||
:key="`crack-${animationKey}`"
|
||||
class="shot-crack"
|
||||
src="../static/vip/svip-lie.png"
|
||||
mode="aspectFit"
|
||||
@animationend="handleCrackAnimationEnd"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shot-effect {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
overflow: visible;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.shot-arrow-track {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 114%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
animation: none;
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.shot-arrow {
|
||||
position: absolute;
|
||||
width: 248rpx;
|
||||
height: 1186rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
transform-origin: 44.35% 3.04%;
|
||||
transform: translate(-44.35%, -3.04%) rotate(var(--shot-angle));
|
||||
backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.shot-effect--playing .shot-arrow-track {
|
||||
animation: shot-arrow-fly 0.38s cubic-bezier(0.68, 0, 0.9, 0.62) forwards;
|
||||
}
|
||||
|
||||
.shot-flash,
|
||||
.shot-crack-anchor {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.shot-flash {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid rgba(255, 236, 166, 0.9);
|
||||
opacity: 0;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.shot-crack-anchor {
|
||||
width: 750rpx;
|
||||
height: 750rpx;
|
||||
}
|
||||
|
||||
.shot-crack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transform-origin: center center;
|
||||
animation: none;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.shot-effect--playing .shot-flash {
|
||||
animation: shot-flash 0.42s ease-out 0.32s forwards;
|
||||
}
|
||||
|
||||
.shot-effect--playing .shot-crack {
|
||||
animation: shot-crack-hit 0.52s ease-out 0.34s forwards;
|
||||
}
|
||||
|
||||
@keyframes shot-arrow-fly {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
86% {
|
||||
opacity: 1;
|
||||
transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shot-flash {
|
||||
0% {
|
||||
opacity: 0.95;
|
||||
transform: translate(-50%, -50%) scale(0.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shot-crack-hit {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.55);
|
||||
}
|
||||
28% {
|
||||
opacity: 1;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
56% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.18);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user