马黑黑 发表于 2024-10-19 22:43
svg动画有些复杂：
（一）原生svg动画属性繁多，想简化它非常难；
是的，黑黑之前就比较过svg动画和CSS动画，感觉还是CSS动画更容易理解且更习惯操作。能进行添加是最好的，又方便又好理解{:4_187:}
跟着老师学习svgdrawer : setsvg() 指令。辛苦了！{:4_190:}
梦江南 发表于 2024-10-20 11:35
跟着老师学习svgdrawer : setsvg() 指令。辛苦了！
这个有点复杂的，需要先弄懂svg
红影 发表于 2024-10-20 11:18
是的，黑黑之前就比较过svg动画和CSS动画，感觉还是CSS动画更容易理解且更习惯操作。能进行添加是最好的 ...
CSS实现动画的原理其实和svg的差不多，只是各自实现的手段不同。
红影 发表于 2024-10-20 11:16
之前就试过很多，感受它的含义，现在对viewBox倒是很能理解了
其实就是坐标系的问题
马黑黑 发表于 2024-10-20 17:46
CSS实现动画的原理其实和svg的差不多，只是各自实现的手段不同。
但是CSS的更熟悉点，要好很多{:4_173:}
马黑黑 发表于 2024-10-20 17:47
其实就是坐标系的问题
这个除了移动变化坐标系，还有放大或缩小，所以增加了理解难度。
红影 发表于 2024-10-20 23:10
这个除了移动变化坐标系，还有放大或缩小，所以增加了理解难度。
闭上眼睛就能理解缩放问题的{:4_170:}
马黑黑 发表于 2024-10-21 20:03
闭上眼睛就能理解缩放问题的
是的，仔细想想还是能明白的。
红影 发表于 2024-10-21 21:29
是的，仔细想想还是能明白的。
没错
马黑黑 发表于 2024-10-21 21:52
没错
在脑袋中转换{:4_173:}
红影 发表于 2024-10-21 23:14
在脑袋中转换
{:4_190:}
本帖最后由 马黑黑 于 2024-10-22 12:09 编辑 <br /><br /><style>
#msvg { display: block; margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; box-shadow: 2px 2px 4px gray; z-index: 1; position: relative; }
#g1 { fill: transparent; stroke: purple; stroke-width: 10; cursor: pointer; transform-box: fill-box; transform-origin:50% 50%; animation:rot 10s linear infinite var(--state); }
#bg { transition: 1s; }
@keyframes rot {to { transform: rotate(360deg); }}
</style>
<svg id="msvg" width="1024" height="640"></svg>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=36668622" autoplay loop></audio>
<script>
new Promise((resolve) => {
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);
sc.onload = () => resolve();
}).then(() => {
var dr = _dr(msvg);
dr.image('https://638183.freep.cn/638183/t24/4/hope.jpg',0,0,1024,640);
dr.image('https://638183.freep.cn/638183/web/svg/balls2.svg',0,0,1024,640).id('bg');
dr.g('g1');
dr.ellipse(490,310,100,40).addTo('g1');
dr.ellipse(490,310,40,100).addTo('g1');
}).then(() => {
aud.onplaying = aud.onpause = () => mState();
g1.onclick = () => aud.paused ? aud.play() : aud.pause();
});
mState = () => {
g1.style.setProperty('--state', aud.paused ? 'paused' : 'running');
bg.style.opacity = aud.paused ? 0 : 1;
}
</script>
马黑黑 发表于 2024-10-22 08:24
本帖最后由 马黑黑 于 2024-10-22 08:39 编辑
#msvg { display: block; margin: 30px 0 30px calc(5 ...
这不是成了么。。没看出哪里不正常{:4_199:}
花飞飞 发表于 2024-10-22 09:34
这不是成了么。。没看出哪里不正常
要用 Promise 方法，因为论坛加载的东西多，JS出现异步运行的情况，使用 Promise 方法可以获得所需任务是否已经做好，做好的话往下一步，也是链式发展的思路。
马黑黑 发表于 2024-10-22 12:11
要用 Promise 方法，因为论坛加载的东西多，JS出现异步运行的情况，使用 Promise 方法可以获得所需任务是 ...
比较一下论坛里的代码多了几个然后，就是做完一件事再做下一件事的节奏 吧。。
从老师说有问题到我看到解决，看了一下花没一个小时{:4_170:}
马黑黑 发表于 2024-10-22 08:24
本帖最后由 马黑黑 于 2024-10-22 12:09 编辑
#msvg { display: block; margin: 30px 0 30px calc(5 ...
哇，这个里面试成的。{:4_187:}
红影 发表于 2024-10-22 21:15
哇，这个里面试成的。
{:4_190:}
花飞飞 发表于 2024-10-22 19:08
比较一下论坛里的代码多了几个然后，就是做完一件事再做下一件事的节奏 吧。。
从老师说有问题到我看到 ...
心中有成竹，就是长不大
马黑黑 发表于 2024-10-22 21:25
心中有成竹，就是长不大
这句好玩{:4_170:}