zoukankan      html  css  js  c++  java
  • JS学习之路,之弹性运动框架

      弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复。

    var timer=null;
            var speed=0;
            //速度必须放在外面,放在里面的话,每次速度都是从0开始而不是保持上次执行的结果
            function move(){
                timer=setInterval(function(){
                    /*if (oDiv.offsetLeft<300) {
                        speed+=(300-oDiv.offsetLeft)/50;
                        //除以50是因为速度太大
                    }else{
                        speed-=(oDiv.offsetLeft-300)/50;}
                        //此处if,else里的两句执行语句化简过后是相同的
                            //都是speed=speed+300/50-oDiv.offsetLeft/50
                            //所以if,else语句可以省略掉*/
                    speed=speed+300/50-oDiv.offsetLeft/50;
                    
                    oDiv.style.left=oDiv.offsetLeft+speed+'px';
                },30);
            }

    弹性运动往往和摩擦运动结合使用,效果更佳,摩擦运动,即速度越来越小,经计算,比较人性化,合乎常规视觉的摩擦和弹性运动公式:

    speed+=(target-obj.offsetLeft)/5;
    speed*=0.7;

    弹性运动会出现有如下几个问题:

    1)无法到达指定位置-----小数误差问题
    2)如何解决?速度无法取整,使用变态方法----将要改变的值设置成变量


    弹性菜单;
    1)弹性运动过界问题:原因是当元素值过小时,会过界,速度会出现负值,可将速度为负时,将速度再设置
    为0,但也不能从根本上解决问题。所以要慎用弹性运动
    15,在使用弹性运动时,有时会出现运动过节的问题,因此有时要尽量避免使用弹性运动而是用缓冲运动

        var left=0;
           var speed=0;//速度必须放外面,否则就不是每次的执行结果了
            function move(obj,target){
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    speed+=(target-obj.offsetLeft)/5;
                        speed*=0.7;
                    /*obj.style.left=obj.offsetLeft+speed+'px';
                    //这种写法有误差,某一个li处会多或少一块,所以改成自定义变量left,如下面*/
                    left+=speed;
                    //为了提高效率,避免浪费资源,要关闭定时器
                    if (Math.abs(speed)<1 && Math.abs(left-target)<1) {
                        //判断条件就是距离足够近,速度足够小,利用绝对值
                        clearInterval(obj.timer);
                        obj.style.left=target+'px';
                        //以防万一,使定时器关闭时就卡在对应位置
                    }else{
                        obj.style.left=left+'px';
                        
                    }
                    document.title=obj.offsetLeft+' | '+target+' | '+speed;  //用于测试
                },30);
  • 相关阅读:
    使用本地系统帐户和域用户帐户两者区别(microsoft SQLServer2000)(ZT)
    Winform中消息循环、异步操作、Control.Invoke&Control.BeginInvoke学习
    SQL字符串的分组聚合(ZT)
    一次项目维护案例而对事务学习的笔记
    NOIP2011提高组 选择客栈
    NOIP2012提高组 Day 2 Problem 2 借教室
    201793模拟赛T2 取数(win)
    201793模拟赛T1 卡片(card)
    01Dart 变量常量
    01TypeScript 基础类型
  • 原文地址:https://www.cnblogs.com/RitaLee/p/5618123.html
Copyright © 2011-2022 走看看