Question

朋友们，我正在使用一个简单的代码来更好地理解问题的重点。

我有一个红色的盒子，想在时间轴上用它做一些动画，我的意思是首先是单向动画，然后是另一个，然后是另一个等等。

有正确的方法吗？是否有任何插件使用漂亮的代码一个接一个地制作动画，干净而不是像这样的愚蠢：

＆＃13;

(function($) {

  var box = $('.box');

  $(box).animate({
    left: '125',
  });
  
  $(box).animate({
    top: '100'
  })
  
}(jQuery));

＆＃13;

.box {
  width: 150px;
  height: 150px;
  border: 1px solid red;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

＆＃13;

我可以创建时间轴吗？

在真实的代码中，我有更多的40个动画，一个接一个，并且非常污染。

我这样使用：

var timeLine = {
  firstAnimation: function() {
    $('element').animate({
      // do whatever i want
    }, TIME, function() {
      // CALL THE SECOND!
      timeLine.secondAnimation();
    });
  },

  secondAnimation: function() {
    // AND SO ON..
  }
};

我将我的对象中的动画功能分隔为时间轴，因此它更具可读性，但仍然非常丑陋，我想我可能做错了。

我不能使用CSS3。

注意：如果这种情况是最正确的做法，现在我理解为什么CSS3动画在那里

Answer 1

Your approach with the timeline example is a data-driven approach.

In my opinion, data-driven approaches are wonderful and they are a valid software pattern. It basically puts your logic in the data-structure and your code handles the structure.

This is good because it allows for dumb code and smart data-structures. In this scenario, maintenance/debugging is far easier.

To read more, The Art of Unix Programming（这是一本关于unix的书）有一整章致力于这种方法。

现在，话说回来，你的时间表方法可以有所改进

从对象切换到由JSON个对象
将当前动画索引存储在变量
制作一个自动调用的递归函数，直到动画完成

var timeLineAnimations = [{
    element: 'some-selector',
    animation: {
        top: '100'
    },
    time: 1000
}, {
    element: 'some-selector',
    animation: {
        left: '100'
    },
    time: 2000
}, ...];

var currentIndex = 0;

function animateTimeLine(currentIndex) {
    var currentAnimation = timeLineAnimations[currentIndex];

    $(currentAnimation.element).animate(currentAnimation.animation, currentAnimation.time, function() {
        currentIndex++;
        if (currentIndex < timeLineAnimations.length) {
            animateTimeLine(currentIndex);
        }
    });
}
animateTimeline(0);

这种改进的好处在于它纯粹是数据驱动的，您不再拥有firstAnimation，secondAnimation等命名函数。

所有代码都是机械调用自己，而你的逻辑数据结构

如何以智能方式一个接一个地使用几个独特的动画

1 个答案: