У меня есть функция кубического Безье ease: cubic-bezier(.25,.1,.25,1) (http://cubic-bezier.com/#.25,.1,.25,1)
Я хочу противоположного этому. Вот графическое представление того, что я пытаюсь выполнить:
График слева — это то, что у меня есть, а функция для графика справа — это то, чего я пытаюсь добиться.
Если вы хотите сделать поворот, как в вашем обновленном ответе, все, что нам нужно сделать, это ... ну, это. Повернуть вокруг (0,5,0,5) на угол 180 градусов или π радиан. Предположим, у нас есть кривая, закодированная как массив c с четырьмя точечными объектами { x:..., y... }, тогда мы можем выполнить это вращение следующим образом:
c = [ {x:...,y:...}, ..., ..., ...];
function halfUnitTurn(v) {
// Note: it's actually 0.5 + ((v.x-0.5)*cos(pi) - (v.x-0.5)*sin(pi)),
// (and x*sin + y*cos for the y:... part) but: cos(pi) is just -1, and
// sin(pi) is 0, so things REALLY simplify!
return {
x: 0.5 - (v.x-0.5),
y: 0.5 - (v.y-0.5)
};
}
var rotated = c.map(function(p) { return halfUnitTurn(p); });
И в качестве демонстрационного кода: http://jsfiddle.net/mokg77fq/
v.x-.5, потому что cos(pi) это 1, да? редактировать: о да, я вижу, вы сказали это в комментарии так здорово! спасибо мужик!! :)
- person Noitidart; 15.10.2014
console.log
- person Noitidart; 15.10.2014
x: 1-v.x и т. д.? Это также облегчает понимание того, что происходит ИМХО: просто переворачивая x и y, а не вращая (ненужная сложность?)
- person Henrik Christensen; 08.05.2015
0.5 - (x-0.5) на 1-X является очевидной оптимизацией, но, конечно, не той, которая фактически улучшит производительность до такой степени, что упрощенная ротация использует плохой код =)
- person Mike 'Pomax' Kamermans; 08.05.2015
Вот замечательный код Майка, помещенный в повторно используемую функцию:
function reverseCssCubicBezier(cubicBezier) {
var maxX = Math.max(cubicBezier[0].x, cubicBezier[1].x, cubicBezier[2].x, cubicBezier[3].x);
var maxY = Math.max(cubicBezier[0].y, cubicBezier[1].y, cubicBezier[2].y, cubicBezier[3].y);
var halfUnitTurn = function(v) {
var tx = maxX/2, ty = maxY/2;
return { x: tx - (v.x-tx), y: ty - (v.y-ty) };
};
var revd = cubicBezier.map(halfUnitTurn);
return revd.reverse();
}
И вот как это использовать:
var ease = [{x:0,y:0}, {x:.25,y:.1}, {x:.25,y:1}, {x:1,y:1}]; //cubic-bezier(.25, .1, .25, 1)
var ease_reversed = reverseCssCubicBezier(ease);
var ease_css_string = 'cubic_bezier(' + [ease[1].x, ease[1].y, ease[2].x, ease[2].y].join(', ') + ')';
var ease_reversed_css_string = 'cubic_bezier(' + [ease_reversed[1].x, ease_reversed[1].y, ease_reversed[2].x, ease_reversed[2].y].join(', ') + ')';
Это возвращает:
ease: [{x:0, y:0}, {x:0.25, y:0.1}, {x:0.25, y:1}, {x:1, y:1}]
ease-reversed: [{x:0, y:0}, {x:0.75, y:0}, {x:0.75, y:0.9}, {x:1, y:1}]
ease: cubic_bezier(0.25, 0.1, 0.25, 1)
ease-reversed: cubic_bezier(0.75, 0, 0.75, 0.9)
Графически мы видим его идеальное перекрытие, я немного сдвинул зеленый влево, чтобы показать его идеальное перекрытие.
Спасибо, Майк!
