指定时间内的匀速运动

第一种思想
实现一个匀速运动,在指定时间内完成动画: 计算出总距离/总时间,根据总距离和总时间求出对应的步长(每10ms走一步的话走多远)。

    var maxLeft = utils.win('clientWidth') - oBox.offsetWidth;
    var duration = 2000;
    var interval = 10;
    var step = (maxLeft / duration) * interval;

    var timer = window.setInterval(function () {
        var curLeft = utils.css(oBox, 'left');
        curLeft += step;
        utils.css(oBox, 'left', curLeft);

        if (curLeft >= maxLeft) {
            clearInterval(timer);
            return;
        }
    }, interval);

第二种思想:
实现一个匀速运动: 在制定时间内完成动画 -> 自己写一个动画公式,根据当前走的时间t、总时间d、起始位置b、总距离c,计算出当前元素应该在的位置,让当前的元素运动到这个位置即可。

    function Linear(t, b, c, d) {
        return c * t / d + b;
    }

    var oBox = document.getElementById('box');
    var target = utils.win('clientWidth') - oBox.offsetWidth,
        begin = utils.css(oBox, 'left'),
        change = target - begin; // 总距离
    var duration = 2000;
    var time = 0;

    // (time / duration) * change + begin; // 走了多远+开始位置=当前位置
    var timer = window.setInterval(function () {
         time += 10;

         if (time >= duration) {
             utils.css(oBox, 'left', target);
             clearInterval(timer);
             return;
         }

         var curPosition = Linear(time, begin, change, duration);
         utils.css(oBox, 'left', curPosition);
    }, 10);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,770评论 0 10
  • 转载一篇高质量博文,原地址请戳这里转载下来方便今后查看。1 背景不能只分析源码呀,分析的同时也要整理归纳基础知识,...
    Elder阅读 1,957评论 0 24
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,586评论 6 30
  • [TOC] Property Animation 属性动画系统是一个强大的框架,几乎可以将任何东西动画化。您可以定...
    独倚栏杆阅读 703评论 2 1
  • 缘分不在 就随风去远航 行程有风 有浪 任她去闯 别说抱歉 我们本来就互不相欠 天边的彩虹 也不过片刻的壮观 走就...
    笨妞简阅读 486评论 0 0