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

31
src/components/Index.vue
View File

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

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

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