优化ppt上课

This commit is contained in:
zdg 2024-12-27 15:21:55 +08:00
parent 14cf608c62
commit 1d10dff4dc
3 changed files with 62 additions and 45 deletions

View File

@ -104,6 +104,7 @@ const {
execPrev, execPrev,
execNext, execNext,
animationIndex, animationIndex,
turning,
} = useExecPlay() } = useExecPlay()
const { slideWidth, slideHeight } = useSlideSize() const { slideWidth, slideHeight } = useSlideSize()
const { exitScreening } = useScreening() const { exitScreening } = useScreening()

View File

@ -28,53 +28,56 @@ export default (isLoader?: boolean = true) => {
// 执行元素动画 isAsync 为 true 时,异步执行,否则同步执行 // 执行元素动画 isAsync 为 true 时,异步执行,否则同步执行
const runAnimation = (isAsync: boolean) => { const runAnimation = (isAsync: boolean) => {
// 正在执行动画时,禁止其他新的动画开始 return new Promise((resolve, reject) => {
if (inAnimation.value && !isAsync) return // 正在执行动画时,禁止其他新的动画开始
if (inAnimation.value && !isAsync) return resolve()
const { animations, autoNext } = formatedAnimations.value[animationIndex.value] const { animations, autoNext } = formatedAnimations.value[animationIndex.value]
animationIndex.value += 1 animationIndex.value += 1
// 标记开始执行动画 // 标记开始执行动画
inAnimation.value = true inAnimation.value = true
let endAnimationCount = 0 let endAnimationCount = 0
// 依次执行该位置中的全部动画 // 依次执行该位置中的全部动画
for (const animation of animations) { for (const animation of animations) {
const elRef: HTMLElement | null = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`) const elRef: HTMLElement | null = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
if (!elRef) { if (!elRef) {
endAnimationCount += 1 endAnimationCount += 1
continue continue
}
const animationName = `${ANIMATION_CLASS_PREFIX}${animation.effect}`
// 执行动画前先清除原有的动画状态(如果有)
elRef.style.removeProperty('--animate-duration')
for (const classname of elRef.classList) {
if (classname.indexOf(ANIMATION_CLASS_PREFIX) !== -1) elRef.classList.remove(classname, `${ANIMATION_CLASS_PREFIX}animated`)
}
// 执行动画
elRef.style.setProperty('--animate-duration', `${animation.duration}ms`)
elRef.classList.add(animationName, `${ANIMATION_CLASS_PREFIX}animated`)
// 执行动画结束,将“退场”以外的动画状态清除
const handleAnimationEnd = () => {
if (animation.type !== 'out') {
elRef.style.removeProperty('--animate-duration')
elRef.classList.remove(animationName, `${ANIMATION_CLASS_PREFIX}animated`)
} }
// 判断该位置上的全部动画都已经结束后,标记动画执行完成,并尝试继续向下执行(如果有需要) const animationName = `${ANIMATION_CLASS_PREFIX}${animation.effect}`
endAnimationCount += 1
if (endAnimationCount === animations.length) { // 执行动画前先清除原有的动画状态(如果有)
inAnimation.value = false elRef.style.removeProperty('--animate-duration')
if (autoNext) runAnimation() for (const classname of elRef.classList) {
if (classname.indexOf(ANIMATION_CLASS_PREFIX) !== -1) elRef.classList.remove(classname, `${ANIMATION_CLASS_PREFIX}animated`)
} }
// 执行动画
elRef.style.setProperty('--animate-duration', `${animation.duration}ms`)
elRef.classList.add(animationName, `${ANIMATION_CLASS_PREFIX}animated`)
// 执行动画结束,将“退场”以外的动画状态清除
const handleAnimationEnd = async() => {
if (animation.type !== 'out') {
elRef.style.removeProperty('--animate-duration')
elRef.classList.remove(animationName, `${ANIMATION_CLASS_PREFIX}animated`)
}
// 判断该位置上的全部动画都已经结束后,标记动画执行完成,并尝试继续向下执行(如果有需要)
endAnimationCount += 1
if (endAnimationCount === animations.length) {
inAnimation.value = false
if (autoNext) await runAnimation()
resolve() // 执行完成
}
}
elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
} }
elRef.addEventListener('animationend', handleAnimationEnd, { once: true }) })
}
} }
if (isLoader) { // 加载相关钩子 if (isLoader) { // 加载相关钩子
onMounted(() => { onMounted(() => {
@ -147,7 +150,7 @@ export default (isLoader?: boolean = true) => {
} }
inAnimation.value = false inAnimation.value = false
} }
const execNext = (isAsync: boolean) => { const execNext = async(isAsync: boolean) => {
if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) { if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) {
runAnimation(isAsync) runAnimation(isAsync)
} }
@ -216,9 +219,17 @@ export default (isLoader?: boolean = true) => {
// 向上翻页/向下翻页 // 向上翻页/向下翻页
const turning = async (e, type) => { const turning = async (e, type) => {
e.preventDefault() // 阻止默认事件 e.preventDefault() // 阻止默认事件
if (type === 'prev') execPrev() window.scrollTo(0, 0) // 滚动到顶部
else if (type === 'next') execNext() const isCourse = !!classcourseStore.classcourse
if (classcourseStore.classcourse) { // 上课中 if (type === 'prev') {
if (!isCourse) execPrev() // 上一步
else { // 上课状态: 上一步 动作变成 上一页
const current = slideIndex.value
if (current <= 0) return throttleMassage('已经是第一页了')
turnSlideToIndex(current - 1) // 翻页: 上一页
}
} else if (type === 'next') execNext()
if (isCourse) { // 上课中
const current = slideIndex.value const current = slideIndex.value
const animationSteps = animationIndex.value const animationSteps = animationIndex.value
const animation = type == 'next'?'Nextsteps':'Previoustep' const animation = type == 'next'?'Nextsteps':'Previoustep'
@ -285,5 +296,6 @@ export default (isLoader?: boolean = true) => {
execPrev, execPrev,
execNext, execNext,
animationIndex, animationIndex,
turning,
} }
} }

View File

@ -364,8 +364,12 @@ const openPublicScreen = (classcourse, isPublic) => {
console.log('打开公屏', classcourse) console.log('打开公屏', classcourse)
if (!dt.ctCourse) { // - if (!dt.ctCourse) { // -
// app // app
const data = { id: classcourse.id } const TeacherId = userStore.id
ChatWs.sendMsg(MsgEnum.HEADS.MSG_0000, data, {}, ChatWs.TYPES.single, userStore.id) const data = { id: classcourse.id, TeacherId }
const head = isPublic ? MsgEnum.HEADS.MSG_open : MsgEnum.HEADS.MSG_0000 //
const type = isPublic ? ChatWs.TYPES.group : ChatWs.TYPES.single //
const toId = isPublic ? classcourse.timgroupid : TeacherId //
ChatWs.sendMsg(head, data, {}, type, toId)
} }
// //
const resource = toRaw(myClassActive.value) const resource = toRaw(myClassActive.value)