使用KUTE.js制作高性能动画：第2部分(动画CSS属性)

文章是名为 使用 KUTE.js 的高性能动画系列的一部分。 使用 KUTE.js 的高性能动画：第 1 部分，入门 使用 KUTE.js 的高性能动画：第 3 部分，动画 svg

该系列的第一个教程侧重于为初学者提供对 KUTE.js 库的介绍。opacity在那个教程中，我们只为我们的元素设置了androtateZ属性的动画。在本教程中，您将学习如何使用 KUTE.js 为其余的css属性设置动画。

其中一些属性需要您加载 CSS 插件，而其他属性可以使用核心引擎本身进行动画处理。这两种场景ios将在教程中单独讨论。

盒模型属性

核心 KUTE.js 引擎只能为最常见的盒子模型属性设置动画：width、height、top和left. 您将不得不使用 CSS 插件来为几乎所有其他盒子模型属性设置动画。下面是一个例子，它在上一个教程中为我们的盒子的顶部位置、宽度和高度设置动画：

var animateTop = KUTE.allFromTo(
  theBoxes,
  { top: 0 },
  { top: 100 },
  { offset: 100 }
);

var animateA = KUTE.fromTo(
  boxA,
  { height: 100 },
  { height: 175 }
);

var animateB = KUTE.fromTo(
  boxB,
  { width: 100 },
  { width: 200 }
);

您可能已经注意到，我曾经allFromTo() 为所有框的 top 属性设置动画。但是，我曾经fromTo() 为单个盒子设置动画。您应该记住，一旦动画完成，盒子就会保持最终状态。

在 CSS 插件的帮助下，您将能够为margin、padding和设置动画borderWidth。将插件包含在项目中后，其余过程完全相同。

动画变换属性

您可以借助核心引擎本身为规范中提到的几乎所有变换属性设置动画。在这种情况下无需加载 CSS 插件。

您可以使用translate. 同样，您可以使用translateX、translateY和translateZ来沿各自的轴设置元素的动画。要使该translateZ属性生效，您还必须为该 parentPerspective 属性设置一个值。这是一个例子：

var animateAll = KUTE.allFromTo(
  theBoxes,
  { translateY: 0 },
  { translateY: 100 },
  { offset: 1000 }
);

var animateA = KUTE.fromTo(
  boxA,
  { translateZ: 0 },
  { translateZ: 50 },
  { parentPerspective: 100, parentPerspectiveOrigin: "0% 0%" }
);

var animateB = KUTE.fromTo(
  boxB,
  { translateX: 0 },
  { translateX: -200 }
);

startButton.addeventListener(
  "click",
  function() {
    animateAll.start();
    animateA.start();
    animateB.start();
  },
  false
);

如果单击Start Animation按钮并仔细观察动画，您会看到红色框首先在 X 方向平移 -200。之后，它移动到其原始位置并开始沿 Y 方向平移。盒子先动画的原因translateX是我们translateY使用offset属性为动画添加了延迟。

就像平移一样，您也可以使用rotate、rotateX、rotateY和rotateZ属性沿特定轴执行旋转。由于rotateX和rotateY是 3D 旋转，因此您必须使用该perspective属性才能使旋转动画按预期工作。以下示例显示了使用该 perspective属性如何影响这两个属性的整体动画。

var animateAll = KUTE.allFromTo(
  theBoxes,
  { rotate: 0 },
  { rotate: 360 },
  { offset: 1000 }
);

var animateA = KUTE.fromTo(
  boxA,
  { rotateY: 0 },
  { rotateY: 180 },
  { perspective: 100 }
);

var animateB = KUTE.fromTo(
  boxB,
  { rotateY: 0 },
  { rotateY: -180 }
);

startButton.addEventListener(
  "click",
  function() {
    animateAll.start();
    animateA.start();
    animateB.start();
  },
  false
);

perspective在上面的示例中，盒子 A 和盒子 B 同时开始沿 Y 轴旋转，但是由于属性的原因，生成的动画非常不同。您可能已经注意到，橙色框并没有围绕其中心进行旋转，而使用animateAll. 这是因为默认情况下所有动画的持续时间都是 500 毫秒，我们同时在橙色框上 应用animateAll和。animateA

由于animateA是在之后应用animateAll，它的动画优先于animateAll。animateAll增加动画持续时间后，您会看到橙色框上仍会应用常见的旋转使用。换句话说，您不能同时使用多个补间对象为不同的变换属性设置动画。您要设置动画的所有变换属性都应在单个补间对象中指定。下面的例子应该清楚地说明：

// This will not work as expected
var translateAll = KUTE.allFromTo(
  theBoxes,
  { translateY: 0 },
  { translateY: 100 },
  { offset: 1000 }
);

var rotateAll = KUTE.allFromTo(
  theBoxes,
  { rotate: 0 },
  { rotate: 360 },
  { offset: 1000 }
);

startButton.addEventListener(
  "click",
  function() {
    translateAll.start();
    rotateAll.start();
  },
  false
);

// This will work as expected
var rtAll = KUTE.allFromTo(
  theBoxes,
  { translateY: 0, rotate: 0 },
  { translateY: 100, rotate: 360 },
  { offset: 1000 }
);

startButton.addEventListener(
  "click",
  function() {
    rtAll.start();
  },
  false
);

使用 CSS 插件

正如我之前提到的，并非所有 CSS 属性都可以仅使用核心 KUTE.js 引擎进行动画处理。您需要使用额外的 CSS 插件来动画属性，如填充、边距、图像的背景位置以及其他与边框相关的属性。因此，在您尝试本节中的任何示例之前，您应该在项目中包含该插件。

<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js"></script>

包含插件后，您将能够border-radius使用borderRadius. 您还可以使用、、和border-radius单独为所有角值设置动画。这是一个显示动画的示例。borderTopLeftRadiusborderTopRightRadiusborderBottomLeftRadiusborderBottomRightRadius

如果单击“开始动画”按钮，您会注意到红色和黄色框的左上边框半径在延迟后动画化。这是因为offset财产。一旦我们点击按钮，其余的半径就会被动画化。上面的示例是使用以下代码创建的：

var animateAll = KUTE.allFromTo(
  theBoxes,
  { borderTopLeftRadius:'0%' },
  { borderTopLeftRadius:'100%' },
  { offset: 1000 }
);

var animateA = KUTE.fromTo(
  boxA,
  { borderTopRightRadius:'0%' },
  { borderTopRightRadius:'100%' }
);

var animateB = KUTE.fromTo(
  boxB,
  { borderBottomLeftRadius:'0%' },
  { borderBottomLeftRadius:'100%' }
);

var animateC = KUTE.fromTo(
  boxC,
  { borderBottomRightRadius:'0%' },
  { borderBottomRightRadius:'100%' }
);

startButton.addEventListener(
  "click",
  function() {
    animateAll.start();
    animateA.start();
    animateB.start();
    animateC.start();
  },
  false
);

我们没有将补间对象链接在一起，所以所有的动画都同时开始。您还可以使用borderColor、borderTopColor、borderLeftColor、borderBottomColor和以类似的方式为不同边框的颜色设置动画borderRightColor。 

最后的想法

在本教程中，我们了解了可以在使用和不使用 KUTE.js CSS 插件的情况下进行动画处理的不同 CSS 属性。如果您有任何问题，请在评论中告诉我。