动画

[xinglie]

概述

设计器元素支持应用@keyframes指定的css动画，您可以把常用动画封装成单独的css文件，供设计器使用。 设计器目前以插件的方式使用Animate.css提供的动画，您可以通过https://animate.style/访问Animate.css官网了解更多信息

动画面板

动画面板默认不展示，您需要通过设计器右上角的面板列表中找到动画面板通过点击图标打开，或使用快捷键：数字6按下后打开，具体动画面板的图标及位置如下图所示

打开后动画面板将会展示在设计区的下方，如下图所示

操控区域

操控区域用于设置动画时间轴的长度、间隙、重置及播放等功能

通过上图1下面的数字框，您可以修改时间轴的长度。目前默认时间最小时长为10s，最大时长为60s。可通过配置修改 通过上图2下面的数字框，您可以修改时间轴上最小时间的间隔。目前默认最小10px，最大20px。可通过配置修改 通过上图3下面的按钮，您可以停用或启用动画功能。该按钮方便您查看元素在应用动画前是什么状态，应用动画后是什么状态。 通过上图4下面的按钮，您可以一键重置时间轴到起始区域。 通过上图5下面的按钮，您可以让设计器播放或暂停动画，来查看整个时间段内或某个时间点的动画效果

时间轴区域

通过时间轴您可以拖动时刻线查看某个时间点动画的效果

时刻线在拖动过程中，左、右两侧会出现自动滚屏提示区域，当您把拖动的设备如鼠标放置在该区域内时，时间轴会自动向右或左进行滚屏，无须您松开鼠标移动时间轴后再拖动。

元素区域

通过元素区域您可以查看当前设计区哪些元素应用了哪些动画，同时您可以添加、修改、删除某个元素的某些动画

目前设计区内的元素在支持动画的情况下，将会自动出现在元素区域内(这个可通过配置修改为仅选中元素且支持动画的元素才出现在元素区域内)。

上图1区域内的元素，会自动联动设计区元素的状态作出相应的展示，如元素只读、禁用、启用等状态。同时为了方便您的查看，当您把设备如鼠标放置在1区域内的元素上时，设计区内的对应的元素会自动出现遮盖提示，如果您还是无法确定是哪个元素，也可以通过点击使设计区内的元素选中。

通过点击上图3区域，将会打开添加动画的弹框，您可以在弹框内选择需要的动画，添加后动画将会出现在2区域内。添加动画的弹框将在后面介绍。

上图2区域内添加的动画，您可以通过点击重新打开动画选择框，进行动画的修改或替换。当您的设备如鼠标悬停在该区域内时，会出现删除按钮，如果您对该动画不满意可以删除。

上图2区域内的眼睛图标用于控制该条动画是否应用在设计区内供预览。比如您可能一次性为同一个元素添加了多个动画效果，该元素在设计区内呈现的效果是这些动画叠加后的。如果您想查看某个动画暂时去掉是什么效果，您可以点击眼睛图标，使它变成闭眼状态，则元素将不应用该条动画。通过该功能使您可以快速查看该条动画效果添加或删除后是什么效果，而不必通过反复的添加或删除相应的动画进行查看。通过点击闭眼图标可以再次应用该条动画效果。

上图2区域内的锁图标可锁定或解锁当前动画轨道的编辑，如果您对某条动画编辑满意后，可点击锁图标进行锁定，防止误修改。

动画轴区域

通过动画轴您可以调整动画效果在时间轴上的位置及时长

上图1以品牌色出现的是操控区域，您可以通过拖动3下方的手柄调整动画时长，可拖动4上方的区域调整动画在时间轴上的位置。 上图2区域以灰色表示的则是该动画的重复次数，方便您明白动画在时间轴上的效果，如果动画只播放1次，将不会展示灰色部分。

选择动画弹框

通过动画框选择事先准备好的动画效果

通过上图1区域内您可以挑选需要的动画效果，当您选中后，相应的效果将会在上图2区域内进行预览，方便您把动画添加到动画面板前查看相应的动画效果。

通过点击1区域内的动画名称，您可以进行单选动画，如果您需要选择多个动画，则需要按下Shift键后再点击，此时您将会选中多个动画。

上图1区域内左上角带有f角标的动画，表示该动画部分时间阶段内置了动画函数，您在上图3区域内的动画曲线配置只会应用到部分动画阶段。

上图1区域内左上角带有品牌色f角标的动画，表示该动画全部时间都内置了动画函数，您在上图3区域内的动画曲线配置将不起任何作用。当您选中带有品牌色f角标的动画时，上图3区域内的动画曲线将自动进入禁用状态，避免您不必要的操作。

上图3区域内您可以对动画进行详细的配置，如果您对这些配置不太了解，默认就好，不需要做修改。 为了您更好的控制动画，建议您前往MDN阅读动画章节(https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation)

上图4区域下方的按钮，您可以确定当前动画的配置或取消关闭弹框

常见问题

如何替换Animate.css

第一步：在入口文件如index.html中删除或替换Animate.css 第二步：在report-designer/tmpl/panels/animate/picker.ts更新替换后的动画名称即完成替换

如何添加自己的动画库

第一步：把自己的动画写入单独的样式文件内，注意名称不要与现有的冲突 第二步：在入口文件如index.html中像引用Animate.css一样，引入您的动画样式文件 第三步：在report-designer/tmpl/panels/animate/picker.ts添加您样式动画文件内的动画名称即完成添加

为什么有些动画添加后，设计区变大了

这是因为部分动画效果使用了translate，而Animate.css又写的值比较大，所以会撑开设计区域

为什么应用动画后，元素的旋转或透明失效了

首先确定的是元素旋转或透明没有失效，而是被动画里面的旋转和透明覆盖了。

以旋转为例，比如把元素旋转了30度，而应用动画后，动画在开始的时刻又把角度旋转到了0度，此时元素呈现的就是动画旋转的0度效果。这也是前面操控区域里面介绍的3区域下方按钮的作用，方便您停用动画查看未应用动画的效果。

可以让动画以元素当前旋转角度或透明度做动画吗

可以，把当前角度或透明度以变量的形式在元素上提供，动画里以该变量为起点做动画即可。 目前Animate.css并未提供该功能，后续如果设计器提供自己的动画库时会这样做。