svgdr原生svg动画指令

马黑黑

指令：dr.animate(name, {options});

其中：① name 参数是svg动画名称，有 set、animate、animateMotion、animateTra 共四种；② {options} 参数是JS对象参数，以键值对的方式罗列出动画要使用的属性和属性值，详情请参阅文档或随后提供的代码。

下面演示一下效果，看成不成功：

马黑黑

一楼代码：

1. <script>
   
2. var sc = document.createElement('script');
   
3. sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
   
4. document.body.appendChild(sc);
   
5. sc.onload = () => {
   
6.         var dr = _dr(msvg);
   
7.         dr.ellipse(0,0,40,20,'lightgreen');
   
8.         dr.animate('animateMotion', {
   
9.                 path: "M-20 100C0 400,720 400,800 50",
   
10.                 rotate: 'auto',
    
11.                 dur: '10s',
    
12.                 begin: 0,
    
13.                 repeatCount: 'indefinite',
    
14.         });
    
15. };
    
16. </script>

复制代码

马黑黑

animate 动画一般寄生在特定元素之上，所以不必也不能在 animate() 指令之后使用 addTo(id) 指令，它会自动加到上一个绘制的元素作为其子标签而存在。应该注意的是，要先绘制好要运行动画的元素（比如一楼演示示例的椭圆），紧接着制作 animate 动画。

animate 动画指令目前测试中，尚未提供暂停动画的方法，可以使用 svg元素.pauseAnimations() 来自行设计暂停功能。

马黑黑

svg 的动画如一楼所列，就这么几种，但要使用 svgdr 的 animate 指令，需要熟悉 svg动画 的规范才能设置 {options} 参数，其实不太难，花点时间就能掌握。

红影

这个代码很简洁，在封装下只要给出动画的相关设置即可

马黑黑

红影 发表于 2024-10-24 23:13
这个代码很简洁，在封装下只要给出动画的相关设置即可

其实也差不多，都是啰里啰嗦

红影

马黑黑 发表于 2024-10-24 23:28
其实也差不多，都是啰里啰嗦

这个已经很简洁了呢

马黑黑

红影 发表于 2024-10-24 23:45
这个已经很简洁了呢

简洁不了多少，就是比写SVG代码强那么一点点

红影

马黑黑 发表于 2024-10-25 13:02
简洁不了多少，就是比写SVG代码强那么一点点

为了这么一点点，黑黑花费了不少心思呢

花飞飞

矮油，这个小绿叶子飘得好悠闲自在。。

花飞飞

name 参数是svg动画名称，有 set、animate、animateMotion、animateTra 共四种
后面三个都长得差不多。。。有差别么，可以互相替代么。。
这个例子用了animateMotion……我去试试换个行不行（试过了，还真不行，看来是有讲究的）

options这个参数可以涵盖这么多内容，厉害的了，这一串看着面熟些。

马黑黑

花飞飞 发表于 2024-10-25 21:06
name 参数是svg动画名称，有 set、animate、animateMotion、animateTra 共四种
后面三个都长得差不多。。 ...

这个要过一遍几个动画，它们各有功用。animate 基于元素相关属性（但不是所有属性），animateMotion 基于路径，animateTransform 基于 transform 转换。还有一个被遗弃的好像叫 animateColor

马黑黑

红影 发表于 2024-10-25 20:36
为了这么一点点，黑黑花费了不少心思呢

主要是方便自己

马黑黑

花飞飞 发表于 2024-10-25 21:00
矮油，这个小绿叶子飘得好悠闲自在。。

红影

马黑黑 发表于 2024-10-25 23:02
主要是方便自己

这样弄做单个效果比较容易，如果想多放几个，就需要加多个封装，忘记怎样加多个封装了

马黑黑

红影 发表于 2024-10-26 12:16
这样弄做单个效果比较容易，如果想多放几个，就需要加多个封装，忘记怎样加多个封装了

爱怎么加怎么加

花飞飞

马黑黑 发表于 2024-10-25 23:00
这个要过一遍几个动画，它们各有功用。animate 基于元素相关属性（但不是所有属性），animateMotion 基于 ...

果然各自不同，不可互相代替。。被遗弃的必定是被别的替代了

花飞飞

马黑黑 发表于 2024-10-25 23:02

慢悠悠 跟茶叶在水里似的。。

马黑黑

花飞飞 发表于 2024-10-26 19:22
慢悠悠 跟茶叶在水里似的。。

挺好的

花飞飞

马黑黑 发表于 2024-10-26 20:42
挺好的

标准的周末状态