我有一个CSS动画,它使用变换相对于其当前位置来回移动。
的CSS
fish {
animation: fishanimation 4s ease-in-out infinite alternate;
}
@keyframes fishanimation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(80px);
}
}
现在,我想使用JavaScript动态调整缩放比例和旋转角度,但是正在运行的CSS动画会覆盖此比例和旋转角度。转换不合并:(
Java脚本
this.div.style.transform = "scale(0.4) rotate(45deg)";
是否可以将比例和旋转应用于已经存在的转换?就像是:
element.transform = element.transform + "scale(0.4) rotate(34deg)";
编辑:
这不是问题的重复:如何组合CSS转换。这个问题的重点是元素可能已经具有我不想覆盖的转换。我想添加到它,而实际上不知道当前的转换状态是什么。
如前所述,我建议您为此使用动画库,一个很好的例子是Velocity JS。
如果没有建议的库,请继续阅读!
如果要在以前的转换之上进行多个转换,则需要使用该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中动态更改此设置,将需要进行一些不愉快的字符串操作并获取元素的transform属性(这比您想象的要尴尬)。这是您可能如何做的一个例子。
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值
希望您能明白为什么至少在撰写本文时采用Velocity JS之类的库是实现快速,轻松,干净和流畅的跨浏览器动画的最佳方法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句