马黑黑 发表于 2024-10-24 21:37

svgdr原生svg动画指令

<p>指令：dr.animate(name, {options});</p>
<p><br></p>
<p>其中：① name 参数是svg动画名称，有 set、animate、animateMotion、animateTra 共四种；② {options} 参数是JS对象参数，以键值对的方式罗列出动画要使用的属性和属性值，详情请参阅文档或随后提供的代码。</p>
<p>下面演示一下效果，看成不成功：</p>
<p><br></p>
<svg id="msvg" width="760" height="400" style="border: 1px solid gray"></svg>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);
sc.onload = () => {
        var dr = _dr(msvg);
        dr.ellipse(0,0,40,20,'lightgreen');
        dr.animate('animateMotion', {
                path: "M-20 100C0 400,720 400,800 50",
                rotate: 'auto',
                dur: '10s',
                begin: 0,
                repeatCount: 'indefinite',
        });
};
</script>

马黑黑 发表于 2024-10-24 21:38

一楼代码：
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);
sc.onload = () => {
        var dr = _dr(msvg);
        dr.ellipse(0,0,40,20,'lightgreen');
        dr.animate('animateMotion', {
                path: "M-20 100C0 400,720 400,800 50",
                rotate: 'auto',
                dur: '10s',
                begin: 0,
                repeatCount: 'indefinite',
        });
};
</script>

马黑黑 发表于 2024-10-24 21:42

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

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

马黑黑 发表于 2024-10-24 21:44

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

红影 发表于 2024-10-24 23:13

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

马黑黑 发表于 2024-10-24 23:28

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

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

红影 发表于 2024-10-24 23:45

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

这个已经很简洁了呢{:4_187:}

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

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

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

红影 发表于 2024-10-25 20:36

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

为了这么一点点，黑黑花费了不少心思呢{:4_187:}

花飞飞 发表于 2024-10-25 21:00

矮油，这个小绿叶子飘得好悠闲自在。。{:4_170:}

花飞飞 发表于 2024-10-25 21:06

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

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

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

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

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

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

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

主要是方便自己

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

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

{:4_172:}

红影 发表于 2024-10-26 12:16

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

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

马黑黑 发表于 2024-10-26 15:56

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

爱怎么加怎么加

花飞飞 发表于 2024-10-26 19:18

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

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

花飞飞 发表于 2024-10-26 19:22

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


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

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

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

挺好的

花飞飞 发表于 2024-10-26 20:50

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

标准的周末状态{:4_173:}
页: [1] 2
查看完整版本: svgdr原生svg动画指令