这个还能一键全控，mState的设计也很奇妙，player.pauseAnimations()和player.inpauseAnimations()酒能控制svg的动态啊。
这个帖子制作效果奇妙，构思奇特，代码里包含的内容也十分丰富，黑黑太赞了{:4_199:}
红影 发表于 2024-9-24 21:12
这个还能一键全控，mState的设计也很奇妙，player.pauseAnimations()和player.inpauseAnimations()酒能控制 ...
unpauseAnimations，不是 in~
嵌入svg代码到HTML时，可以用 pauseAnimations() 和 unpauseAnimtions() 方法暂停、继续svg动画，这个好早以前就是用过的。
.svg 图片不受上述两个命令的支配，亦即，JS在.svg图片中不会起作用。:hover 之类的CSS交互也不起作用。
红影 发表于 2024-9-24 21:09
对stroke-dasharray: 1; stroke-dashoffset: 1不够熟悉，原来它们还能操控动画呢。
粒子的那个也很神奇， ...
stroke-dasharray 支配的是虚线线段，要配合 stroke-dashoffset 才能产生动画，后者是虚线偏移属性。这两个都可以在CSS中使用。此外，本帖使用了 pathLength 即路径长度的定性才能更好地控制动画。
HTML粒子的 offset-path 是一个CSS属性，来源于svg。既然是属性，JS当然可以控制它。JS就是控制HTML、svg等等的一切。
马黑黑 发表于 2024-9-24 20:55
去熟悉一下svg，大致都可以做出来的
就算熟悉了能做出来，这样奇妙的构思不是人人能想出来的啊{:4_173:}
马黑黑 发表于 2024-9-24 22:12
unpauseAnimations，不是 in~
嵌入svg代码到HTML时，可以用 pauseAnimations() 和 unpauseAnimtions() ...
我懒得再去复制，就手输两个字母，一不小心还输错了{:4_173:}
这两个命令很神奇，太好了{:4_199:}
马黑黑 发表于 2024-9-24 22:16
stroke-dasharray 支配的是虚线线段，要配合 stroke-dashoffset 才能产生动画，后者是虚线偏移属性。这两 ...
这个帖子里的内容很多呢，真的需要好好学习一下{:4_187:}
红影 发表于 2024-9-24 22:53
我懒得再去复制，就手输两个字母，一不小心还输错了
这两个命令很神奇，太好了
鲜为人知的控制svg动画方法。
字母 u 和 i 连在一块，容易手误。un~ 是表示否定的前缀，pause 是暂停
红影 发表于 2024-9-24 22:49
就算熟悉了能做出来，这样奇妙的构思不是人人能想出来的啊
多吃几条鱼
红影 发表于 2024-9-24 22:55
这个帖子里的内容很多呢，真的需要好好学习一下
这些内容以前都讲过的。文字动态描边的特效，就是用 stroke-dash~做成的
马黑黑 发表于 2024-9-24 22:56
鲜为人知的控制svg动画方法。
字母 u 和 i 连在一块，容易手误。un~ 是表示否定的前缀，pause 是暂停
“鲜为人知的控制svg动画方法。”
这个厉害了{:4_199:}
马黑黑 发表于 2024-9-24 22:57
这些内容以前都讲过的。文字动态描边的特效，就是用 stroke-dash~做成的
哦，对的，你说这个我想起来了。只是当时就套代码玩了，没去认真学习{:4_173:}
红影 发表于 2024-9-24 23:08
哦，对的，你说这个我想起来了。只是当时就套代码玩了，没去认真学习
也是有点不好理解
马黑黑 发表于 2024-9-24 22:56
多吃几条鱼
开拓奇思妙想也需要吃鱼？鱼儿怎么什么事都要摊上啊{:4_173:}
红影 发表于 2024-9-24 23:07
“鲜为人知的控制svg动画方法。”
这个厉害了
许久以前我看过一位上海的大佬写的一篇探讨svg动画文章，这两个命令他是以补充的方式放上去的，就是说，他写这篇文章的时候还不知道这两个方法
马黑黑 发表于 2024-9-24 23:08
也是有点不好理解
用得少，读跟着学习学习，也许就开窍了{:4_173:}
红影 发表于 2024-9-24 23:09
开拓奇思妙想也需要吃鱼？鱼儿怎么什么事都要摊上啊
鱼是人类发展历程中最重要的肉食来源，也是人类早期开智的东东。现在好老师都会建议家长让孩子多吃鱼，这是有道理的。
红影 发表于 2024-9-24 23:10
用得少，读跟着学习学习，也许就开窍了
应啃下来也不会太难。明天我再弄个 stroke-dash* 创建动画的帖子，力求做的简单一点，这样便于大家理解
马黑黑 发表于 2024-9-24 23:10
许久以前我看过一位上海的大佬写的一篇探讨svg动画文章，这两个命令他是以补充的方式放上去的，就是说， ...
黑黑更是把这两个命令运用到了极致，看到今天的帖子了，太神奇了{:4_199:}
马黑黑 发表于 2024-9-24 23:12
鱼是人类发展历程中最重要的肉食来源，也是人类早期开智的东东。现在好老师都会建议家长让孩子多吃鱼，这 ...
人也是水里进化出来的，这个不是同类相残么{:4_173:}