css - 显示动画线的箭头
问题描述
我正在使用https://jsfiddle.net/arungeorgez/r9x6vhcb/4/为从点 1 到点 2 的线设置动画。如何在同一行添加箭头?
<style>
.key-anim1 {
-webkit-animation: Drawpath 1s linear forwards;
animation: Drawpath 1s linear forwards;
stroke-dasharray: 0, 600;
}
@-webkit-keyframes Drawpath {
from {
stroke-dasharray: 0, 600;
}
to {
stroke-dasharray: 600, 600;
}
}
@keyframes Drawpath {
from {
stroke-dasharray: 0, 600;
}
to {
stroke-dasharray: 600, 600;
}
}
</style>
解决方案
<animate attributeType="XML"
attributeName="opacity"
from="0" to="1"
dur=".08s" begin=".23s"
repeatCount="0" fill="freeze"
/>
似乎对您的情况产生了不错的效果,因为箭头很小。但是,对于更精细的解决方案,可以使用<animateTransform>
or<animateMotion>
代替<animate>
,具体取决于具体情况。
虽然使用 CSS 动画很容易实现效果(最后,我只是在opacity
上面制作动画),但我倾向于为<svg>
s 推荐 SMIL 动画,因为它们提供了更多用于控制动画不同方面的选项,远远优于 CSS选项,恕我直言。
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
$(document).ready(function() {
var line = makeSVG('line', {
id: "-",
class: "key-anim1",
x1: 20,
y1: 20,
x2: 120,
y2: 120,
stroke: 'black',
'stroke-width': 2,
'marker-end': "url(#arrow)"
});
document.getElementById("svg").appendChild(line);
});
.key-anim1 {
-webkit-animation: Drawpath 1s linear forwards;
animation: Drawpath 1s linear forwards;
stroke-dasharray: 0, 600;
}
@-webkit-keyframes Drawpath {
from {
stroke-dasharray: 0, 600;
}
to {
stroke-dasharray: 600, 600;
}
}
@keyframes Drawpath {
from {
stroke-dasharray: 0, 600;
}
to {
stroke-dasharray: 600, 600;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg height="600" width="600" id="svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth" opacity="0">
<path d="M0,0 L0,6 L9,3 z" fill="#000" />
<animate attributeType="XML" attributeName="opacity" from="0" to="1" dur=".08s" begin=".23s" repeatCount="0" fill="freeze" />
</marker>
</defs>
</svg>
注意:微调任何动画的简单方法是将速度降低 10 倍。通过这种方式,您将能够使其完美,并在您对它的执行速度慢 10 倍感到满意后将其重新增加。有时,当加速它时,您需要从“技术上正确”的方式进行微小的调整,以抵消视觉错觉(但这通常是“隐形细节”的领域)。
如果您希望制造商可见并与线一起移动,则需要删除 dasharray(因为现在您的线从动画的开始到结束的长度相同,但它是用虚线绘制的,您只是在移动虚线中的间隙,所以看起来它正在增长)。相反,您需要先使其变短,然后将其动画化以使其变长。
这是一个例子:
<svg height="600" width="600" id="svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#000" opacity="0">
<animate attributeType="XML" attributeName="opacity" from="0" to="1" dur=".1s" repeatCount="0" fill="freeze" />
</path>
</marker>
</defs>
<line id="-" x1="20" y1="20" x2="21" y2="21" stroke="black" stroke-width="2" marker-end="url(#arrow)">
<animate attributeType="XML" attributeName="x2" from="21" to="120" dur="1s" repeatCount="0" fill="freeze" />
<animate attributeType="XML" attributeName="y2" from="21" to="120" dur="1s" repeatCount="0" fill="freeze" />
</line>
</svg>
推荐阅读
- asp.net-core - 如何从 Swagger 模式中过滤掉数据类型?
- gcc - 错误:在 unistd.h 文件中字符串常量 extern "C" 之前的预期 unqualified-id
- python - 一次在多个数据帧中应用相同的代码
- javascript - 根据嵌套对象数组中存在的 id 在嵌套对象数组中添加对象并忽略重复项
- autocomplete - ST3 中定义自动完成标签在哪里?我有重复的“<”问题
- apache-kafka - Confluent Cloud - 在 poll() 中看不到显着的多线程改进
- python - 树莓派 4 和 RFID RC522 卡识别问题
- javascript - Scrape QS大学世界排名(AJAX)
- ubuntu - 在“/temp/tempft_00003f44_000000000-9 network kernels.compute_61.cpp1.ii”的编译中检测到2个错误
- android - 在撰写 UI 测试中添加意图附加功能