Javascript 如何在CSS中组合转换?
我有一个CSS动画,它使用变换相对于当前位置移动 CSSJavascript 如何在CSS中组合转换?,javascript,css,transform,css-animations,Javascript,Css,Transform,Css Animations,我有一个CSS动画,它使用变换相对于当前位置移动 CSS fish { animation: fishanimation 4s ease-in-out infinite alternate; } @keyframes fishanimation { 0% { transform: translateY(20px); } 100% { transform: translateY(80px); } } 现在,我想使用javascript动态调整缩放和旋转
fish {
animation: fishanimation 4s ease-in-out infinite alternate;
}
@keyframes fishanimation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(80px);
}
}
现在,我想使用javascript动态调整缩放和旋转,但这会被正在运行的css动画覆盖。这些变换不是组合的:(
Javascript
this.div.style.transform = "scale(0.4) rotate(45deg)";
是否可以将缩放和旋转应用于已存在的变换?类似于:
element.transform = element.transform + "scale(0.4) rotate(34deg)";
编辑:
这不是问题的重复:。问题的关键是元素可能已经有了我不想覆盖的变换。我想添加到元素中,而不知道当前变换状态是什么。如评论所述,我建议您为此使用动画库,这是一个很好的示例 如果建议的库不是一个选项,那么请继续阅读 如果您希望在以前的变换的基础上进行多个变换,例如在一个变换中进行多个变换,则需要使用变换的
矩阵
值。矩阵的情况变得有点复杂。矩阵的参数按以下顺序排列:-
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 + ')');
如果你想开始操纵旋转角度,事情会变得更加复杂。为了避免这个答案陷入困境,问题的这一部分在以下链接中有一个解决方案:
希望您能理解为什么在编写时采用Velocity JS之类的库(至少是)是快速、简单、干净和平滑的跨浏览器动画的最佳方式。您的意思是说您想在动画运行时添加到变换中吗?是的,我在样式表sh中定义的现有动画我要继续运行。我要更改css中尚未定义的变换,例如缩放和旋转。动画启动并运行后,动画将控制作为关键帧一部分的属性,因此,不,您不能通过内联样式对其进行编辑。您必须重写关键帧并重新填充动画。您将uld可以在规范中找到它(第3节下的第一段)。我可以推荐一个库使用Velocity JS吗?您可以在这个答案中找到一个动态创建和应用动画的示例-感谢您的详细解释!请注意,如果应用了旋转,则
parseInt()
可能不是一个好方法(并且您希望保留实际的变换-即使您不想编辑旋转)。例如,如果应用了变换:旋转(3deg)
,然后通过$element.css(“transform”)
,检查其值,则我们得到“矩阵(0.99863,0.052336,-0.052336,0.99863,0,0)”
。显然,旋转变换会生成浮点值,即使对于矩阵的倾斜方面也是如此。因此,在某些情况下,我们可能会更幸运地使用parseFloat()
。需要进行的另一个编辑是在getTransferMValues()中
函数。skewY
值来自值[1]
,skewX
值来自值[2]
。正如我前面的评论所指出的,如果你有一个旋转
变换,那么那些skew
值将被填充,因此如果你有skewX
和skewY
得到错误的值,旋转将被触发。请注意skewY()
和skewX()的顺序
在前面的回答中有说明。