关键帧 (Keyframe) 格式

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Element.animate(), KeyframeEffect.KeyframeEffect(), 和 KeyframeEffect.setKeyframes() (en-US) 都接受格式为一组关键帧的对象,这种格式有以下几种选项。

语法

关键帧格式有两种不同的方式:

  1. 一个由多个关键帧的属性和值组成的对象所构成的数组。这是getKeyframes() (en-US)方法返回的规范格式。
    element.animate([
      { // from
        opacity: 0,
        color: "#fff"
      },
      { // to
        opacity: 1,
        color: "#000"
      }
    ], 2000);
    
    对每个关键帧的偏移可以通过提供一个offset来指定。
    element.animate([ { opacity: 1 },
                      { opacity: 0.1, offset: 0.7 },
                      { opacity: 0 } ],
                    2000);
    

    备注: offset 的值必须是在 [0.0, 1.0] 这个区间内,且须升序排列。

    并非所有的关键帧都需要设置 offset。没有指定 offset 的关键帧将与相邻的关键帧均匀间隔。 可以通过提供easing过渡来给指定关键帧之间应用过渡效果,如下所示:
    element.animate([ { opacity: 1, easing: 'ease-out' },
                      { opacity: 0.1, easing: 'ease-in' },
                      { opacity: 0 } ],
                    2000);
    
    在这个例子中,指定的 easing 仅适用于指定它的关键帧到下一帧之间。但是在options中指定的 easing 值都将应用在一个动画的整个持续时间里。
  2. 一个包含 key-value 键值的对象需要包含动画的属性和要循环变化的值数组
    element.animate({
      opacity: [ 0, 1 ],          // [ from, to ]
      color:   [ "#fff", "#000" ] // [ from, to ]
    }, 2000);
    
    使用这种格式,每个数组的元素数量不必相等。所提供的值将独立分开。
    element.animate({
      opacity: [ 0, 1 ], // offset: 0, 1
      backgroundColor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1
    }, 2000);
    
    特殊键offseteasingcomposite(如下)可以与属性值一起指定。
    element.animate({
      opacity: [ 0, 0.9, 1 ],
      offset: [ 0, 0.8 ], // [ 0, 0.8, 1 ] 的简写
      easing: [ 'ease-in', 'ease-out' ],
    }, 2000);
    
    从属性值列表生成一组合适的关键帧后,每个提供的偏移量将应用于相应的关键帧。如果值不足或者列表包含空值null,则以没有指定处理(即和上面第 1 种数组格式的一样均匀间隔). 如果easingcomposite 值太少,将根据需要,重复相应的列表。

属性

关键帧可以为任何的 css 动画属性指定 property-value。使用 camel-case 的属性名将变为 camelCase 格式,例如 background-color 变成 backgroundColor ,再如 background-position-x 变成 backgroundPositionX.。速记词,例如 margin 也是可以用的。.

两个特色的 css 属性:

  • float, 必须写成 cssFloat ,因为"float" 是 JavaScript 的保留关键字
  • offset, 必须写成 cssOffset ,因为"offset" 表示如下的关键帧 offset

还可以指定以下特色属性:

offset

关键帧的 offset 偏移量指定为介于0.01.0之间的数字或为null。这相当于使用@keyframes在 CSS 样式表中以百分比指定开始和结束状态。如果此值为null或缺失,则关键帧将在相邻关键帧之间均匀分布。

easing

从这个关键帧直到这一级中的下一个关键帧所使用的 timing function (en-US)

composite

KeyframeEffect.composite (en-US) 操作用于将此关键帧中指定的值与基础值组合在一起。如果正在使用在效果上指定的复合操作,则不会出现这种情况。

规范

Specification
Unknown specification
# dom-animatable-animate

浏览器兼容性

BCD tables only load in the browser

相关推荐