mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
refactor: 重构元素动画
This commit is contained in:
pipipi-pikachu
parent
b5383c45fe
commit
a67370c48d
@ -1,4 +1,8 @@
|
||||
export const ANIMATIONS = [
|
||||
export const ANIMATION_DEFAULT_DURATION = 1000
|
||||
export const ANIMATION_DEFAULT_TRIGGER = 'click'
|
||||
export const ANIMATION_CLASS_PREFIX = 'animate__'
|
||||
|
||||
export const ENTER_ANIMATIONS = [
|
||||
{
|
||||
type: 'bounce',
|
||||
name: '弹跳',
|
||||
@ -9,7 +13,6 @@ export const ANIMATIONS = [
|
||||
{ name: '向上弹入', value: 'bounceInUp' },
|
||||
{ name: '向下弹入', value: 'bounceInDown' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'fade',
|
||||
@ -29,19 +32,17 @@ export const ANIMATIONS = [
|
||||
{ name: '从左下浮入', value: 'fadeInBottomLeft' },
|
||||
{ name: '从右下浮入', value: 'fadeInBottomRight' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'rotate',
|
||||
name: '旋转',
|
||||
children: [
|
||||
{ name: '旋转进入', value: 'rotateIn' },
|
||||
{ name: '绕左下旋转进入', value: 'rotateInDownLeft' },
|
||||
{ name: '绕右下旋转进入', value: 'rotateInDownRight' },
|
||||
{ name: '绕左上旋转进入', value: 'rotateInUpLeft' },
|
||||
{ name: '绕右上旋转进入', value: 'rotateInUpRight' },
|
||||
{ name: '绕左下进入', value: 'rotateInDownLeft' },
|
||||
{ name: '绕右下进入', value: 'rotateInDownRight' },
|
||||
{ name: '绕左上进入', value: 'rotateInUpLeft' },
|
||||
{ name: '绕右上进入', value: 'rotateInUpRight' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'zoom',
|
||||
@ -53,7 +54,6 @@ export const ANIMATIONS = [
|
||||
{ name: '从右放大进入', value: 'zoomInRight' },
|
||||
{ name: '向上放大进入', value: 'zoomInUp' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'slide',
|
||||
@ -64,7 +64,6 @@ export const ANIMATIONS = [
|
||||
{ name: '从左滑入', value: 'slideInRight' },
|
||||
{ name: '向上滑入', value: 'slideInUp' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'flip',
|
||||
@ -73,7 +72,6 @@ export const ANIMATIONS = [
|
||||
{ name: 'X轴翻转进入', value: 'flipInX' },
|
||||
{ name: 'Y轴翻转进入', value: 'flipInY' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'back',
|
||||
@ -84,7 +82,6 @@ export const ANIMATIONS = [
|
||||
{ name: '从右放大滑入', value: 'backInRight' },
|
||||
{ name: '向上放大滑入', value: 'backInUp' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'lightSpeed',
|
||||
@ -93,11 +90,10 @@ export const ANIMATIONS = [
|
||||
{ name: '从右飞入', value: 'lightSpeedInRight' },
|
||||
{ name: '从左飞入', value: 'lightSpeedInLeft' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
]
|
||||
|
||||
export const ANIMATIONS_EXITS = [
|
||||
export const EXIT_ANIMATIONS = [
|
||||
{
|
||||
type: 'bounce',
|
||||
name: '弹跳',
|
||||
@ -108,7 +104,6 @@ export const ANIMATIONS_EXITS = [
|
||||
{ name: '向上弹出', value: 'bounceOutUp' },
|
||||
{ name: '向下弹出', value: 'bounceOutDown' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'fade',
|
||||
@ -128,19 +123,17 @@ export const ANIMATIONS_EXITS = [
|
||||
{ name: '从左下浮出', value: 'fadeOutBottomLeft' },
|
||||
{ name: '从右下浮出', value: 'fadeOutBottomRight' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'rotate',
|
||||
name: '旋转',
|
||||
children: [
|
||||
{ name: '旋转退出', value: 'rotateOut' },
|
||||
{ name: '绕左下旋转退出', value: 'rotateOutDownLeft' },
|
||||
{ name: '绕右下旋转退出', value: 'rotateOutDownRight' },
|
||||
{ name: '绕左上旋转退出', value: 'rotateOutUpLeft' },
|
||||
{ name: '绕右上旋转退出', value: 'rotateOutUpRight' },
|
||||
{ name: '绕左下退出', value: 'rotateOutDownLeft' },
|
||||
{ name: '绕右下退出', value: 'rotateOutDownRight' },
|
||||
{ name: '绕左上退出', value: 'rotateOutUpLeft' },
|
||||
{ name: '绕右上退出', value: 'rotateOutUpRight' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'zoom',
|
||||
@ -152,7 +145,6 @@ export const ANIMATIONS_EXITS = [
|
||||
{ name: '从右缩小退出', value: 'zoomOutRight' },
|
||||
{ name: '向上缩小退出', value: 'zoomOutUp' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'slide',
|
||||
@ -163,7 +155,6 @@ export const ANIMATIONS_EXITS = [
|
||||
{ name: '从右滑出', value: 'slideOutRight' },
|
||||
{ name: '向上滑出', value: 'slideOutUp' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'flip',
|
||||
@ -172,7 +163,6 @@ export const ANIMATIONS_EXITS = [
|
||||
{ name: 'X轴翻转退出', value: 'flipOutX' },
|
||||
{ name: 'Y轴翻转退出', value: 'flipOutY' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'back',
|
||||
@ -183,7 +173,6 @@ export const ANIMATIONS_EXITS = [
|
||||
{ name: '从右缩小滑出', value: 'backOutRight' },
|
||||
{ name: '向上缩小滑出', value: 'backOutUp' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
{
|
||||
type: 'lightSpeed',
|
||||
@ -192,6 +181,5 @@ export const ANIMATIONS_EXITS = [
|
||||
{ name: '从右飞出', value: 'lightSpeedOutRight' },
|
||||
{ name: '从左飞出', value: 'lightSpeedOutLeft' },
|
||||
],
|
||||
hiddenElement: []
|
||||
},
|
||||
]
|
||||
@ -33,7 +33,6 @@ import {
|
||||
Drawer,
|
||||
Spin,
|
||||
Alert,
|
||||
Tabs,
|
||||
} from 'ant-design-vue'
|
||||
|
||||
const app = createApp(App)
|
||||
@ -63,8 +62,6 @@ app.component('Checkbox', Checkbox)
|
||||
app.component('Drawer', Drawer)
|
||||
app.component('Spin', Spin)
|
||||
app.component('Alert', Alert)
|
||||
app.component('Tabs', Tabs)
|
||||
app.component('TabPane', Tabs.TabPane)
|
||||
|
||||
app.use(Icon)
|
||||
app.use(Component)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import tinycolor from 'tinycolor2'
|
||||
import { omit } from 'lodash'
|
||||
import { Slide, SlideTheme, PPTElement } from '@/types/slides'
|
||||
import { Slide, SlideTheme, PPTElement, PPTAnimation } from '@/types/slides'
|
||||
import { slides } from '@/mocks/slides'
|
||||
import { theme } from '@/mocks/theme'
|
||||
import { layouts } from '@/mocks/layout'
|
||||
@ -16,6 +16,11 @@ interface UpdateElementData {
|
||||
props: Partial<PPTElement>;
|
||||
}
|
||||
|
||||
interface FormatedAnimation {
|
||||
animations: PPTAnimation[];
|
||||
autoNext: boolean;
|
||||
}
|
||||
|
||||
export interface SlidesState {
|
||||
theme: SlideTheme;
|
||||
slides: Slide[];
|
||||
@ -38,13 +43,43 @@ export const useSlidesStore = defineStore('slides', {
|
||||
|
||||
currentSlideAnimations(state) {
|
||||
const currentSlide = state.slides[state.slideIndex]
|
||||
if (!currentSlide) return null
|
||||
const animations = currentSlide.animations
|
||||
if (!animations) return null
|
||||
if (!currentSlide?.animations) return []
|
||||
|
||||
const els = currentSlide.elements
|
||||
const elIds = els.map(el => el.id)
|
||||
return animations.filter(animation => elIds.includes(animation.elId))
|
||||
return currentSlide.animations.filter(animation => elIds.includes(animation.elId))
|
||||
},
|
||||
|
||||
// 格式化的当前页动画
|
||||
// 将触发条件为“与上一动画同时”的项目向上合并到序列中的同一位置
|
||||
// 为触发条件为“上一动画之后”项目的上一项添加自动向下执行标记
|
||||
formatedAnimations(state) {
|
||||
const currentSlide = state.slides[state.slideIndex]
|
||||
if (!currentSlide?.animations) return []
|
||||
|
||||
const els = currentSlide.elements
|
||||
const elIds = els.map(el => el.id)
|
||||
const animations = currentSlide.animations.filter(animation => elIds.includes(animation.elId))
|
||||
|
||||
const formatedAnimations: FormatedAnimation[] = []
|
||||
for (const animation of animations) {
|
||||
if (animation.trigger === 'click') {
|
||||
formatedAnimations.push({ animations: [animation], autoNext: false })
|
||||
}
|
||||
if (animation.trigger === 'meantime') {
|
||||
const last = formatedAnimations[formatedAnimations.length - 1] || { animations: [], autoNext: false }
|
||||
last.animations = last.animations.filter(item => item.elId !== animation.elId)
|
||||
last.animations.push(animation)
|
||||
formatedAnimations[formatedAnimations.length - 1] = last
|
||||
}
|
||||
if (animation.trigger === 'auto') {
|
||||
const last = formatedAnimations[formatedAnimations.length - 1] || { animations: [], autoNext: false }
|
||||
last.autoNext = true
|
||||
formatedAnimations[formatedAnimations.length - 1] = last
|
||||
formatedAnimations.push({ animations: [animation], autoNext: false })
|
||||
}
|
||||
}
|
||||
return formatedAnimations
|
||||
},
|
||||
|
||||
layouts(state) {
|
||||
|
||||
@ -572,24 +572,21 @@ export type PPTElement = PPTTextElement | PPTImageElement | PPTShapeElement | PP
|
||||
*
|
||||
* elId: 元素ID
|
||||
*
|
||||
* type: 动画类型
|
||||
*
|
||||
* effect: 动画效果
|
||||
*
|
||||
* type: 动画类型（入场、退场）
|
||||
*
|
||||
* duration: 动画持续时间
|
||||
*
|
||||
* delay: 动画延迟时间
|
||||
*
|
||||
* implement: 动画启动方式(0->单击、1->与上一个一起、2->在上一个之后)
|
||||
* trigger: 动画触发方式(click - 单击时、meantime - 与上一动画同时、auto - 上一动画之后)
|
||||
*/
|
||||
export interface PPTAnimation {
|
||||
id: string;
|
||||
elId: string;
|
||||
type: string;
|
||||
effect: string;
|
||||
type: 'in' | 'out';
|
||||
duration: number;
|
||||
delay: number;
|
||||
implement: number;
|
||||
trigger: 'click' | 'meantime' | 'auto';
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -4,8 +4,6 @@ export const enum EmitterEvents {
|
||||
RICH_TEXT_COMMAND = 'RICH_TEXT_COMMAND',
|
||||
OPEN_CHART_DATA_EDITOR = 'OPEN_CHART_DATA_EDITOR',
|
||||
OPEN_LATEX_EDITOR = 'OPEN_LATEX_EDITOR',
|
||||
RUN_ANIMATION = 'RUN_ANIMATION',
|
||||
END_RUN_ANIMATION = 'END_RUN_ANIMATION',
|
||||
}
|
||||
|
||||
export interface RichTextAction {
|
||||
@ -22,8 +20,6 @@ type Events = {
|
||||
[EmitterEvents.RICH_TEXT_COMMAND]: RichTextCommand;
|
||||
[EmitterEvents.OPEN_CHART_DATA_EDITOR]: void;
|
||||
[EmitterEvents.OPEN_LATEX_EDITOR]: void;
|
||||
[EmitterEvents.RUN_ANIMATION]: void;
|
||||
[EmitterEvents.END_RUN_ANIMATION]: void;
|
||||
}
|
||||
|
||||
const emitter: Emitter<Events> = mitt<Events>()
|
||||
|
||||
@ -21,9 +21,9 @@
|
||||
|
||||
<div
|
||||
class="animation-index"
|
||||
v-if="toolbarState === 'elAnimation' && elementIndexInAnimation !== -1"
|
||||
v-if="toolbarState === 'elAnimation' && elementIndexListInAnimation.length"
|
||||
>
|
||||
{{elementIndexInAnimation + 1}}
|
||||
<div class="index-item" v-for="index in elementIndexListInAnimation" :key="index">{{index + 1}}</div>
|
||||
</div>
|
||||
|
||||
<LinkHandler
|
||||
@ -96,7 +96,7 @@ export default defineComponent({
|
||||
},
|
||||
setup(props) {
|
||||
const { canvasScale, toolbarState } = storeToRefs(useMainStore())
|
||||
const { currentSlide } = storeToRefs(useSlidesStore())
|
||||
const { formatedAnimations } = storeToRefs(useSlidesStore())
|
||||
|
||||
const currentOperateComponent = computed(() => {
|
||||
const elementTypeMap = {
|
||||
@ -113,9 +113,13 @@ export default defineComponent({
|
||||
return elementTypeMap[props.elementInfo.type] || null
|
||||
})
|
||||
|
||||
const elementIndexInAnimation = computed(() => {
|
||||
const animations = currentSlide.value.animations || []
|
||||
return animations.findIndex(animation => animation.elId === props.elementInfo.id)
|
||||
const elementIndexListInAnimation = computed(() => {
|
||||
const indexList = []
|
||||
for (let i = 0; i < formatedAnimations.value.length; i++) {
|
||||
const elIds = formatedAnimations.value[i].animations.map(item => item.elId)
|
||||
if (elIds.includes(props.elementInfo.id)) indexList.push(i)
|
||||
}
|
||||
return indexList
|
||||
})
|
||||
|
||||
const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
|
||||
@ -125,7 +129,7 @@ export default defineComponent({
|
||||
currentOperateComponent,
|
||||
canvasScale,
|
||||
toolbarState,
|
||||
elementIndexInAnimation,
|
||||
elementIndexListInAnimation,
|
||||
rotate,
|
||||
height,
|
||||
}
|
||||
@ -148,6 +152,8 @@ export default defineComponent({
|
||||
top: 0;
|
||||
left: -24px;
|
||||
font-size: 12px;
|
||||
|
||||
.index-item {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
@ -156,5 +162,10 @@ export default defineComponent({
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
& + .index-item {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,69 +7,40 @@
|
||||
@visibleChange="visible => handlePopoverVisibleChange(visible)"
|
||||
>
|
||||
<template #content>
|
||||
<Tabs v-model:activeKey="tabsActiveKey" tab-position="left" type="card">
|
||||
<TabPane key="animation_in" tab="进场动效">
|
||||
<div class="animation-pool">
|
||||
<div class="pool-type" :key="type.name" v-for="type in animations">
|
||||
<div v-if="!type.hiddenElement.includes(handleElement.type)">
|
||||
<div class="type-title">{{type.name}}：</div>
|
||||
<div class="tabs">
|
||||
<div
|
||||
:class="['tab', tab.key, { 'active': activeTab === tab.key }]"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
@click="activeTab = tab.key"
|
||||
>{{tab.label}}</div>
|
||||
</div>
|
||||
<template v-for="key in Object.keys(animations)">
|
||||
<div :class="['animation-pool', key]" :key="key" v-if="activeTab === key">
|
||||
<div class="pool-type" :key="effect.name" v-for="effect in animations[key]">
|
||||
<div class="type-title">{{effect.name}}：</div>
|
||||
<div class="pool-item-wrapper">
|
||||
<div
|
||||
class="pool-item"
|
||||
v-for="item in type.children" :key="item.name"
|
||||
v-for="item in effect.children" :key="item.name"
|
||||
@mouseenter="hoverPreviewAnimation = item.value"
|
||||
@mouseleave="hoverPreviewAnimation = ''"
|
||||
@click="addAnimation(item.value, 'in')"
|
||||
@click="addAnimation(key, item.value)"
|
||||
>
|
||||
<div
|
||||
class="animation-box"
|
||||
:class="[
|
||||
'animate__animated',
|
||||
'animate__faster',
|
||||
hoverPreviewAnimation === item.value && `animate__${item.value}`,
|
||||
`${prefix}animated`,
|
||||
`${prefix}faster`,
|
||||
hoverPreviewAnimation === item.value && `${prefix}${item.value}`,
|
||||
]"
|
||||
>
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
>{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mask" v-if="!popoverMaskHide"></div>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane key="animation_out" tab="退场动效">
|
||||
<div class="animation-pool">
|
||||
<div class="pool-type" :key="type.name" v-for="type in animationsExits">
|
||||
<div v-if="!type.hiddenElement.includes(handleElement.type)">
|
||||
<div class="type-title">{{type.name}}：</div>
|
||||
<div class="pool-item-wrapper">
|
||||
<div
|
||||
class="pool-item"
|
||||
v-for="item in type.children" :key="item.name"
|
||||
|
||||
@mouseenter="onAnimationOut(item)"
|
||||
@mouseleave="hoverPreviewAnimation = ''"
|
||||
@click="addAnimation(item.value, 'out')"
|
||||
>
|
||||
<div
|
||||
class="animation-box"
|
||||
:class="[
|
||||
'animate__animated',
|
||||
'animate__faster',
|
||||
hoverPreviewAnimation === item.value && `animate__${item.value}`,
|
||||
]"
|
||||
>
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mask" v-if="!popoverMaskHide"></div>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</template>
|
||||
</template>
|
||||
<Button class="element-animation-btn" @click="handleAnimationId = ''">
|
||||
<IconEffects style="margin-right: 5px;" /> 添加动画
|
||||
@ -87,17 +58,18 @@
|
||||
:animation="300"
|
||||
:scroll="true"
|
||||
:scrollSensitivity="50"
|
||||
handle=".sequence-content"
|
||||
@end="handleDragEnd"
|
||||
itemKey="id"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div class="sequence-item" :class="{ 'active': handleElement?.id === element.elId }">
|
||||
<template #item="{ element }">
|
||||
<div class="sequence-item" :class="[element.type, { 'active': handleElement?.id === element.elId }]">
|
||||
<div class="sequence-content">
|
||||
<div class="index">{{index + 1}}</div>
|
||||
<div class="text">【{{element.elType}}】{{element.animationType}}</div>
|
||||
<div class="index">{{element.index}}</div>
|
||||
<div class="text">【{{element.elType}}】{{element.animationEffect}}</div>
|
||||
<div class="handler">
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="预览">
|
||||
<IconPlayOne class="handler-btn" @click="runAnimation(element.elId, element.type, element.duration, element.delay)" />
|
||||
<IconPlayOne class="handler-btn" @click="runAnimation(element.elId, element.effect, element.duration)" />
|
||||
</Tooltip>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
|
||||
<IconCloseSmall class="handler-btn" @click="deleteAnimation(element.id)" />
|
||||
@ -105,51 +77,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="configs" v-if="handleElementAnimation.length && handleElementAnimation[0].elId === element.elId">
|
||||
<Divider />
|
||||
<div class="configs" v-if="handleElementAnimation[0]?.elId === element.elId">
|
||||
<Divider style="margin: 16px 0;" />
|
||||
|
||||
<div class="duration">
|
||||
<div style="flex: 3 1 0%;">动画时长</div>
|
||||
<div class="config-item">
|
||||
<div style="flex: 3;">持续时长：</div>
|
||||
<InputNumber
|
||||
:min="100"
|
||||
:max="5000"
|
||||
:step="100"
|
||||
:min="500"
|
||||
:max="3000"
|
||||
:step="500"
|
||||
:value="element.duration"
|
||||
@change="value => updateElementAnimationDuration(element, value)"
|
||||
style="flex: 4 1 20%;"
|
||||
@change="value => updateElementAnimationDuration(element.id, value)"
|
||||
style="flex: 5;"
|
||||
/>
|
||||
<div class="duration-r"> 毫秒</div>
|
||||
</div>
|
||||
|
||||
<div class="duration">
|
||||
<div style="flex: 3;">动画启动方式</div>
|
||||
<div class="config-item">
|
||||
<div style="flex: 3;">触发方式：</div>
|
||||
<Select
|
||||
v-model:value="element.implement"
|
||||
@change="value => updateElementAnimationImplement(element, value)"
|
||||
style="flex: 4;"
|
||||
:value="element.trigger"
|
||||
@change="value => updateElementAnimationTrigger(element.id, value)"
|
||||
style="flex: 5;"
|
||||
>
|
||||
<SelectOption :value="0">单击时</SelectOption>
|
||||
<SelectOption :value="1">与上一个一起</SelectOption>
|
||||
<SelectOption :value="2">在上一个之后</SelectOption>
|
||||
<SelectOption value="click">主动触发</SelectOption>
|
||||
<SelectOption value="meantime">与上一动画同时</SelectOption>
|
||||
<SelectOption value="auto">上一动画之后</SelectOption>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="duration" v-if="element.implement !== 1">
|
||||
<div style="flex: 1;">延迟</div>
|
||||
<InputNumber
|
||||
:min="0"
|
||||
:max="5000"
|
||||
:step="100"
|
||||
:value="element.delay"
|
||||
@change="value => updateElementAnimationDelay(element, value)"
|
||||
style="flex: 2;"
|
||||
/>
|
||||
<div class="duration-r">毫秒启动效果</div>
|
||||
</div>
|
||||
|
||||
<div class="duration duration-btn">
|
||||
<Button @click="handlePopoverVisibleChange(true), animationPoolVisible = true, handleAnimationId = element.id">更换特效</Button>
|
||||
<Button @click="updateElementAnimationAll(element)">应用到本页所有</Button>
|
||||
<div class="config-item">
|
||||
<Button style="flex: 1;" @click="openAnimationPool(element.id)">更换动画</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -161,31 +116,37 @@
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, watch } from 'vue'
|
||||
import { nanoid } from 'nanoid'
|
||||
import emitter, { EmitterEvents } from '@/utils/emitter'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useMainStore, useSlidesStore } from '@/store'
|
||||
import { PPTAnimation } from '@/types/slides'
|
||||
import { ANIMATIONS, ANIMATIONS_EXITS } from '@/configs/animation'
|
||||
import {
|
||||
ENTER_ANIMATIONS,
|
||||
EXIT_ANIMATIONS,
|
||||
ANIMATION_DEFAULT_DURATION,
|
||||
ANIMATION_DEFAULT_TRIGGER,
|
||||
ANIMATION_CLASS_PREFIX,
|
||||
} from '@/configs/animation'
|
||||
import { ELEMENT_TYPE_ZH } from '@/configs/element'
|
||||
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
import Draggable from 'vuedraggable'
|
||||
|
||||
const defaultDuration = 1000
|
||||
const defaultDelay = 0
|
||||
const defaultImplement = 0 // (0->单击、1->与上一个一起、2->在上一个之后)
|
||||
const animationEffects: { [key: string]: string } = {}
|
||||
for (const effect of ENTER_ANIMATIONS) {
|
||||
for (const animation of effect.children) {
|
||||
animationEffects[animation.value] = animation.name
|
||||
}
|
||||
}
|
||||
for (const effect of EXIT_ANIMATIONS) {
|
||||
for (const animation of effect.children) {
|
||||
animationEffects[animation.value] = animation.name
|
||||
}
|
||||
}
|
||||
|
||||
const animationTypes: { [key: string]: string } = {}
|
||||
for (const type of ANIMATIONS) {
|
||||
for (const animation of type.children) {
|
||||
animationTypes[animation.value] = animation.name
|
||||
}
|
||||
}
|
||||
for (const type of ANIMATIONS_EXITS) {
|
||||
for (const animation of type.children) {
|
||||
animationTypes[animation.value] = animation.name
|
||||
}
|
||||
type AnimationType = 'in' | 'out'
|
||||
interface TabItem {
|
||||
key: AnimationType;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
@ -196,54 +157,61 @@ export default defineComponent({
|
||||
setup() {
|
||||
const slidesStore = useSlidesStore()
|
||||
const { handleElement, handleElementId } = storeToRefs(useMainStore())
|
||||
const { currentSlide, currentSlideAnimations } = storeToRefs(slidesStore)
|
||||
const { currentSlide, formatedAnimations, currentSlideAnimations } = storeToRefs(slidesStore)
|
||||
|
||||
const tabs: TabItem[] = [
|
||||
{ key: 'in', label: '入场' },
|
||||
{ key: 'out', label: '退场' },
|
||||
]
|
||||
const activeTab = ref('in')
|
||||
|
||||
watch(() => handleElementId.value, () => {
|
||||
animationPoolVisible.value = false
|
||||
})
|
||||
|
||||
const hoverPreviewAnimation = ref('')
|
||||
const tabsActiveKey = ref('animation_in')
|
||||
const animationPoolVisible = ref(false)
|
||||
|
||||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
const animations = ANIMATIONS
|
||||
const animationsExits = ANIMATIONS_EXITS
|
||||
|
||||
// 当前页面的动画列表
|
||||
const animationSequence = computed(() => {
|
||||
if (!currentSlideAnimations.value) return []
|
||||
const animationSequence = []
|
||||
for (const animation of currentSlideAnimations.value) {
|
||||
for (let i = 0; i < formatedAnimations.value.length; i++) {
|
||||
const item = formatedAnimations.value[i]
|
||||
for (let j = 0; j < item.animations.length; j++) {
|
||||
const animation = item.animations[j]
|
||||
const el = currentSlide.value.elements.find(el => el.id === animation.elId)
|
||||
if (!el) continue
|
||||
|
||||
const elType = ELEMENT_TYPE_ZH[el.type]
|
||||
const animationType = animationTypes[animation.type]
|
||||
const animationEffect = animationEffects[animation.effect]
|
||||
animationSequence.push({
|
||||
...animation,
|
||||
index: j === 0 ? i + 1 : '',
|
||||
elType,
|
||||
animationType,
|
||||
animationEffect,
|
||||
})
|
||||
}
|
||||
}
|
||||
return animationSequence
|
||||
})
|
||||
|
||||
// 当前选中元素的入场动画信息
|
||||
const handleElementAnimation = computed(() => {
|
||||
const animations = currentSlideAnimations.value || []
|
||||
const animations = currentSlideAnimations.value
|
||||
const animation = animations.filter(item => item.elId === handleElementId.value)
|
||||
return animation || []
|
||||
})
|
||||
|
||||
// 删除元素入场动画
|
||||
// 删除元素动画
|
||||
const deleteAnimation = (id: string) => {
|
||||
const animations = (currentSlideAnimations.value as PPTAnimation[]).filter(item => item.id !== id)
|
||||
const animations = currentSlideAnimations.value.filter(item => item.id !== id)
|
||||
slidesStore.updateSlide({ animations })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 拖拽修改入场动画顺序后同步数据
|
||||
// 拖拽修改动画顺序后同步数据
|
||||
const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
|
||||
const { newIndex, oldIndex } = eventData
|
||||
if (oldIndex === newIndex) return
|
||||
@ -257,88 +225,46 @@ export default defineComponent({
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 执行入场动画预览
|
||||
const runAnimation = (elId: string, animationType: string, duration: number, delay: number) => {
|
||||
const prefix = 'animate__'
|
||||
// 执行动画预览
|
||||
const runAnimation = (elId: string, effect: string, duration: number) => {
|
||||
const elRef = document.querySelector(`#editable-element-${elId} [class^=editable-element-]`)
|
||||
if (elRef) {
|
||||
setTimeout(() => {
|
||||
const animationName = `${prefix}${animationType}`
|
||||
const animationName = `${ANIMATION_CLASS_PREFIX}${effect}`
|
||||
document.documentElement.style.setProperty('--animate-duration', `${duration}ms`)
|
||||
elRef.classList.add(`${prefix}animated`, animationName)
|
||||
|
||||
emitter.emit(EmitterEvents.RUN_ANIMATION)
|
||||
elRef.classList.add(`${ANIMATION_CLASS_PREFIX}animated`, animationName)
|
||||
|
||||
const handleAnimationEnd = () => {
|
||||
document.documentElement.style.removeProperty('--animate-duration')
|
||||
elRef.classList.remove(`${prefix}animated`, animationName)
|
||||
|
||||
emitter.emit(EmitterEvents.END_RUN_ANIMATION)
|
||||
elRef.classList.remove(`${ANIMATION_CLASS_PREFIX}animated`, animationName)
|
||||
}
|
||||
elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
|
||||
// 修改元素入场动画持续时间
|
||||
const updateElementAnimationDuration = (element: { id: string }, duration: number) => {
|
||||
if (!currentSlideAnimations.value) return
|
||||
// 修改元素动画持续时间
|
||||
const updateElementAnimationDuration = (id: string, duration: number) => {
|
||||
if (duration < 100 || duration > 5000) return
|
||||
|
||||
const animations = currentSlideAnimations.value.map(item => {
|
||||
if (item.id === element.id) return { ...item, duration }
|
||||
if (item.id === id) return { ...item, duration }
|
||||
return item
|
||||
})
|
||||
slidesStore.updateSlide({ animations })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 修改启动方式
|
||||
const updateElementAnimationImplement = (element: { id: string }, implement: number) => {
|
||||
if (!currentSlideAnimations.value) return
|
||||
|
||||
// 修改触发方式
|
||||
const updateElementAnimationTrigger = (id: string, trigger: 'click' | 'meantime' | 'auto') => {
|
||||
const animations = currentSlideAnimations.value.map(item => {
|
||||
if (item.id === element.id) return { ...item, implement }
|
||||
if (item.id === id) return { ...item, trigger }
|
||||
return item
|
||||
})
|
||||
slidesStore.updateSlide({ animations })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 修改延迟执行时间
|
||||
const updateElementAnimationDelay = (element: { id: string }, delay: number) => {
|
||||
if (!currentSlideAnimations.value) return
|
||||
if (delay < 0 || delay > 5000) return
|
||||
|
||||
const animations = currentSlideAnimations.value.map(item => {
|
||||
if (item.id === element.id) return { ...item, delay }
|
||||
return item
|
||||
})
|
||||
slidesStore.updateSlide({ animations })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
||||
// 应用本页全部动画
|
||||
const updateElementAnimationAll = (element: { duration: number; delay: number; implement: number }) => {
|
||||
if (!handleElementAnimation.value) return
|
||||
const animations: PPTAnimation[] = currentSlideAnimations.value ? JSON.parse(JSON.stringify(currentSlideAnimations.value)) : []
|
||||
|
||||
const handleElementAnimationMap = {
|
||||
duration: element.duration,
|
||||
delay: element.delay,
|
||||
implement: element.implement
|
||||
}
|
||||
const animationsUpdate: PPTAnimation[] = animations.map(x => Object.assign({}, x, handleElementAnimationMap))
|
||||
slidesStore.updateSlide({ animations: animationsUpdate })
|
||||
addHistorySnapshot()
|
||||
|
||||
message.success({ content: '已应用本页其他动画', duration: 3 })
|
||||
}
|
||||
|
||||
// 修改元素入场动画，并执行一次预览
|
||||
const updateElementAnimation = (type: string, effect: string) => {
|
||||
if (!currentSlideAnimations.value) return
|
||||
|
||||
// 修改元素动画，并执行一次预览
|
||||
const updateElementAnimation = (type: AnimationType, effect: string) => {
|
||||
const animations = currentSlideAnimations.value.map(item => {
|
||||
if (item.id === handleAnimationId.value) return { ...item, type, effect }
|
||||
return item
|
||||
@ -348,35 +274,33 @@ export default defineComponent({
|
||||
addHistorySnapshot()
|
||||
|
||||
const animationItem = currentSlideAnimations.value.find(item => item.elId === handleElementId.value)
|
||||
const duration = animationItem?.duration || defaultDuration
|
||||
const delay = animationItem?.delay || defaultDelay
|
||||
const duration = animationItem?.duration || ANIMATION_DEFAULT_DURATION
|
||||
|
||||
runAnimation(handleElementId.value, type, duration, delay)
|
||||
runAnimation(handleElementId.value, effect, duration)
|
||||
}
|
||||
|
||||
const handleAnimationId = ref('')
|
||||
// 添加元素入场动画，并执行一次预览
|
||||
const addAnimation = (type: string, effect: string) => {
|
||||
// 添加元素动画，并执行一次预览
|
||||
const addAnimation = (type: AnimationType, effect: string) => {
|
||||
if (handleAnimationId.value) {
|
||||
updateElementAnimation(type, effect)
|
||||
return
|
||||
}
|
||||
|
||||
const animations: PPTAnimation[] = currentSlideAnimations.value ? JSON.parse(JSON.stringify(currentSlideAnimations.value)) : []
|
||||
const animations: PPTAnimation[] = JSON.parse(JSON.stringify(currentSlideAnimations.value))
|
||||
animations.push({
|
||||
id: nanoid(10),
|
||||
elId: handleElementId.value,
|
||||
type,
|
||||
effect,
|
||||
duration: defaultDuration,
|
||||
delay: defaultDelay,
|
||||
implement: defaultImplement,
|
||||
duration: ANIMATION_DEFAULT_DURATION,
|
||||
trigger: ANIMATION_DEFAULT_TRIGGER,
|
||||
})
|
||||
slidesStore.updateSlide({ animations })
|
||||
animationPoolVisible.value = false
|
||||
addHistorySnapshot()
|
||||
|
||||
runAnimation(handleElementId.value, type, defaultDuration, defaultDelay)
|
||||
runAnimation(handleElementId.value, effect, ANIMATION_DEFAULT_DURATION)
|
||||
}
|
||||
|
||||
// 动画选择面板打开500ms后再移除遮罩层，否则打开面板后迅速滑入鼠标预览会导致抖动
|
||||
@ -388,52 +312,73 @@ export default defineComponent({
|
||||
else popoverMaskHide.value = false
|
||||
}
|
||||
|
||||
const animationOutItem = ref({})
|
||||
const animationOutTimer = ref(0)
|
||||
const onAnimationOut = (item: { value: string }) => {
|
||||
if (item.value === animationOutItem.value) {
|
||||
return
|
||||
}
|
||||
clearTimeout(animationOutTimer.value)
|
||||
animationOutItem.value = item
|
||||
hoverPreviewAnimation.value = item.value
|
||||
animationOutTimer.value = window.setTimeout(() => {
|
||||
hoverPreviewAnimation.value = ''
|
||||
}, 500)
|
||||
const openAnimationPool = (elementId: string) => {
|
||||
animationPoolVisible.value = true
|
||||
handleAnimationId.value = elementId
|
||||
handlePopoverVisibleChange(true)
|
||||
}
|
||||
|
||||
return {
|
||||
tabs,
|
||||
activeTab,
|
||||
handleAnimationId,
|
||||
handleElement,
|
||||
animationPoolVisible,
|
||||
animations,
|
||||
animationsExits,
|
||||
animationSequence,
|
||||
hoverPreviewAnimation,
|
||||
handleElementAnimation,
|
||||
popoverMaskHide,
|
||||
animations: {
|
||||
in: ENTER_ANIMATIONS,
|
||||
out: EXIT_ANIMATIONS,
|
||||
},
|
||||
prefix: ANIMATION_CLASS_PREFIX,
|
||||
addAnimation,
|
||||
deleteAnimation,
|
||||
handleDragEnd,
|
||||
runAnimation,
|
||||
updateElementAnimationDuration,
|
||||
updateElementAnimationImplement,
|
||||
updateElementAnimationDelay,
|
||||
updateElementAnimationTrigger,
|
||||
handlePopoverVisibleChange,
|
||||
updateElementAnimationAll,
|
||||
tabsActiveKey,
|
||||
onAnimationOut,
|
||||
openAnimationPool,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$inColor: #68a490;
|
||||
$outColor: #d86344;
|
||||
|
||||
.element-animation-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $borderColor;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tab {
|
||||
width: 50%;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid transparent;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid $themeColor;
|
||||
}
|
||||
&.in.active {
|
||||
border-bottom-color: $inColor;
|
||||
}
|
||||
&.out.active {
|
||||
border-bottom-color: $outColor;
|
||||
}
|
||||
}
|
||||
.element-animation {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
@ -442,19 +387,12 @@ export default defineComponent({
|
||||
.element-animation-btn {
|
||||
width: 100%;
|
||||
}
|
||||
.duration {
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
.config-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-break: keep-all;
|
||||
.duration-r {
|
||||
flex: 2;
|
||||
text-indent: 8px;
|
||||
}
|
||||
&.duration-btn {
|
||||
margin-top: 20px;
|
||||
justify-content: space-between;
|
||||
|
||||
& + .config-item {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
@ -474,11 +412,16 @@ export default defineComponent({
|
||||
position: relative;
|
||||
|
||||
.mask {
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@include absolute-0();
|
||||
}
|
||||
|
||||
&.in .type-title {
|
||||
border-left-color: $inColor;
|
||||
background-color: rgba($color: $inColor, $alpha: .15);
|
||||
}
|
||||
&.out .type-title {
|
||||
border-left-color: $outColor;
|
||||
background-color: rgba($color: $outColor, $alpha: .15);
|
||||
}
|
||||
}
|
||||
.type-title {
|
||||
@ -513,27 +456,31 @@ export default defineComponent({
|
||||
@include overflow-overlay();
|
||||
}
|
||||
.sequence-item {
|
||||
// height: 35px;
|
||||
border: 1px solid $borderColor;
|
||||
padding: 9px 6px;
|
||||
padding: 10px 6px;
|
||||
border-radius: $borderRadius;
|
||||
margin-bottom: 8px;
|
||||
transition: all .5s;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
&.in.active {
|
||||
border-color: $inColor;
|
||||
}
|
||||
&.out.active {
|
||||
border-color: $outColor;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $themeColor;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sequence-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// height: 23px;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.index {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@ export default defineComponent({
|
||||
},
|
||||
animationIndex: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
required: true,
|
||||
},
|
||||
turnSlideToId: {
|
||||
type: Function as PropType<(id: string) => void>,
|
||||
@ -75,47 +75,28 @@ export default defineComponent({
|
||||
return elementTypeMap[props.elementInfo.type] || null
|
||||
})
|
||||
|
||||
const { currentSlide, theme } = storeToRefs(useSlidesStore())
|
||||
const { formatedAnimations, theme } = storeToRefs(useSlidesStore())
|
||||
|
||||
// 判断元素是否需要等待执行入场动画：等待执行的元素需要先隐藏
|
||||
// 判断元素是否需要等待执行入场动画：等待执行入场的元素需要先隐藏
|
||||
const needWaitAnimation = computed(() => {
|
||||
const animations = currentSlide.value.animations || []
|
||||
const elementIndexInAnimation = animations.findIndex(animation => animation.elId === props.elementInfo.id)
|
||||
if (elementIndexInAnimation === -1) {
|
||||
return false
|
||||
}
|
||||
// 该元素在本页动画序列中的位置
|
||||
const elementIndexInAnimation = formatedAnimations.value.findIndex(item => {
|
||||
const elIds = item.animations.map(item => item.elId)
|
||||
return elIds.includes(props.elementInfo.id)
|
||||
})
|
||||
|
||||
// 首先判断是否 effect 为 in 的元素（多动画的第一条）
|
||||
const firstAnimation = animations.find(animation => animation.elId === props.elementInfo.id)
|
||||
if (!firstAnimation) {
|
||||
return false
|
||||
}
|
||||
// 该元素未设置过动画
|
||||
if (elementIndexInAnimation === -1) return false
|
||||
|
||||
// 先判断 animationIndex 到哪步 判断动画最后一条如果不是
|
||||
const findAnimationsList = animations.filter((animation, index) => index < props.animationIndex && animation.elId === props.elementInfo.id)
|
||||
if (findAnimationsList.length) {
|
||||
const lastAnimation = findAnimationsList[findAnimationsList.length - 1]
|
||||
const effect = lastAnimation.effect || 'in' // VERSION 2022/5/7 兼容旧数据: effect 为空则为进场动画
|
||||
if (effect === 'out') {
|
||||
return false
|
||||
}
|
||||
// 若该元素已执行过动画，都无须隐藏
|
||||
// 具体来说：若已执行的最后一个动画为入场，显然无须隐藏；若已执行的最后一个动画为退场，由于保留了退场动画结束状态，也无需额外隐藏
|
||||
if (elementIndexInAnimation < props.animationIndex) return false
|
||||
|
||||
if (elementIndexInAnimation >= props.animationIndex) {
|
||||
return true
|
||||
}
|
||||
// 若该元素未执行过动画，获取其将要执行的第一个动画
|
||||
// 若将要执行的第一个动画为入场，则需要隐藏，否则无须隐藏
|
||||
const firstAnimation = formatedAnimations.value[elementIndexInAnimation].animations.find(item => item.elId === props.elementInfo.id)
|
||||
if (firstAnimation?.type === 'in') return true
|
||||
return false
|
||||
}
|
||||
|
||||
// 最后再判断effect
|
||||
const firstEffectAnimation = animations.find(animation => animation.elId === props.elementInfo.id)
|
||||
if (firstEffectAnimation) {
|
||||
const effect = firstEffectAnimation.effect || 'in' // VERSION 2022/5/7 兼容旧数据: effect 为空则为进场动画
|
||||
if (effect === 'out') {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
// 打开元素绑定的超链接
|
||||
|
||||
@ -47,7 +47,7 @@ export default defineComponent({
|
||||
},
|
||||
animationIndex: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
required: true,
|
||||
},
|
||||
turnSlideToId: {
|
||||
type: Function as PropType<(id: string) => void>,
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
width: slideWidth + 'px',
|
||||
height: slideHeight + 'px',
|
||||
}"
|
||||
v-if="Math.abs(slideIndex - index) < 2"
|
||||
v-if="Math.abs(slideIndex - index) < 2 || slide.animations?.length"
|
||||
>
|
||||
<ScreenSlide
|
||||
:slide="slide"
|
||||
@ -59,7 +59,7 @@ export default defineComponent({
|
||||
},
|
||||
animationIndex: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
required: true,
|
||||
},
|
||||
turnSlideToId: {
|
||||
type: Function as PropType<(id: string) => void>,
|
||||
|
||||
@ -1,93 +1,92 @@
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { throttle } from 'lodash'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useSlidesStore } from '@/store'
|
||||
import { KEYS } from '@/configs/hotkey'
|
||||
import { ANIMATION_CLASS_PREFIX } from '@/configs/animation'
|
||||
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
export default () => {
|
||||
const slidesStore = useSlidesStore()
|
||||
const { slides, slideIndex, currentSlide } = storeToRefs(slidesStore)
|
||||
const { slides, slideIndex, formatedAnimations } = storeToRefs(slidesStore)
|
||||
|
||||
// 当前页的元素动画列表和当前执行到的位置
|
||||
const animations = computed(() => currentSlide.value.animations || [])
|
||||
// 当前页的元素动画执行到的位置
|
||||
const animationIndex = ref(0)
|
||||
const inAnimation = ref(false)
|
||||
|
||||
const awaitRef = ref<number | null>(-1)
|
||||
const awaitTimer = (delay: number) => {
|
||||
return new Promise((resolve) => {
|
||||
awaitRef.value = window.setTimeout(() => {
|
||||
awaitRef.value = null
|
||||
resolve(delay)
|
||||
}, delay)
|
||||
})
|
||||
}
|
||||
// 执行元素动画
|
||||
const runAnimation = () => {
|
||||
// 正在执行动画时，禁止其他新的动画开始
|
||||
if (inAnimation.value) return
|
||||
|
||||
// 执行元素的入场动画
|
||||
const runAnimation = async () => {
|
||||
const prefix = 'animate__'
|
||||
const animation = animations.value[animationIndex.value]
|
||||
|
||||
const elRef = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
|
||||
if (elRef) {
|
||||
if (awaitRef.value) {
|
||||
clearTimeout(awaitRef.value)
|
||||
awaitRef.value = null
|
||||
}
|
||||
else if (animation.implement !== 1) {
|
||||
// 判断执行动画 与上一动画在一起则不延迟
|
||||
await awaitTimer(animation.delay || 0)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line require-atomic-updates
|
||||
const { animations, autoNext } = formatedAnimations.value[animationIndex.value]
|
||||
animationIndex.value += 1
|
||||
|
||||
const animationName = `${prefix}${animation.type}`
|
||||
document.documentElement.style.setProperty('--animate-duration', `${animation.duration}ms`)
|
||||
// 标记开始执行动画
|
||||
inAnimation.value = true
|
||||
|
||||
// 判断如果存在非进场动画保留，就去除原动画
|
||||
elRef.classList.remove(`${prefix}animated`)
|
||||
for (let i = 0; i < elRef.classList.length; i++) {
|
||||
if (elRef.classList[i].indexOf(prefix) > -1) {
|
||||
elRef.classList.remove(elRef.classList[i])
|
||||
}
|
||||
}
|
||||
elRef.classList.add(animationName, `${prefix}animated`)
|
||||
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 = () => {
|
||||
document.documentElement.style.removeProperty('--animate-duration')
|
||||
if (animation.effect === 'in') { // 如果是进场动画就去除动画
|
||||
elRef.classList.remove(`${prefix}animated`)
|
||||
elRef.classList.remove(animationName)
|
||||
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) runAnimation()
|
||||
}
|
||||
}
|
||||
elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
|
||||
}
|
||||
}
|
||||
|
||||
// 判断下个动画
|
||||
if (animations.value.length && animationIndex.value < animations.value.length) {
|
||||
const nextAnimation = animations.value[animationIndex.value]
|
||||
// 撤销元素动画，除了将索引前移外，还需要清除动画状态
|
||||
const revokeAnimation = () => {
|
||||
animationIndex.value -= 1
|
||||
const { animations } = formatedAnimations.value[animationIndex.value]
|
||||
|
||||
if (nextAnimation.implement === 1) { // 一起
|
||||
runAnimation()
|
||||
for (const animation of animations) {
|
||||
const elRef: HTMLElement | null = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
|
||||
if (!elRef) continue
|
||||
|
||||
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`)
|
||||
}
|
||||
else if (nextAnimation.implement === 2) { // 之后
|
||||
await awaitTimer(animation.duration || 0)
|
||||
runAnimation()
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
animationIndex.value += 1
|
||||
runAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭自动播放
|
||||
const autoPlayTimer = ref<number>(0)
|
||||
const autoPlayTimer = ref(0)
|
||||
const closeAutoPlay = () => {
|
||||
if (autoPlayTimer.value) {
|
||||
window.clearInterval(autoPlayTimer.value)
|
||||
clearInterval(autoPlayTimer.value)
|
||||
autoPlayTimer.value = 0
|
||||
}
|
||||
}
|
||||
@ -101,44 +100,32 @@ export default () => {
|
||||
// 遇到元素动画时，优先执行动画播放，无动画则执行翻页
|
||||
// 向上播放遇到动画时，仅撤销到动画执行前的状态，不需要反向播放动画
|
||||
const execPrev = () => {
|
||||
if (animations.value.length && animationIndex.value > 0) {
|
||||
animationIndex.value -= 1
|
||||
|
||||
// 判断当前动画是否保留动画效果，有则去除后再上翻
|
||||
const prefix = 'animate__'
|
||||
const animation = animations.value[animationIndex.value]
|
||||
if (animation) {
|
||||
const elRef = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
|
||||
if (elRef) {
|
||||
elRef.classList.remove(`${prefix}animated`)
|
||||
for (let i = 0; i < elRef.classList.length; i++) {
|
||||
if (elRef.classList[i].indexOf(prefix) > -1) {
|
||||
elRef.classList.remove(elRef.classList[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (formatedAnimations.value.length && animationIndex.value > 0) {
|
||||
revokeAnimation()
|
||||
}
|
||||
else if (slideIndex.value > 0) {
|
||||
slidesStore.updateSlideIndex(slideIndex.value - 1)
|
||||
const lastIndex = animations.value ? animations.value.length : 0
|
||||
animationIndex.value = lastIndex
|
||||
animationIndex.value = formatedAnimations.value.length
|
||||
inAnimation.value = false
|
||||
}
|
||||
else {
|
||||
throttleMassage('已经是第一页了')
|
||||
inAnimation.value = false
|
||||
}
|
||||
}
|
||||
const execNext = () => {
|
||||
if (animations.value.length && animationIndex.value < animations.value.length) {
|
||||
if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) {
|
||||
runAnimation()
|
||||
}
|
||||
else if (slideIndex.value < slides.value.length - 1) {
|
||||
slidesStore.updateSlideIndex(slideIndex.value + 1)
|
||||
animationIndex.value = 0
|
||||
inAnimation.value = false
|
||||
}
|
||||
else {
|
||||
throttleMassage('已经是最后一页了')
|
||||
closeAutoPlay()
|
||||
inAnimation.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@ -146,7 +133,7 @@ export default () => {
|
||||
const autoPlay = () => {
|
||||
closeAutoPlay()
|
||||
message.success('开始自动放映')
|
||||
autoPlayTimer.value = window.setInterval(execNext, 2500)
|
||||
autoPlayTimer.value = setInterval(execNext, 2500)
|
||||
}
|
||||
|
||||
// 鼠标滚动翻页
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="editable-element-shape"
|
||||
class="base-element-line"
|
||||
:style="{
|
||||
top: elementInfo.top + 'px',
|
||||
left: elementInfo.left + 'px',
|
||||
@ -59,7 +59,7 @@ import useElementShadow from '@/views/components/element/hooks/useElementShadow'
|
||||
import LinePointMarker from './LinePointMarker.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'editable-element-shape',
|
||||
name: 'base-element-line',
|
||||
components: {
|
||||
LinePointMarker,
|
||||
},
|
||||
@ -100,7 +100,7 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.editable-element-shape {
|
||||
.base-element-line {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user