作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试将keySplines, values, keyTimes
属性添加到animate
元素来模拟easing animation .缓动效果不起作用。
HTML
<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
<path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
<animate class="triangle-animation" attributeType="XML" attributeName="d" from="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z" to="M765,22L765,15L505.00002429484215,15L490.00002429484215,0L475.00002429484215,15L0.5,15L0.5,21.5" dur="4s" repeatCount="1" fill="freeze" keySplines=" 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" calcMode="spline" begin="indefinite"></animate>
</path>
</svg>
<button id="btn">Click me</button>
JS
document.getElementById("btn").onclick = function(e) {
console.log('anim');
document.querySelector('.triangle-animation').beginElement();
}
最佳答案
keyTimes
,您要么必须提供一个 values
列表,其中包含匹配数量的以分号分隔的条目,要么如果您使用 from
和到
,keyTimes
必须是"0;1"
并且keySplines
必须只包含一个条目。<Z
命令,则每个值都需要一个。异常(exception):可以使用或省略可选的命令字母(用于重复相同的命令)。begin="btn.click"
。<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
<path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
<animate class="triangle-animation" attributeType="XML" attributeName="d" values="
M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z;
M765 22 765 15 239 15 225 0 211 15 L0.5 15 L0.5 21.5 Z;
M765 22 765 15 505 15 L490 0 L475 15 L0.5 15 L0.5 21.5 Z"
keySplines="0.1 0.8 0.2 1;0.1 0.8 0.2 1"
keyTimes="0;0.5;1"
dur="4s" repeatCount="1" fill="freeze" calcMode="spline" begin="btn.click"></animate>
</path>
</svg>
<button id="btn">Click me</button>
关于html - 缓动 svg 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49035324/
我是一名优秀的程序员,十分优秀!