Earth

红影

这个还能一键全控，mState的设计也很奇妙，player.pauseAnimations()和player.inpauseAnimations()酒能控制svg的动态啊。

红影

这个帖子制作效果奇妙，构思奇特，代码里包含的内容也十分丰富，黑黑太赞了

马黑黑

红影 发表于 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，大致都可以做出来的

就算熟悉了能做出来，这样奇妙的构思不是人人能想出来的啊

红影

马黑黑 发表于 2024-9-24 22:12
unpauseAnimations，不是 in~

嵌入svg代码到HTML时，可以用 pauseAnimations() 和 unpauseAnimtions() ...

我懒得再去复制，就手输两个字母，一不小心还输错了
这两个命令很神奇，太好了

红影

马黑黑 发表于 2024-9-24 22:16
stroke-dasharray 支配的是虚线线段，要配合 stroke-dashoffset 才能产生动画，后者是虚线偏移属性。这两 ...

这个帖子里的内容很多呢，真的需要好好学习一下

马黑黑

红影 发表于 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动画方法。”

这个厉害了

红影

马黑黑 发表于 2024-9-24 22:57
这些内容以前都讲过的。文字动态描边的特效，就是用 stroke-dash~做成的

哦，对的，你说这个我想起来了。只是当时就套代码玩了，没去认真学习

马黑黑

红影 发表于 2024-9-24 23:08
哦，对的，你说这个我想起来了。只是当时就套代码玩了，没去认真学习

也是有点不好理解

红影

马黑黑 发表于 2024-9-24 22:56
多吃几条鱼

开拓奇思妙想也需要吃鱼？鱼儿怎么什么事都要摊上啊

马黑黑

红影 发表于 2024-9-24 23:07
“鲜为人知的控制svg动画方法。”

这个厉害了

许久以前我看过一位上海的大佬写的一篇探讨svg动画文章，这两个命令他是以补充的方式放上去的，就是说，他写这篇文章的时候还不知道这两个方法

红影

马黑黑 发表于 2024-9-24 23:08
也是有点不好理解

用得少，读跟着学习学习，也许就开窍了

马黑黑

红影 发表于 2024-9-24 23:09
开拓奇思妙想也需要吃鱼？鱼儿怎么什么事都要摊上啊

鱼是人类发展历程中最重要的肉食来源，也是人类早期开智的东东。现在好老师都会建议家长让孩子多吃鱼，这是有道理的。

马黑黑

红影 发表于 2024-9-24 23:10
用得少，读跟着学习学习，也许就开窍了

应啃下来也不会太难。明天我再弄个 stroke-dash* 创建动画的帖子，力求做的简单一点，这样便于大家理解

红影

马黑黑 发表于 2024-9-24 23:10
许久以前我看过一位上海的大佬写的一篇探讨svg动画文章，这两个命令他是以补充的方式放上去的，就是说， ...

黑黑更是把这两个命令运用到了极致，看到今天的帖子了，太神奇了

红影

马黑黑 发表于 2024-9-24 23:12
鱼是人类发展历程中最重要的肉食来源，也是人类早期开智的东东。现在好老师都会建议家长让孩子多吃鱼，这 ...

人也是水里进化出来的，这个不是同类相残么