liangzejun/xyyh-hhj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

差替换视频

Browse Source
This commit is contained in:
梁泽军 2025-03-05 14:12:51 +08:00
parent bddae0d362
commit 6bf1549b6d
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Index.vue
View File

@ -219,6 +219,9 @@ const convertCoordinates = (point) => {
const svg = document.querySelector('.path-svg')
const pt = svg.createSVGPoint()
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
// 添加1px偏移修复iOS精度问题
pt.x = point.x + 1
pt.y = point.y + 1
@ -239,13 +242,14 @@ const initSvgAnimation = async () => {
const path = document.querySelector('#motionPath')
// 关键：设置SVG的preserveAspectRatio
svg.setAttribute('preserveAspectRatio', 'none')
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')
animation = gsap.to(xflIconRef.value, {
motionPath: {
path: "#motionPath",
align: "#motionPath",
autoRotate: false,
alignOrigin: [0.5, 0.5], // 中心点对齐
type: "uniform", // 均匀分布路径点
curviness: 0,
// 新增坐标转换
@ -264,19 +268,20 @@ const initSvgAnimation = async () => {
})
// 等待2帧确保渲染完成
await new Promise(resolve => requestAnimationFrame(resolve))
await new Promise(resolve => requestAnimationFrame(resolve))
// await new Promise(resolve => requestAnimationFrame(resolve))
// await new Promise(resolve => requestAnimationFrame(resolve))
// 强制重排
void path.offsetHeight
// void path.offsetHeight
// 初始定位优化
gsap.set(xflIconRef.value, {
x: convertCoordinates(path.getPointAtLength(0)).x,
y: convertCoordinates(path.getPointAtLength(0)).y,
force3D: true
})
// gsap.set(xflIconRef.value, {
// x: convertCoordinates(path.getPointAtLength(0)).x,
// y: convertCoordinates(path.getPointAtLength(0)).y,
// scale: 1.5,
// force3D: true
// })
}
@ -446,9 +451,9 @@ const animationFn = () => {
duration: 1,
ease: "back.inOut(3)",
onComplete: () => {
debounce.value = false
debounce.value = false
}
}
})
@ -692,16 +697,12 @@ const animationFn = () => {
position: absolute;
width: 163px;
height: 153px;
// 以中心放大1.5倍
will-change: transform;
transform: translateZ(0) translate(-50%, -50%) scale(1.5);
transform: scale(1.5);
visibility: hidden;
/* 旧iOS需要绝对像素值 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
will-change: transform;
transform: translateZ(0) translate(-50%, -50%) scale(1.5);
transform: scale(1.5);
}
#frameBox {

6
src/page/Home/main.js
View File

@ -2,7 +2,7 @@ import { createApp } from 'vue'
import App from './App.vue'
import { wxShare } from '@/plugins/wxshare';
// import {isMobile} from '@/plugins'
// import VConsole from 'vconsole';
import VConsole from 'vconsole';
import 'vant/lib/index.css';
@ -15,11 +15,11 @@ wxShare({
title: '兴福龙 护航记',
desc: '趣味地图大探索，消保守护每一程',
})
const vConsole = new VConsole();
// 测试环境开vconsole
// if (isMobile()) {
// // const vConsole = new VConsole();
// const vConsole = new VConsole();
// }
app.mount('#app')