使用KUTE.js的高性能动画：第2部分，CSS属性动画

该系列的第一篇教程重点介绍了KUTE.js库，它对初学者友好。 在该教程中，我们仅对元素的opacity和rotateZ属性设置了动画。 在本教程中，您将学习如何使用KUTE.js为其余CSS属性设置动画。

其中一些属性将要求您加载CSS插件，而其他一些属性可以使用核心引擎本身进行动画处理。 在本教程中将分别讨论这两种情况。

盒子模型属性

核心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在2D空间中为元素平移设置动画。 同样，可以使用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
);

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

就像翻译，你也可以进行使用沿着特定的轴旋转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
);

在上面的示例中，框A和框B同时开始沿Y轴旋转，但是由于perspective特性，所产生的动画非常不同。 您可能已经注意到，橙色框未执行使用animateAll应用于其中心的旋转。 这是因为默认情况下，所有动画的持续时间为500毫秒，并且我们同时在橙色框中同时应用了animateAll和animateA 。

由于animateA在animateAll之后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>

包含插件后，就可以使用borderRadius设置border-radius属性的borderRadius 。 您还可以使用borderTopLeftRadius ， borderTopRightRadius ， borderBottomLeftRadius和borderBottomRightRadius分别为所有角border-radius设置动画。 这是一个显示动画的示例。

如果单击“ 开始动画”按钮，则会注意到在延迟后为红色和黄色框的左上边框半径设置了动画。 这是因为有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属性。 如有任何疑问，请在评论中让我知道。

下一个教程将介绍可以使用KUTE.js SVG插件创建的不同动画。

翻译自: https://code.tutsplus.com/tutorials/performant-animations-using-kutejs-animating-css-properties--cms-29702