将点或点从偏移量设置为实际位置
如何使用SVG或CSS来制作动画？
动画应如下所示：
最初，只有线条可见（ 图片1 ），2秒后点（。）将到达并连接到线条曲线（ 图片2 ）带点动画。
Online Example
请检查以下代码
SVG代码：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="755px" height="390px" viewBox="0 0 755 390" enable-background="new 0 0 755 390" xml:space="preserve">
<g>
<polyline fill="none" stroke="#777777" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1" points="
177.07,277.824 169.439,162.858 281.354,197.955 323.576,87.565 414.637,42.294 442.104,99.271 515.359,132.842 544.357,32.626
576.404,135.892 557.074,216.779 554.531,306.311 479.238,328.695 429.385,286.979 387.67,203.043 302.209,282.912
176.051,279.861 281.354,202.025 442.104,99.271 557.074,216.779 387.164,202.025 442.104,99.271 479.238,330.73 557.074,216.779
429.385,286.979 392.252,279.861 283.386,198.975 "/>
<polyline fill="none" stroke="#777777" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1" points="
171.982,163.873 326.12,88.584 437.529,102.321 "/>
</g>
<g>
<circle cx="177.07" cy="277.824" r="11.699"/>
<path d="M479.238,316.996c6.463,0,11.705,5.236,11.705,11.699s-5.242,11.699-11.705,11.699c-6.459,0-11.699-5.236-11.699-11.699
S472.779,316.996,479.238,316.996z"/>
<path d="M323.576,64.674c12.643,0,22.892,10.254,22.892,22.891c0,12.648-10.249,22.893-22.892,22.893
c-12.642,0-22.891-10.245-22.891-22.893C300.685,74.928,310.934,64.674,323.576,64.674z"/>
<path d="M171.982,152.173c6.462,0,11.699,5.24,11.699,11.699c0,6.462-5.237,11.704-11.699,11.704
c-6.463,0-11.699-5.242-11.699-11.704C160.283,157.414,165.519,152.173,171.982,152.173z"/>
<circle cx="515.359" cy="132.842" r="11.699"/>
<circle cx="281.354" cy="197.956" r="22.892"/>
<circle cx="387.164" cy="202.027" r="18.315"/>
<path d="M429.385,275.279c6.465,0,11.699,5.238,11.699,11.699c0,6.465-5.234,11.701-11.699,11.701
c-6.461,0-11.699-5.236-11.699-11.701C417.686,280.518,422.924,275.279,429.385,275.279z"/>
<path d="M392.252,266.631c7.302,0,13.223,5.922,13.223,13.23c0,7.303-5.921,13.225-13.223,13.225
c-7.303,0-13.225-5.922-13.225-13.225C379.027,272.553,384.949,266.631,392.252,266.631z"/>
<path d="M302.209,271.211c6.463,0,11.699,5.236,11.699,11.701c0,6.463-5.236,11.699-11.699,11.699
c-6.464,0-11.699-5.236-11.699-11.699C290.51,276.447,295.746,271.211,302.209,271.211z"/>
<path d="M442.104,76.378c12.643,0,22.891,10.243,22.891,22.893c0,12.638-10.248,22.891-22.891,22.891s-22.891-10.253-22.891-22.891
C419.213,86.622,429.461,76.378,442.104,76.378z"/>
<path d="M544.357,20.927c6.457,0,11.699,5.236,11.699,11.699c0,6.463-5.242,11.699-11.699,11.699
c-6.465,0-11.705-5.236-11.705-11.699C532.652,26.164,537.893,20.927,544.357,20.927z"/>
<circle cx="414.637" cy="42.294" r="11.699"/>
<path d="M576.404,117.582c10.113,0,18.313,8.197,18.313,18.311c0,10.115-8.199,18.316-18.313,18.316s-18.316-8.202-18.316-18.316
C558.088,125.779,566.291,117.582,576.404,117.582z"/>
<circle cx="552.494" cy="306.821" r="22.892"/>
<path d="M554.531,194.394c12.637,0,22.893,10.254,22.893,22.893c0,12.643-10.256,22.891-22.893,22.891
c-12.645,0-22.893-10.248-22.893-22.891C531.639,204.648,541.887,194.394,554.531,194.394z"/>
</g>
</svg>
图片1： （默认屏幕）
图片2 （动画后）
1 个答案:
答案 0 :(得分：1)
使用SVG
您可以在下面的代码段中使用animateTransform。基本上所做的是，最初圆形元素cx和cy（中心点）在Y轴上平移（100px），然后它们慢慢地动画回原始位置。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
polyline {
stroke: black;
stroke-width: 1;
fill: transparent;
}
.container {
overflow: hidden;
height: 200px;
width: 200px;
border: 1px solid;
}
svg {
height: 100%;
width: 100%;
}<div class="container">
<svg viewBox='0 0 100 100'>
<polyline points='25,35 33,75 50,33 89,22 15,65' />
<circle cx='25' cy='35' r='2'>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 -100" to="0 0" dur="2s" />
</circle>
<circle cx='33' cy='75' r='2'>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="-100 100" to="0 0" dur="2s" />
</circle>
<circle cx='50' cy='33' r='2'>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 100" to="0 0" dur="2s" />
</circle>
<circle cx='89' cy='22' r='2'>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="100 100" to="0 0" dur="2s" />
</circle>
</svg>
</div>
如果您有许多此类元素，并希望对模式或行为进行某种重复使用，则可以使用use元素，如下面的代码段所示。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
polyline {
stroke: black;
stroke-width: 1;
fill: transparent;
}
.container {
overflow: hidden;
height: 100%;
width: 100%;
border: 1px solid;
}
svg {
height: 100%;
width: 100%;
}<div class="container">
<svg viewBox='0 0 100 100'>
<defs>
<g id='circle'>
<circle r='2'>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 -100" to="0 0" dur="2s" />
</circle>
</g>
<g id='circle2'>
<circle r='2'>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="100 0" to="0 0" dur="2s" />
</circle>
</g>
<g id='circle3'>
<circle r='2'>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 100" to="0 0" dur="2s" />
</circle>
</g>
</defs>
<polyline points='25,35 33,75 50,33 89,22 15,65 0,10 90,90' />
<use x='25' y='35' xlink:href='#circle' />
<use x='33' y='75' xlink:href='#circle2' />
<use x='50' y='33' xlink:href='#circle' />
<use x='89' y='22' xlink:href='#circle2' />
<use x='0' y='10' xlink:href='#circle3' />
<use x='0' y='10' xlink:href='#circle3' />
</svg>
</div>
使用CSS
如果你强行要用CSS做，你可以将折线放在一个容器div中，将圆形点放在另一个容器中，将动态设置为div，使用圆形点返回到它们的位置keyframes和transform。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
polyline {
stroke: black;
stroke-width: 1;
fill: transparent;
}
.container {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
border: 1px solid;
}
svg {
height: 100%;
width: 100%;
}
.points,
.lines {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.points {
transform: translateY(100%);
animation: movepoints 1s ease forwards;
}
@keyframes movepoints {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
<div class="lines">
<svg viewBox='0 0 100 100'>
<polyline points='25,35 33,75 50,33 89,22 15,65' />
</svg>
</div>
<div class="points">
<svg viewBox='0 0 100 100'>
<circle cx='25' cy='35' r='2' />
<circle cx='33' cy='75' r='2' />
<circle cx='50' cy='33' r='2' />
<circle cx='89' cy='22' r='2' />
</svg>
</div>
</div>
请注意，当容器设置为100％height且width +容器的父级没有固定高度时，上述代码段将无效，因为我们已完全定位它的子元素。如果您仍然希望容器有100％width和height，则可以使用绝对定位单独定位包含点的div。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
polyline {
stroke: black;
stroke-width: 1;
fill: transparent;
}
.container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
border: 1px solid;
}
svg {
height: 100%;
width: 100%;
}
.points,
.lines {
height: 100%;
width: 100%;
}
.points {
position: absolute;
top: 0px;
left: 0px;
}
.points {
transform: translateY(100%);
animation: movepoints 1s ease forwards;
}
@keyframes movepoints {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
*{
margin: 0;
padding: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
<div class="lines">
<svg viewBox='0 0 100 100'>
<polyline points='25,35 33,75 50,33 89,22 15,65' />
</svg>
</div>
<div class="points">
<svg viewBox='0 0 100 100'>
<circle cx='25' cy='35' r='2' />
<circle cx='33' cy='75' r='2' />
<circle cx='50' cy='33' r='2' />
<circle cx='89' cy='22' r='2' />
</svg>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？