我想实现一个动画,元素可以随机向周围浮动:
@keyframes floatAnim {
0% { transform: translate(0, 0); }
50% { transform: translate(
calc(100vw * -0.05 + 100vw * 0.1) * random(),
calc(100vh * -0.05 + 100vh * 0.1) * random()
);
}
100% { transform: translate(0, 0); }
}
我知道 wxss 中不存在这样的 random() 函数,是否有其他方式实现?
可以通过变量的改变, 来控制class的改变, 从而用不同的class承载不同的时间.
CSS 中不存在这个能力。需要使用 JS 实现。
:host{ --translate-value-1: 1px; --translate-value-2: 2px; } @keyframes floatAnim { 0% { transform: translate(0, 0); } 50% { transform: translate( var(--translate-value-1), var(--translate-value-2) ); } 100% { transform: translate(0, 0); } }
然后在 JS 中给,通过给 wxml 上的 style 设置值,就能控制这两个变量。
用api实现
wxs里支持setStyle