Question

我有一个2秒的CSS转换，从0到200px，在cubic-bezier（0.4,0,0.2,1）的时间：

transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);

我想将此动画分解为两个相等的部分：

Part 1: transform-duration 1s from 0 to 100px
Part 2: transform-duration 1s from 100px to 200px, will start after the first one ends

棘手的部分是计算每个人的正确时间。根据这篇文章：Create easy function 40% off set和这个：Extrapolate split cubic-bezier to 1,1我设法拆分我的初始贝塞尔曲线并将坐标标准化为（0,0） - （1,1）。

这是我的代码：

//    Single Animation, 2s from 0 to 200px
var d1 = document.querySelector('.d1')
d1.style.transform = 'translateX(200px)';

//    Composed Animation, Part 1, 1s from 0 to 100px
var d2 = document.querySelector('.d2');

//    Get first part bezier
//    cubic-bezier(0.4, 0, 0.2, 1)
var x = [0, 0.4, 0.2, 1]
var y = [0, 0,   1,   1]

function splitCubicBezier(options) {
  var z = options.z,
      cz = z-1,
      z2 = z*z,
      cz2 = cz*cz,
      z3 = z2*z,
      cz3 = cz2*cz,
      x = options.x,
      y = options.y;

  var left = [
    x[0],
    y[0],
    z*x[1] - cz*x[0], 
    z*y[1] - cz*y[0], 
    z2*x[2] - 2*z*cz*x[1] + cz2*x[0],
    z2*y[2] - 2*z*cz*y[1] + cz2*y[0],
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0]];

  var right = [
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0],
                    z2*x[3] - 2*z*cz*x[2] + cz2*x[1],
                    z2*y[3] - 2*z*cz*y[2] + cz2*y[1],
                                    z*x[3] - cz*x[2], 
                                    z*y[3] - cz*y[2], 
                                                x[3],
                                                y[3]];

  if (options.fitUnitSquare) {
    return {
      left: left.map(function(el, i) {
        if (i % 2 == 0) {

          var Xmin = left[0];
          var Xmax = left[6]; //should be 1
          var Sx = 1 / (Xmax - Xmin);
          return (el - Xmin) * Sx;
        } else {

          var Ymin = left[1];
          var Ymax = left[7]; //should be 1
          var Sy = 1 / (Ymax - Ymin);
          return (el - Ymin) * Sy;
        }
      }),
      right: right.map(function(el, i) {
        if (i % 2 == 0) {
          //xval
          var Xmin = right[0]; //should be 0
          var Xmax = right[6];
          var Sx = 1 / (Xmax - Xmin);
          return (el - Xmin) * Sx;
        } else {
          //yval
          var Ymin = right[1]; //should be 0
          var Ymax = right[7];
          var Sy = 1 / (Ymax - Ymin);
          return (el - Ymin) * Sy;
        }
      })
    }
  } else {
   return { left: left, right: right};
  }
}

var result = splitCubicBezier({
  z: .5, // Split at half
  x: x,
  y: y,
  fitUnitSquare: true // coordinate normalization
});

console.log(result)

d2.addEventListener("transitionend", newTiming, false);

d2.style['transition-timing-function'] = 'cubic-bezier(' + result.left[2] + ',' + result.left[3] + ',' + result.left[4] + ',' + result.left[5] + ')';
d2.style.transform = 'translateX(100px)';

function newTiming(){
    d2.textContent = 'Composed Animation, Part 2'
    d2.style['transition-timing-function'] = 'cubic-bezier(' + result.right[2] + ',' + result.right[3] + ',' + result.right[4] + ',' + result.right[5] + ')';
    d2.style.transform = 'translateX(200px)';
}

http://jsfiddle.net/3hs4ehom/1/

显然这看起来不对。贝塞尔曲线似乎右撇http://jsfiddle.net/DfpLk/3/。我错过了什么吗？感谢。

拆分CSS过渡贝塞尔曲线

0 个答案: