css-doodle：文本在椭圆路径上运动

马黑黑

文字在椭圆路径上绕圈运动，在按椭圆路径布局的基础上加以简单改造即可：让每一个文本所在的单元格在各自的位置 + 100% 的地方上起步，然后回到各自的位置，这是顺时针运动，需要反时针的将起步和终点调换过来即可。

<css-doodle grid="10x1">
	:doodle {
		@size: 400px 200px;
		border: 1px solid rebeccapurple;
	}
	@size: 40px;
	@place: 20px 20px;
	font: bold 30px sans-serif;
	font-shadow: 1px 1px 2px #000;
	color: #purple;
	:after { content: '@pn([君不见黄河之水天上来])'; }
	offset-path: path('M80 100 a120 80 0 1 0 240 0 a120 80 0 1 0 -240 0z'); 
	<!-- offset-distance: calc(100 / @size * (@i - 1) * 1%); -->
	offset-rotate: 0deg;
	animation: move 8s infinite linear;
	@keyframes move {
		from { offset-distance: calc(100% / @size * (@i - 1) + 100%); }
		to { offset-distance: calc(100% / @size * (@i - 1)); }
	}
</css-doodle>

运行代码

文字在运动的时候有些抖动，原因是 offset-rotate 的设置，设置为 auto 时抖动现象消失，大家可以试试看。

红影

这个椭圆上的文字可以转动起来了，黑黑太棒了

红影

设置为设置为 auto 时，抖动没了，但文字的朝向不对了

红影

关节暗还是在offset-distance: calc(100% / @size * (@i - 1));上面啊，每个格子按自己的百分比行走？这个之前一点不知道，学习了

红影

<!-- offset-distance: calc(100 / @size * (@i - 1) * 1%); -->
这个解释一下呗

马黑黑

红影 发表于 2023-6-12 21:56
这个解释一下呗

这句注释掉了，是原来布局用的，在这里，它不需要

马黑黑

红影 发表于 2023-6-12 21:54
关节暗还是在offset-distance: calc(100% / @size * (@i - 1));上面啊，每个格子按自己的百分比行走？这个 ...

这是一种实现方式：每一个单元格按自己的序号排列，100% / @size * (@i - 1) 中，100% 是全路径，@size 是单元格总数，它乘以 ( 序号 - 1 )，得到的结果 和 100% 相除，就是单元格应在的位置的百分比。

马黑黑

醉美水芙蓉 发表于 2023-6-12 21:49
那天我说让文字转圈圈，老师真得做到了！厉害喔！

懂得原理，这是简单的

马黑黑

红影 发表于 2023-6-12 21:43
设置为设置为 auto 时，抖动没了，但文字的朝向不对了

对

红影

马黑黑 发表于 2023-6-12 22:18
这句注释掉了，是原来布局用的，在这里，它不需要

去看了一下前面的那贴，果然

红影

马黑黑 发表于 2023-6-12 22:23
这是一种实现方式：每一个单元格按自己的序号排列，100% / @size * (@i - 1) 中，100% 是全路径，@size  ...

这个挺难理解的，能理解这个，基本上就能明白这种转动怎么回事了。

红影

马黑黑 发表于 2023-6-12 22:23
对

还好抖动不是很剧烈，不太受影响

马黑黑

红影 发表于 2023-6-12 23:18
还好抖动不是很剧烈，不太受影响

抖抖更健康

马黑黑

红影 发表于 2023-6-12 23:17
这个挺难理解的，能理解这个，基本上就能明白这种转动怎么回事了。

就像10个人围圈圈吧，每个人的位置平均分布在这个圈圈上，然后出发，走到出发点，就是走了 100%。

张三，原来在圈圈的 10% 处，他要走完一圈（一圈为100%），需要 100% + 10%。这个能理解不？

马黑黑

红影 发表于 2023-6-12 23:14
去看了一下前面的那贴，果然

我留着就是像让大家比较与 keyframes 里的关系

红影

马黑黑 发表于 2023-6-12 23:21
抖抖更健康

嗯嗯，就这么抖着挺好，跟抖肩舞蹈似的

红影

马黑黑 发表于 2023-6-12 23:24
就像10个人围圈圈吧，每个人的位置平均分布在这个圈圈上，然后出发，走到出发点，就是走了 100%。

张 ...

嗯嗯，现在知道了。需要算上原位置。这个是椭圆的特点。
去回头看了一下圆，那是也是要加上原来的各自转动度数，之前没去仔细理解，现在连那个也一并弄明白了

对于单个图形，直接转360，对于不同分布的系列图形，要加上原来的信息。

红影

马黑黑 发表于 2023-6-12 23:25
我留着就是像让大家比较与 keyframes 里的关系

嗯，这个帖子太好了，通过这个帖子，又学到了好东西

马黑黑

红影 发表于 2023-6-13 10:33
嗯，这个帖子太好了，通过这个帖子，又学到了好东西

领悟需要投入