减少动画关键帧的数组循环

时间:2018-10-19 23:25:41

标签: less css-animations mixins

尝试为基于%的动画创建混入。

我有一组要在mixin中使用的坐标,我正在尝试将其声明为数组:

@ballAnimation0: 
  (0%, 3, 3),
  (50%, 10, 1),
  (65%, 12, 12),
  (75%, 22, 19),
  (88%, 16, 15),
  (92%, 21, 15),
  (95%, 19, 16),
  (100%, 18, 35);

我准备了一个处理动画停止的函数:

.moveBall(@percent, @left, @top) {
  @{percent} {
    transform: translate(@left * 5, @top * 5);
  };
};

然后我有一个函数试图创建@keyframes,我称之为:

.for(@list, @code) {
 .loop(@i:1) when (@i =< length(@list)) {
    @value: extract(@list, @i);
    @code();
    .loop(@i + 1);
  }
  .loop()
}

.keyframes(@name, @rules) {
  @keyframes @name {
    .for(@rules, .moveBall(@{value}));
  }
}

.keyframes(ballAnimation0, @ballAnimation0);

我绝对知道我的阵列对于入门者来说是完全错误的,但是我不知道如何去做。谢谢!

0 个答案:

没有答案