diff --git a/src/configs/animation.ts b/src/configs/animation.ts index 8e2144d5..3bbe54be 100644 --- a/src/configs/animation.ts +++ b/src/configs/animation.ts @@ -182,4 +182,31 @@ export const EXIT_ANIMATIONS = [ { name: '从左飞出', value: 'lightSpeedOutLeft' }, ], }, +] + +export const ATTENTION_ANIMATIONS = [ + { + type: 'shake', + name: '晃动', + children: [ + { name: '左右摇晃', value: 'shakeX' }, + { name: '上下摇晃', value: 'shakeY' }, + { name: '摇头', value: 'headShake' }, + { name: '摆动', value: 'swing' }, + { name: '晃动', value: 'wobble' }, + { name: '惊恐', value: 'tada' }, + { name: '果冻', value: 'jello' }, + ], + }, + { + type: 'other', + name: '其他', + children: [ + { name: '弹跳', value: 'bounce' }, + { name: '闪烁', value: 'flash' }, + { name: '脉搏', value: 'pulse' }, + { name: '橡皮筋', value: 'rubberBand' }, + { name: '心跳(快)', value: 'heartBeat' }, + ], + }, ] \ No newline at end of file diff --git a/src/types/slides.ts b/src/types/slides.ts index d08f7c67..4d2110e0 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -574,7 +574,7 @@ export type PPTElement = PPTTextElement | PPTImageElement | PPTShapeElement | PP * * effect: 动画效果 * - * type: 动画类型(入场、退场) + * type: 动画类型(入场、退场、强调) * * duration: 动画持续时间 * @@ -584,7 +584,7 @@ export interface PPTAnimation { id: string; elId: string; effect: string; - type: 'in' | 'out'; + type: 'in' | 'out' | 'attention'; duration: number; trigger: 'click' | 'meantime' | 'auto'; } diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue index 76bc6fd9..fb8bf7c4 100644 --- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue +++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue @@ -31,7 +31,7 @@ class="animation-box" :class="[ `${prefix}animated`, - `${prefix}faster`, + `${prefix}fast`, hoverPreviewAnimation === item.value && `${prefix}${item.value}`, ]" >{{item.name}} @@ -122,6 +122,7 @@ import { PPTAnimation } from '@/types/slides' import { ENTER_ANIMATIONS, EXIT_ANIMATIONS, + ATTENTION_ANIMATIONS, ANIMATION_DEFAULT_DURATION, ANIMATION_DEFAULT_TRIGGER, ANIMATION_CLASS_PREFIX, @@ -142,8 +143,13 @@ for (const effect of EXIT_ANIMATIONS) { animationEffects[animation.value] = animation.name } } +for (const effect of ATTENTION_ANIMATIONS) { + for (const animation of effect.children) { + animationEffects[animation.value] = animation.name + } +} -type AnimationType = 'in' | 'out' +type AnimationType = 'in' | 'out' | 'attention' interface TabItem { key: AnimationType; label: string; @@ -162,6 +168,7 @@ export default defineComponent({ const tabs: TabItem[] = [ { key: 'in', label: '入场' }, { key: 'out', label: '退场' }, + { key: 'attention', label: '强调' }, ] const activeTab = ref('in') @@ -303,11 +310,11 @@ export default defineComponent({ runAnimation(handleElementId.value, effect, ANIMATION_DEFAULT_DURATION) } - // 动画选择面板打开500ms后再移除遮罩层,否则打开面板后迅速滑入鼠标预览会导致抖动 + // 动画选择面板打开600ms后再移除遮罩层,否则打开面板后迅速滑入鼠标预览会导致抖动 const popoverMaskHide = ref(false) const handlePopoverVisibleChange = (visible: boolean) => { if (visible) { - setTimeout(() => popoverMaskHide.value = true, 500) + setTimeout(() => popoverMaskHide.value = true, 600) } else popoverMaskHide.value = false } @@ -331,6 +338,7 @@ export default defineComponent({ animations: { in: ENTER_ANIMATIONS, out: EXIT_ANIMATIONS, + attention: ATTENTION_ANIMATIONS, }, prefix: ANIMATION_CLASS_PREFIX, addAnimation, @@ -349,6 +357,7 @@ export default defineComponent({