hanqin
3 days ago
7 changed files with 260 additions and 14 deletions
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,135 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { Motion, useAnimationFrame, useMotionValue, useTransform } from 'motion-v'; |
||||
|
import { computed, ref, watch } from 'vue'; |
||||
|
|
||||
|
interface ShinyTextProps { |
||||
|
text: string; |
||||
|
disabled?: boolean; |
||||
|
speed?: number; |
||||
|
className?: string; |
||||
|
color?: string; |
||||
|
shineColor?: string; |
||||
|
spread?: number; |
||||
|
yoyo?: boolean; |
||||
|
pauseOnHover?: boolean; |
||||
|
direction?: 'left' | 'right'; |
||||
|
delay?: number; |
||||
|
} |
||||
|
|
||||
|
const props = withDefaults(defineProps<ShinyTextProps>(), { |
||||
|
disabled: false, |
||||
|
speed: 2, |
||||
|
className: '', |
||||
|
color: '#b5b5b5', |
||||
|
shineColor: '#ffffff', |
||||
|
spread: 120, |
||||
|
yoyo: false, |
||||
|
pauseOnHover: false, |
||||
|
direction: 'left', |
||||
|
delay: 0 |
||||
|
}); |
||||
|
|
||||
|
const isPaused = ref(false); |
||||
|
const progress = useMotionValue(0); |
||||
|
const elapsedRef = ref(0); |
||||
|
const lastTimeRef = ref<number | null>(null); |
||||
|
const directionRef = ref(props.direction === 'left' ? 1 : -1); |
||||
|
|
||||
|
const animationDuration = computed(() => props.speed * 1000); |
||||
|
const delayDuration = computed(() => props.delay * 1000); |
||||
|
|
||||
|
useAnimationFrame(time => { |
||||
|
if (props.disabled || isPaused.value) { |
||||
|
lastTimeRef.value = null; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (lastTimeRef.value === null) { |
||||
|
lastTimeRef.value = time; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const deltaTime = time - lastTimeRef.value; |
||||
|
lastTimeRef.value = time; |
||||
|
|
||||
|
elapsedRef.value += deltaTime; |
||||
|
|
||||
|
// Animation goes from 0 to 100 |
||||
|
if (props.yoyo) { |
||||
|
const cycleDuration = animationDuration.value + delayDuration.value; |
||||
|
const fullCycle = cycleDuration * 2; |
||||
|
const cycleTime = elapsedRef.value % fullCycle; |
||||
|
|
||||
|
if (cycleTime < animationDuration.value) { |
||||
|
// Forward animation: 0 -> 100 |
||||
|
const p = (cycleTime / animationDuration.value) * 100; |
||||
|
progress.set(directionRef.value === 1 ? p : 100 - p); |
||||
|
} else if (cycleTime < cycleDuration) { |
||||
|
// Delay at end |
||||
|
progress.set(directionRef.value === 1 ? 100 : 0); |
||||
|
} else if (cycleTime < cycleDuration + animationDuration.value) { |
||||
|
// Reverse animation: 100 -> 0 |
||||
|
const reverseTime = cycleTime - cycleDuration; |
||||
|
const p = 100 - (reverseTime / animationDuration.value) * 100; |
||||
|
progress.set(directionRef.value === 1 ? p : 100 - p); |
||||
|
} else { |
||||
|
// Delay at start |
||||
|
progress.set(directionRef.value === 1 ? 0 : 100); |
||||
|
} |
||||
|
} else { |
||||
|
const cycleDuration = animationDuration.value + delayDuration.value; |
||||
|
const cycleTime = elapsedRef.value % cycleDuration; |
||||
|
|
||||
|
if (cycleTime < animationDuration.value) { |
||||
|
// Animation phase: 0 -> 100 |
||||
|
const p = (cycleTime / animationDuration.value) * 100; |
||||
|
progress.set(directionRef.value === 1 ? p : 100 - p); |
||||
|
} else { |
||||
|
// Delay phase - hold at end (shine off-screen) |
||||
|
progress.set(directionRef.value === 1 ? 100 : 0); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
watch( |
||||
|
() => props.direction, |
||||
|
() => { |
||||
|
directionRef.value = props.direction === 'left' ? 1 : -1; |
||||
|
elapsedRef.value = 0; |
||||
|
progress.set(0); |
||||
|
}, |
||||
|
{ |
||||
|
immediate: true |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
const backgroundPosition = useTransform(progress, p => `${150 - p * 2}% center`); |
||||
|
|
||||
|
const handleMouseEnter = () => { |
||||
|
if (props.pauseOnHover) isPaused.value = true; |
||||
|
}; |
||||
|
|
||||
|
const handleMouseLeave = () => { |
||||
|
if (props.pauseOnHover) isPaused.value = false; |
||||
|
}; |
||||
|
|
||||
|
const gradientStyle = computed(() => ({ |
||||
|
backgroundImage: `linear-gradient(${props.spread}deg, ${props.color} 0%, ${props.color} 35%, ${props.shineColor} 50%, ${props.color} 65%, ${props.color} 100%)`, |
||||
|
backgroundSize: '200% auto', |
||||
|
WebkitBackgroundClip: 'text', |
||||
|
backgroundClip: 'text', |
||||
|
WebkitTextFillColor: 'transparent' |
||||
|
})); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<Motion |
||||
|
tag="span" |
||||
|
:class="['inline-block', className]" |
||||
|
:style="{ ...gradientStyle, backgroundPosition }" |
||||
|
@mouseenter="handleMouseEnter" |
||||
|
@mouseleave="handleMouseLeave" |
||||
|
> |
||||
|
{{ text }} |
||||
|
</Motion> |
||||
|
</template> |
||||
@ -0,0 +1,94 @@ |
|||||
|
<template> |
||||
|
<component |
||||
|
:is="as" |
||||
|
:class="['relative inline-block overflow-hidden !bg-transparent !border-none !rounded-[20px]', customClass]" |
||||
|
v-bind="restAttrs" |
||||
|
:style="componentStyle" |
||||
|
> |
||||
|
<div |
||||
|
class="absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0" |
||||
|
:style="{ |
||||
|
background: `radial-gradient(circle, ${color}, transparent 10%)`, |
||||
|
animationDuration: speed |
||||
|
}" |
||||
|
></div> |
||||
|
|
||||
|
<div |
||||
|
class="absolute w-[300%] h-[50%] opacity-70 top-[-10px] left-[-250%] rounded-full animate-star-movement-top z-0" |
||||
|
:style="{ |
||||
|
background: `radial-gradient(circle, ${color}, transparent 10%)`, |
||||
|
animationDuration: speed |
||||
|
}" |
||||
|
></div> |
||||
|
|
||||
|
<div |
||||
|
class="relative z-10 border border-[#333] bg-[#0b0b0b] text-white text-[16px] text-center px-[64px] py-[24px] rounded-[20px]" |
||||
|
> |
||||
|
<slot /> |
||||
|
</div> |
||||
|
</component> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { computed, defineProps, useAttrs } from 'vue'; |
||||
|
|
||||
|
interface StarBorderProps { |
||||
|
as?: string; |
||||
|
customClass?: string; |
||||
|
color?: string; |
||||
|
speed?: string; |
||||
|
thickness?: number; |
||||
|
} |
||||
|
|
||||
|
const props = withDefaults(defineProps<StarBorderProps>(), { |
||||
|
as: 'button', |
||||
|
customClass: '', |
||||
|
color: 'white', |
||||
|
speed: '6s', |
||||
|
thickness: 1 |
||||
|
}); |
||||
|
|
||||
|
const restAttrs = useAttrs(); |
||||
|
|
||||
|
const componentStyle = computed(() => { |
||||
|
const base = { |
||||
|
padding: `${props.thickness}px 0` |
||||
|
}; |
||||
|
const userStyle = (restAttrs.style as Record<string, string>) || {}; |
||||
|
return { ...base, ...userStyle }; |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
@keyframes star-movement-bottom { |
||||
|
0% { |
||||
|
transform: translate(0%, 0%); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
transform: translate(-100%, 0%); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes star-movement-top { |
||||
|
0% { |
||||
|
transform: translate(0%, 0%); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
transform: translate(100%, 0%); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.animate-star-movement-bottom { |
||||
|
animation: star-movement-bottom linear infinite alternate; |
||||
|
} |
||||
|
|
||||
|
.animate-star-movement-top { |
||||
|
animation: star-movement-top linear infinite alternate; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue