正如评论中所说,我建议您为此使用动画库,一个很好的例子是速度JS http://velocityjs.org/.
如果无法选择建议的库,请继续阅读!
如果您希望在之前的转换之上进行多次转换,那么您需要使用matrix
变换的值。矩阵的事情变得有点复杂。矩阵的参数按以下顺序排列:-
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());
让我们使用您提到的初始鱼动画开始的示例:-
fish {
animation: fishanimation 4s ease-in-out infinite alternate;
}
@keyframes fishanimation {
0% {
transform: matrix(1, 0, 0, 1, 0, 20);
}
100% {
transform: matrix(1, 0, 0, 1, 0, 80);
}
}
要在 JavaScript 中动态更改此设置,需要进行一些令人不快的字符串操作并获取元素的转换属性(这比您想象的更尴尬)。以下是您可以如何执行此操作的示例。
function getTransformValues(obj) {
var transform = {
scaleX: 1,
skewX: 0,
skewY: 0,
scaleY: 1,
translateX: 0,
translateY: 0
};
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if (matrix && matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
transform.scaleX = parseFloat(values[0]);
transform.skewY = parseFloat(values[1]);
transform.skewX = parseFloat(values[2]);
transform.scaleY = parseFloat(values[3]);
transform.translateX = parseFloat(values[4]);
transform.translateY = parseFloat(values[5]);
}
return transform;
}
var values = getTransformValues($('#test'));
console.log(values);
// Object {scaleX: 1, skewX: 0, skewY: 0, scaleY: 2, translateX: 50, translateY: 40}
现在您已经获得了这些值,您可以通过仅更改所需的值来开始创建新矩阵,例如:-
var old = {
scaleX: 1,
skewX: 0,
skewY: 0,
scaleY: 2,
translateX: 50,
translateY: 40
};
$('#test').css('transform', 'matrix(' + old.scaleX + ', ' + old.skewY + ', ' + old.skewX + ', ' + old.scaleY + ', ' + old.translateX + ', ' + old.translateY + ')');
如果你想开始操纵旋转角度,事情就会变得如此甚至更复杂。为了避免这个答案陷入困境,问题的这一部分在以下链接中有一个解决方案:在 jQuery 中获取元素 -moz-transform:rotate 值 https://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery/11840120#11840120
希望您至少能明白为什么采用 Velocity JS 等库在撰写本文时,是获得快速、简单、干净、流畅的跨浏览器动画的最佳方式。