From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web_animations_api/keyframe_formats/index.html | 196 +++++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html (limited to 'files/zh-cn/web/api/web_animations_api/keyframe_formats') diff --git a/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html b/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html new file mode 100644 index 0000000000..d534d4a5c4 --- /dev/null +++ b/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html @@ -0,0 +1,196 @@ +--- +title: 关键帧(Keyframe)格式 +slug: Web/API/Web_Animations_API/Keyframe_Formats +tags: + - Animation + - annimate + - 关键帧 + - 关键帧格式 +translation_of: Web/API/Web_Animations_API/Keyframe_Formats +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

+ +

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

+ +

语法

+ +
+

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

+ +
    +
  1. +

    一个由多个关键帧的属性和值组成的对象所构成的数组。这是{{domxref("KeyframeEffect.getKeyframes()", "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. +
  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);
+
    + +

    特殊键offset，easing和composite（如下）可以与属性值一起指定。

    + + 
    element.animate({
+  opacity: [ 0, 0.9, 1 ],
+  offset: [ 0, 0.8 ], // [ 0, 0.8, 1 ] 的简写
+  easing: [ 'ease-in', 'ease-out' ],
+}, 2000);
+
    + +

    从属性值列表生成一组合适的关键帧后，每个提供的偏移量将应用于相应的关键帧。如果值不足或者列表包含空值null，则以没有指定处理（即和上面第1种数组格式的一样均匀间隔）.

    + +

    如果easing 或composite 值太少，将根据需要，重复相应的列表。

    +
    3. +
+ +

属性

+ +

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

+ +

两个特色的css属性：

+ + + +

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

+ +
+
offset
+
+

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

+
+
easing
+
+

从这个关键帧直到这一级中的下一个关键帧所使用的  timing function

+
+
composite
+
+

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

+
+
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName("Web Animations", "#processing-a-keyframes-argument", "Keyframe object formats")}}{{Spec2('Web Animations')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{ CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

相关推荐

+ + -- cgit v1.2.3-54-g00ecf