为了让用户能做出更多变的创意动画效果，动画大师新增点线动画效果功能。相对于万彩动画大师现有的动画效果，点线效果注重点和线之间的运动，也能让图形和图片的动画更出彩。 

一、点线动画效果：

【图1▲】线条点线动画效果

  

【图2▲】SVG图片点线动画效果



点线动画的操作步骤：   

目前点线动画只能应用在SVG图片（灯泡为例）和图形（直线为例）中，还有就是点线动画与其他进场、退场、强调动画等是可以同时进行的。

1.两种方法添加点线动画：

（1）选中画布中的SVG或图形，在右边的属性栏中找到【点线动画】，选择【添加点线动画】即可成功添加点线动画；

【图3▲】两种方法添加点线动画

（2）比较快捷的方法就是在时间轴中选中SVG图片，右击后出现菜单栏，在菜单栏中找到并单击【添加点线动画】；

 2.添加完之后，可以用默认的也可以自定义点线动画效果，也可以自定义点线动画。A点与B点即是SVG图片或图形点线动画对应的起点和终点。可以通过设置A点与B点的开始位置、开始偏移、结束位置、结束和其他设置来自定义合适的点线动画效果。接下来我们来具体说说调整每个设置都有哪些相应的变化。

【图4▲】点线动画设置参数

 AB点设置（以不闭合图形线条为例，A点是运动起始点，B点是运动的终点）

（1）开始位置：指的是点线动画A点与B点开始的地方。0%是指最开始的位置开始运动，100%则是在最后的位置运动，我们来看看开始位置0%与100%的区别（其他参数一致的情况下）：

【图5▲】A 点开始设置

 

  •  

  •  A点开始位置

【图6▲】A 点开始设置效果对比

 

  •  

  •  B点开始位置

 

【图7▲】B 点开始设置

 

【图8▲】B 点开始设置效果对比

 （2）开始偏移：指的是实际的位置与其所在的实际位置中间的距离，简单说就是来说就是动画延迟开始。百分数越大，代表偏移距离越长，我们来看看开始偏移10%与100%的区别（其他参数一致的情况下）：  A点开始偏移 

【图9▲】A点开始偏移设置

   

【图10▲】A 点开始偏移效果对比

   B点开始偏移 

【图11▲】B点开始偏移设置

  

【图12▲】B点开始偏移效果对比

  （3） 结束位置：指的是AB 点运动结束的位置。0%是指线条的起点，100%是指线条的终点，调整百分数设置AB点运动结束位置。 A点结束位置 

【图13▲】A点结束位置设置

  

【图14▲】A点结束位置效果

  B点结束位置

【图15▲】B点结束位置设置

  

【图16▲】B点结束位置效果

 （4） 结束偏移：指的是实际的位置与其所在的实际位置中间的距离，简单说就是动画运动提前结束的位置。 A点结束偏移：比如设置的20%，指的是A点在离结束位置20%的时候就停止运动。这里我们看到的效果图是 

【图17▲】A点结束偏移设置

 因为A点的跑的比B点快就会出现这样的情况。  

【图18▲】A点结束偏移效果

  B点结束偏移

【图19▲】B点结束偏移设置

  

【图20▲】B点结束偏移设置

 （5） 动画函数：进一步的优化点线动画运动效果，参考教程：http://www.animiz.cn/kb/topic-2146.html   

 （6）AB方向，就是根据需求设置AB点线动画的顺逆时针运动方向。这里我们以矩形为例。 

【图21▲】AB点方向

  接下来说说其他设置: 绘制方向、其他方式和线头样式。

 (1) 绘制方向：就是点线动画从0  %到100%的绘制运动方向。我们通过动图来对比一下。  

【图21▲】绘制方向设置

【图22▲】顺逆时针绘制效果

 (2)其他方式：有3种选项，当A点运动的比B点快，可能会出现动画一闪一闪的情况，这个时候我们可以选择【A大于B】这个方式，就可以解决动画闪的问题。当B点运动比A点时，就选择【B大于A】。 当A点运动比B快时，A点是从0%，B点是从20%才开始，因此A 点运动比B点快。此时，其他方式用默认的【无】，则会出现以下的效果： 

【图23▲】其他方式设置

 

【图24▲】A大于B效果

  同理，当B点运动比A点快时, 也会出现相应的情况，然后只需要选【B大于A】就可解决动画一闪一闪的问题。 

【图24▲】B大于A设置

   

【图25▲】B大于A效果

 (3) 线头方式: 圆头、平头和无，我们用图片来看下他们的区别。 

【图26▲】线头方式效果