zhuhao
/
AIx_Smarttalk_WS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

优化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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/src/AixPPTist/src/views/Screen/BaseView.vue
View File

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

98
src/renderer/src/AixPPTist/src/views/Screen/hooks/useExecPlay.ts
View File

@ -28,53 +28,56 @@ export default (isLoader?: boolean = true) => {
// 执行元素动画 isAsync 为 true 时，异步执行，否则同步执行
const runAnimation = (isAsync: boolean) => {
// 正在执行动画时，禁止其他新的动画开始
if (inAnimation.value && !isAsync) return
return new Promise((resolve, reject) => {
// 正在执行动画时，禁止其他新的动画开始
if (inAnimation.value && !isAsync) return resolve()
const { animations, autoNext } = formatedAnimations.value[animationIndex.value]
animationIndex.value += 1
const { animations, autoNext } = formatedAnimations.value[animationIndex.value]
animationIndex.value += 1
// 标记开始执行动画
inAnimation.value = true
// 标记开始执行动画
inAnimation.value = true
let endAnimationCount = 0
let endAnimationCount = 0
// 依次执行该位置中的全部动画
for (const animation of animations) {
const elRef: HTMLElement | null = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
if (!elRef) {
endAnimationCount += 1
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`)
// 依次执行该位置中的全部动画
for (const animation of animations) {
const elRef: HTMLElement | null = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
if (!elRef) {
endAnimationCount += 1
continue
}
// 判断该位置上的全部动画都已经结束后，标记动画执行完成，并尝试继续向下执行（如果有需要）
endAnimationCount += 1
if (endAnimationCount === animations.length) {
inAnimation.value = false
if (autoNext) runAnimation()
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 = 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) { // 加载相关钩子
onMounted(() => {
@ -147,7 +150,7 @@ export default (isLoader?: boolean = true) => {
}
inAnimation.value = false
}
const execNext = (isAsync: boolean) => {
const execNext = async(isAsync: boolean) => {
if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) {
runAnimation(isAsync)
}
@ -216,9 +219,17 @@ export default (isLoader?: boolean = true) => {
// 向上翻页/向下翻页
const turning = async (e, type) => {
e.preventDefault() // 阻止默认事件
if (type === 'prev') execPrev()
else if (type === 'next') execNext()
if (classcourseStore.classcourse) { // 上课中
window.scrollTo(0, 0) // 滚动到顶部
const isCourse = !!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 animationSteps = animationIndex.value
const animation = type == 'next'?'Nextsteps':'Previoustep'
@ -285,5 +296,6 @@ export default (isLoader?: boolean = true) => {
execPrev,
execNext,
animationIndex,
turning,
}
}

8
src/renderer/src/views/prepare/container/class-start.vue
View File

@ -364,8 +364,12 @@ const openPublicScreen = (classcourse, isPublic) => {
console.log('打开公屏', classcourse)
if (!dt.ctCourse) { // 新开课需要发送消息-继续上课不需要直接打开
// 发送app端待开课消息
const data = { id: classcourse.id }
ChatWs.sendMsg(MsgEnum.HEADS.MSG_0000, data, {}, ChatWs.TYPES.single, userStore.id)
const TeacherId = 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)