常见动画案例

柱图轮播动画

下面是一个柱状图的轮播动画 demo，配置定义了柱状图元素（bar）的常态动画（animationNormal）。以下内容为关键部分的功能解释：

• startTime：动画开始执行的时间，本例中是 350 毫秒。
• oneByOne：每个柱子画的执行时间间隔，本例中为 200 毫秒。
• loop：动画循环播放开启。 接下来，我们具体介绍 TimeLine 数组中的内容。这个数组包含着两个时间片，分别用于控制柱状图展示于屏幕和消失至屏幕的动画效果：

第一个时间片：

• delay：动画延迟时间为 1000 毫秒。

• effects：动画效果配置

  • type：动画效果类型为 "growHeightOut"（柱子高度逐渐减小至消失）
  • easing： 动画缓动函数为 "bounceOut"（弹跳缓动，更具动感）
  • options：可选参数
    • orient：动画方向为 "negative"（负方向进行，即从下到上）

• duration：动画持续时间为 300 毫秒。

• 第二个时间片

• delay：动画延迟时间为 1000 毫秒。

• effects：动画效果配置

  • type：动画效果类型为 "growHeightIn"（柱子高度逐渐增大至显示）
  • easing：动画缓动函数为 "bounceOut"（弹跳式缓动）
  • options：可选参数
    • orient：动画方向 "negative"（朝负方向进行，即从下到上）

• duration：动画持续时间为 1200 毫秒。

环形图轮播动画

下面是一个环形图的轮播动画 demo，我们配置了 pie 图元的常态动画（animationNormal）。我们定义了两条时间线：

• 第一条时间线（TimeLineA）在图表入场动画 100 毫秒 后开始执行，并且不循环。
  • TimeLineA 上定义了一个时间片，用于执行一个透明度变小的动画，动画时长 500 毫秒；
• 第二条时间线（TimeLineB）在 800 毫秒 后开始执行，并且是循环执行的。oneByOne 属性设置为 true，表示每个元素的动画在上一个元素动画执行结束后开始执行。 TimeLineB 上定义了 3 个时间片：
  • 透明度恢复，且图元外半径扩大 10 px，用于强调的效果，动画时长 500 毫秒;
  • 元素属性不变，维持 500 毫秒;
  • 元素属性恢复，时长 500 毫秒;

Top 10 柱图动画

下面是一个动态排行柱图的动画 demo，在这个例子中，我们配置了柱状图 bar 图元的更新动画。这个配置定义了两个动画效果，分别是：

• 更新动画（除了图元位置视觉通道x，y之外的其他属性），时长为 2000 ms，并线性缓动函数 linear;
• 位置视觉通道x，y的变化时长为 300 ms，同样使用线性缓动函数 linear。