JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）

一、小知识

1.浏览器的offsetLeft是就近取整，要实现向上取整或向下取整，可以调用Math.ceil（）或Math.floor（）

2.想要通过函数获取行内元素的属性值，要用数组的方式，如获取id的left值，需要传入left参数，调用id.style[left]，如果调用的是id.style.left，则获取的不是left值，所以需要用[]传参

3.获取最终效果的属性值，如获取id的left值，用window.getComputedStyle(slowGo_func_demo, null).left，不好之处为此用法兼容性不好，谷歌可以用这种方法，但是ie需要用下面这种：obj.currentStyle[attr];

4.所有浏览器都支持的方式：

var slowGo_func_demo = document.getElementById("slowGo_func_demo");
slowGo_getStyle(slowGo_func_demo, "left");

function slowGo_getStyle(obj, attr) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(slowGo_func_demo, null)[ayyr];
  } else {
    return obj.currentStyle[attr];
  }
}

二、缓动动画的初级封装函数

实现效果

代码

HTML

   <!-- 缓动动画，为制作手风琴效果奠基S -->
        <div class="s_f_slider_box">
            <button id="s_f_slider_btn1">点击缓动</button>
            <button id="s_f_slider_btn2">点击缓动</button>
            <div id="s_f_slider_demo"></div>
        </div>
        <!-- 缓动动画，为制作手风琴效果奠基E -->

CSS

/* 缓动动画，为制作手风琴效果奠基S */
.s_f_slider_box {
    margin-top: 30px;
}

#s_f_slider_btn {
    height: 30px;
    border-radius: 20%;
    background-color: pink;
}

#s_f_slider_demo {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 30px;
    position: absolute;
}
/* 缓动动画，为制作手风琴效果奠基E */

JS

// 缓动动画，为制作手风琴效果奠基S
var timer = null;
var s_f_slider_btn1 = document.getElementById("s_f_slider_btn1");
var s_f_slider_btn2 = document.getElementById("s_f_slider_btn2");
var s_f_slider_demo = document.getElementById("s_f_slider_demo");
// 点击按钮后让盒子动起来.将step变成非匀速step=(target-leader)/10
s_f_slider_btn1.onclick = function () {
  s_f_animate(s_f_slider_demo, 200);
};
s_f_slider_btn2.onclick = function () {
  s_f_animate(s_f_slider_demo, 600);
};

// 封装缓动动画
function s_f_animate(obj, target) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var leader = obj.offsetLeft; //就近取整
    var step = (target - leader) / 10;
    step = step > 0 ? (step = Math.ceil(step)) : Math.floor(step);
    leader = leader + step;
    obj.style.left = leader + "px";
    if (leader == target) {
      clearInterval(obj.timer);
    }
  });
}
// 缓动动画，为制作手风琴效果奠基E

三、缓动动画的高级封装函数，为手风琴动画做铺垫

实现效果

将属性名通过键值对的方式一块传入，实现多属性同时缓动的封装函数

代码

HTML

 <!-- 升级缓动函数，设置缓动框架S -->
        <div class="slowGo_func_box">
            <h3>升级版-封装缓动函数框架</h3>
            <h3>缓动动画移动方块</h3>
            <button id="slowGo_func_btn1">点击缓动1</button>
            <button id="slowGo_func_btn2">点击缓动2</button>
            <div id="slowGo_func_demo"></div>
        </div>
        <!-- 升级缓动函数，设置缓动框架E -->

CSS

/* 升级缓动函数，设置缓动框架S */
.slowGo_func_box {
  height: 1000px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.slowGo_func_box h3 {
  margin-bottom: 10px;
}

#slowGo_func_demo {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  left: 10px;
  margin-top: 20px;
}

/* 升级缓动函数，设置缓动框架E */

JS

// 封装一个让任意对象的指定多个属性变成任意值的动画函数
var timer = null;
var slowGo_func_btn1 = document.getElementById("slowGo_func_btn1");
var slowGo_func_btn2 = document.getElementById("slowGo_func_btn2");
var slowGo_func_demo = document.getElementById("slowGo_func_demo");

function slowGo_getStyle(obj, attr) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(slowGo_func_demo, null)[attr];
  } else {
    return obj.currentStyle[attr];
  }
}
//传入单个属性的参数function slowGo_animate(obj, attr, target)
// 传入多个属性值参数 json{属性名：属性值}
function slowGo_animate(obj, json) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    // 假设这一次执行完成后，属性都达到目标值
    var flag = true;
    // 获取jspn键值对的属性和目标值
    // 获取当前对象的属性,键为k 值为json[k]
    for (var k in json) {
      var leader = parseInt(slowGo_getStyle(obj, k)) || 0;
      var step = (target - leader) / 10;
      var target = json[k];
      step = step > 0 ? (step = Math.ceil(step)) : Math.floor(step);
      leader = leader + step;
      // 设置任意属性
      obj.style[k] = leader + "px";
      // 所有属性都到达值后再清楚定时器，运用冒泡思想
      if (leader != target) {
        // 当前属性还没到目标
        flag = false;
      }
    }
    if (flag) {
      // 如果所有都达到目标了
      clearInterval(timer);
    }
  }, 15);
}
slowGo_func_btn1.onclick = function () {
  // 函数改变单个属性
  // slowGo_animate(slowGo_func_demo, "left", 400);
  // 函数改变多个属性 用对象的形式传入字符串json
  slowGo_animate(slowGo_func_demo, { height: 400, left: 400, width: 300 });
};
// 升级缓动函数，设置缓动框架E

四、筋斗云动画

用作导航栏，鼠标放在哪儿，背景就追随到哪儿，且点击后会定位在当前位置，不再追随

实现效果

代码

HTML

 <!-- 实现筋斗云S -->
        <div class="sd_nav">
            <h3>实现筋斗云</h3>
            <div id="sd_cloud"></div>
            <ul id="sd_navBar">
                <li>东秦</li>
                <li>食堂</li>
                <li>六餐</li>
                <li>一餐</li>
                <li>鹏远</li>
                <li>校六</li>
                <li>校一</li>
                <li>校四</li>
            </ul>
        </div>
        <!-- 实现筋斗云E -->

CSS

/* 缓动动画，实现筋斗云S */
.sd_nav {
    margin-top: 200px;
    overflow: hidden;
    position: relative;
}

.sd_nav ul {
    width: 500px;
    height: 50px;
    margin-top: 20px;
    border-radius: 20%;
    background-color: pink;
    box-shadow: 2px 5px rgb(211, 211, 159);
}

.sd_nav ul li {
    float: left;
    margin: 10px 12px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
}

#sd_cloud {
    position: absolute;
    width: 34px;
    height: 25px;
    background-color: #fa3;
    border-radius: 30% 80% 20% 60%/20% 60% 40% 40%;
    bottom: 12px;
    left: 9px;
    z-index: 1;
    opacity: 0.6;
}
/* 缓动动画，实现筋斗云E */

JS

// 导航栏的动画，筋斗云S
var sd_lis_position = 0;
var sd_navBar = document.getElementById("sd_navBar");
var sd_cloud = document.getElementById("sd_cloud");
var sd_lis = sd_navBar.children;
for (var i = 0; i < sd_lis.length; i++) {
  // 鼠标经过后移过去
  sd_lis[i].onmouseenter = function () {
    // 让筋斗云显示在当前li的位置
    var target = this.offsetLeft;
    s_f_animate(sd_cloud, target);
  };
  // 鼠标离开后移回去
  sd_lis[i].onmouseout = function () {
    s_f_animate(sd_cloud, sd_lis_position);
  };
  //   点击后定位到当前li
  sd_lis[i].onclick = function () {
    sd_lis_position = this.offsetLeft;
  };
}
// 导航栏的动画，筋斗云E