C++程序员爱的表⽩，⼼形图⽰例【实例简介】
表⽩爱之“⼼”
【实例截图】
⽂件：（访问密码：551685）
【核⼼代码】
#include<stdio.h>
#include<math.h>
#define R16
void main()
{
char xin[2*R1][2*R1];
int t,x,y;
double d;
for(x=0;x<2*R1;x)
for(y=0;y<2*R1;y)
xin[x][y]=' ';
for(t=0;t<=360;t=8)
{
d=t*3.14159/180;
x=(int)(R*sin(d/2)*sin(d))R;
y=(int)(R*sin(d/2)*cos(d))R;
if(t%40==0)
xin[x][y]='L';
else if(t%40==8)
xin[x][y]='O';
else if(t%40==16)
xin[x][y]='V';
else if(t%40==24)
xin[x][y]='E';
else
xin[x][y]='*';
}
for(x=0;x<2*R1;x)
{
for(y=0;y<2*R1;y)
printf("%2c",xin[x][y]);
printf("\n");
}
}
以下内容⽆关：
-------------------------------------------分割线---------------------------------------------
什么是 CSS Motion Path 运动路径？
什么是 CSS Motion Path 运动路径？利⽤这个规范规定的属性，我们可以控制元素按照特定的路径进⾏位置变换的动画。并且，这个路径可以是⾮常复杂的⼀条路径。
在进⼀步介绍 CSS Motion Path 之前，我们先看看使⽤传统的 CSS 的能⼒，我们如何实现路径动画。
CSS 传统⽅式实现直线路径动画
在之前，我们希望将⼀个物体从 A 点直线运动到 B 点，通常⽽⾔可以使⽤ transform: translate()、top | left | bottom | right 或者 是margin 之类的可以改变物体位置的属性。
简单的⼀个 Demo：
div { width: 60px; height: 60px; background: #000; animation: move infinite 1s alternate linear; } @keyframes move { 100% { transform: translate(100px, 100px); } } 对于简单的从 A 点直线运动到 B 点的效果如下：
CSS 传统⽅式实现曲线路径动画
当然，CSS 也可以实现⼀些简单的曲线路径动画的。如果我们希望从 A 点运动到 B 点⾛的不是⼀条直线，⽽是⼀条曲线，该怎么做呢？
对于⼀些简单的圆弧曲线路径，还是可以借助⼀些巧妙的办法实现的，看看下⾯这个例⼦。
这次，我们使⽤了两个元素，⼦元素是希望被曲线运动的⼩球，但是实际上我们是通过设定了⽗元素的 transform-origin，让⽗元素进⾏了⼀个 transform: rotate() 的运动带动了⼦元素的⼩球：
.g-container { position: relative; width: 10vmin; height: 70vmin; transform-origin: center 0; animation: rotate 1.5s infinite alternate; } .g-ball { position: absolute; width: 10vmin; height: 10vmin; border-radius: 50%; background: radial-gradient(circle, #fff, #000); bottom: 0; left: 0; } @keyframes rotate { 100% { transform: rotate(90deg); } } 为了⽅便理解，在运动的过程中，我让⽗元素的轮廓显现出来：
这样，我们算是勉强得到了⼀个⾮直线路径运动动画，它的实际运动轨迹是⼀条曲线。
然⽽，这基本上是之前 CSS 能做到的极限了，使⽤纯 CSS 的⽅法，没办法实现更复杂的路径动画，譬如下⾯这样⼀条路径动画：
直到现在，我们有了⼀种更为强⼤的专门做这个事情的规范，也就是本⽂的主⾓ – CSS Motion Path。
CSS Motion Path 实现直线路径动画
CSS Motion Path 规范主要包含以下⼏个属性：
offset-path：接收⼀个 SVG 路径（与 SVG 的path、CSS 中的 clip-path 类似），指定运动的⼏何路径
offset-distance：控制当前元素基于 offset-path 运动的距离
offset-position：指定 offset-path 的初始位置
offset-anchor：定义沿 offset-path 定位的元素的锚点。 这个也算好理解，运动的元素可能不是⼀个点，那么就需要指定元素中的哪个点附着在路径上进⾏运动
offset-rotate：定义沿 offset-path 定位时元素的⽅向，说⼈话就是运动过程中元素的⾓度朝向
下⾯，我们使⽤ Motion Path 实现⼀个简单的直线位移动画。
div { width: 60px; height: 60px; background: linear-gradient(#fc0, #f0c); offset-path: path("M 0 0 L 100 100"); offset-rotate: 0deg; animation: move 2000ms infinite alternate ease-in-out; } @keyframes move { 0% { offset-distance: 0%; } 100% {
offset-distance: 100%; } } offset-path 接收⼀个 SVG 的 path 路径，这⾥我们的路径内容是⼀条⾃定义路径 path("M 0 0 L 100 100")，翻译过来就是从 0 0 点运动到 100px 100px 点。
offset-path 接收⼀个 SVG 路径，指定运动的⼏何路径。与 SVG 的path、CSS 中的 clip-path 类似，对于这个 SVG Path 还不太了解的可以戳这⾥先了解下 SVG 路径内容：SVG 路径
我们会得到如下结果：
通过控制元素的 offset-distance 从 0% 变化到 100% 进⾏元素的路径动画。
当然，上述的动画是最基本的，我可以充分利⽤ path 的特性，增加多个中间关键帧，稍微改造下上述代码：
div {
// 只改变运动路径，其他保持⼀致
offset-path: path(“M 0 0 L 100 0 L 200 0 L 300 100 L 400 0 L 500 100 L 600 0 L 700 100 L 800 0”);
animation: move 2000ms infinite alternate linear;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
这⾥最主要还是运⽤了 path 中的 L 指令，得到了如下图这样⼀条直线路径：
image
最终的效果如下，与利⽤ transform: translate() 添加多个关键帧类似：
完整的 Demo 你可以戳这⾥：CodePen Demo – CSS Motion Path Demo
CSS Motion Path 实现曲线路径动画
上⾯的运动轨迹都是由直线构成，下⾯我们看看如何使⽤ CSS Motion Path 实现曲线路径动画。
其实原理还是⼀模⼀样，只需要在 offset-path: path() 中添加曲线相关的路径即可。
在 SVG 的 Path 中，我们取其中⼀种绘制曲线的⽅法 – 贝塞尔曲线，譬如下述这条 path，其中的 path 为 d=“M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80”：
对应这样⼀条连续的贝塞尔曲线：
将对应的路径应⽤在 offset-path: path 中：
div:nth-child(2) { width: 40px; height: 40px; background: linear-gradient(#fc0, #f0c); offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80'); } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
可以得到如下运动效果：
可以看到，元素是沿着贝塞尔曲线的路径进⾏运动的，并且，由于这次没有限制死 offset-rotate，元素的朝向也是跟随路径的朝向⼀直变化的。（可以联想成开车的时候，车头⼀直跟随道路会进⾏变化的，带动整个车⾝的⾓度变化）
完整的 Demo 你可以戳这⾥：CodePen Demo – CSS Motion Path Demo
理解 offset-anchor 运动锚点
OK，那么接下来，我们再看看 offset-anchor 如何理解。
还是上述的 DEMO，我们把⼩正⽅形替换成⼀个三⾓形，并且把运动的曲线给画到页⾯上，像是这样：
其中，三⾓形是通过 clip-path 实现的：
width: 40px;
height: 40px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
background: linear-gradient(#fc0, #f0c);
通常⽽⾔，沿着曲线运动的是物体的中⼼点（类⽐ transform-origin），在这⾥，我们可以通过 offset-anchor 改变运动的锚点，譬如，我们希望三⾓形的最下⽅沿着曲线运动：
.ball {
width: 40px;
height: 40px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
offset-path: path(‘M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80’);
offset-anchor: 0 100%;
background: linear-gradient(#fc0, #f0c);
animation: move 3000ms infinite alternate linear;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
经过实测，Can i use 上写着 offset-anchor 属性的兼容性在为 Chrome 79+、Firefox 72+，但是实际只有 Firefox ⽀持，Chrome 下暂时⽆法⽣效~
完整的 Demo 你可以戳这⾥：CodePen Demo – CSS Motion Path offset-anthor Demo
运⽤ Motion Path 制作动画效果
OK，上⾯我们基本把原理给过了⼀遍，下⾯我们就看看，运⽤ Motion Path，可以在实践中如何运⽤。
利⽤ Motion Path 制作按钮效果
利⽤运动路径，我们可以制作⼀些简单的按钮点击效果。在之前，我在 CodePen 上见到过这样⼀种按钮点击效果：
其原理是运⽤了 background-radial 去⽣成每⼀个⼩圆点，通过控制 background-position 控制⼩圆点的位移，详细的 Demo 代码你可以戳这⾥：
CodePen Demo – Bubbly button (Design by Gal Shir)
但是⼩圆点的运动路径基本上都是直线，运⽤本⽂的 Motion Path，我们也可以实现⼀些类似的效果，核⼼代码如下，HTML 这⾥我们使⽤了 Pug 模板，CSS 使⽤了 SASS：
.btn
-for(var i=0; i<60; i++)
span.dot
.btn {
position: relative;
padding: 1.5rem 4.5rem;
}
.btn .dot {svg实例
position: absolute;
width: 4px;
height: 4px;
@for $i from 1 through KaTeX parse error: Expected '}', got '&' at position 14: count { &:nth-child(#{i}) {
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) rotate(#{360 / $count * $i}deg);
}
}
&::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
offset-path: path(“M0 1c7.1 0 10.7 2 14.3 4s7.1 4 14.3 4 10.7-2 14.3-4 7.2-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4”);
offset-distance: 0;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。