关键帧(Keyframe)格式

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

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

语法

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

  1. 一个由多个关键帧的属性和值组成的对象所构成的数组。这是getKeyframes()方法返回的规范格式。

    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

composite

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

规范

规范 状态 备注
Web Animations
Keyframe object formats
Working Draft Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 未实现 (Yes) 未实现 未实现 未实现
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? 未实现 未实现 未实现

相关推荐

文档标签和贡献者

此页面的贡献者: Lim
最后编辑者: Lim,