svg animate中的缓动不起作用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg animate中的缓动不起作用相关的知识,希望对你有一定的参考价值。

我试图将keySplines, values, keyTimes属性添加到animate元素来模拟easing animation。缓和效果不起作用。

jsfiddle

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();
}
答案
  1. 如果你使用keyTimes,你必须提供一个values列表,其中包含匹配数量的以分号分隔的条目,或者如果你使用fromtokeyTimes必须是"0;1",而keySplines必须只包含一个条目。
  2. 值列表中的路径定义必须在结构上匹配,只有数字不同。如果有一个关闭Z命令,每个值都需要一个。例外:可以使用或省略可选的命令字母(用于重复相同的命令)。
  3. 额外奖励:您的示例不需要javascript就可以点击按钮开始。只需设置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>
另一答案

我在Z属性中缺少to。工作jsfiddle

以上是关于svg animate中的缓动不起作用的主要内容,如果未能解决你的问题,请参考以下文章

WPF中ListBox滚动时的缓动效果

如何使用 Core Animation 创建自定义缓动功能?

镜头以及各种运动的缓动效果

JS动画公式

div盒子的缓动函数封装

如何对精灵动作应用不同的缓动效果?