www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

原生JS实现动漫函数的卷入,前端根基

2020-04-23 01:02 来源:未知

时间: 2019-12-21阅读: 86标签: 封装

动画原理

图片 1

动画基本原理.gif

人走路的时候, 步长
动画的基本原理 : 让盒子的 offsetLeft 步长

盒子 原来的位置 0 10 盒子现在的offsetLeft 10

之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。做到类似jQuery show()的效果

封装了一个JS方法,支持元素的基本动画:宽、高、透明度...等,也支持链式动画和同时运动。

动画基本原理的完整源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<button>开始</button>
<div></div>
</body>
</html>
<script>
    //动画的基本原理   盒子的 offsetLeft     步长
    var btn = document.getElementsByTagName("button")[0];
    var div = document.getElementsByTagName("div")[0];
    var timer = null;
    btn.onclick = function() {
       timer = setInterval(function() {
           if(div.offsetLeft > 400)
           {
               clearInterval(timer);
           }
           div.style.left = div.offsetLeft   10    "px";
       },20);
    }
</script>

原创文章,允许转载分享。但请转载请一定标明出处,这是起码的尊重 本文章阅读前需要对微信小程序的动画api有所了解

获取元素的属性的函数并进行了兼容性处理:

JS取绝对值:

Math.abs(-5) 取绝对值函数

|-5| = 5

可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画

function getStyle(obj, attr) { if(obj.currentStyle){ //IE浏览器 return obj.currentStyle[attr]; }else{ //chrome、firefox等浏览器 return getComputedStyle(obj,null)[attr]; }}

1/基本动画函数

图片 2

基本动画函数.gif

1.寻根问底,发现wx_mini_program(下面称呼微信小程序为wxmp [差点叫成 mmp] )有一个全局的js逻辑文件,叫app.js,有意思,可以往里面塞自己写的object,那就从那里入手吧 2.在app.js中定义全局的动画函数

动画函数:

基本动画函数完整源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="run"></div>
</body>
</html>
<script>
    function $(id) {return document.getElementById(id)}
    $("btn200").onclick = function() {
        animate($("run"),200);  // animate 自定义函数
        // 第一个参数  谁做动画    第二参数目标位置
    }
    $("btn400").onclick = function() {
        animate($("run"),400);
    }
    var arr = [];
    arr.index = 10;   // 自定 属性  arr 的 index  arr 专属
    var index = 20; // 变量   miss 自由的  任何人都可以使用
    // 运动函数
   /* for(var i=0; i<lis.length;i  )
    {
        lis[i].index = i;
    }*/
    function animate(obj,target){
        obj.timer = setInterval(function() {  // 开启定时器
            if(obj.offsetLeft > target)
            {
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft   10   "px";
        },30)
    }
</script>
App({ //渐入,渐出实现 show : function{ var animation = wx.createAnimation({ //持续时间800ms duration: 800, timingFunction: 'ease', }); //var animation = this.animation animation.opacity //将param转换为key var json = '{"'   param   '":""}' json = JSON.parse; json[param] = animation.export() //设置动画 that.setData }, //滑动渐入渐出 slideupshow:function(that,param,px,opacity){ var animation = wx.createAnimation({ duration: 800, timingFunction: 'ease', }); animation.translateY.step() //将param转换为key var json = '{"'   param   '":""}' json = JSON.parse; json[param] = animation.export() //设置动画 that.setData }, //向右滑动渐入渐出 sliderightshow: function (that, param, px, opacity) { var animation = wx.createAnimation({ duration: 800, timingFunction: 'ease', }); animation.translateX.step() //将param转换为key var json = '{"'   param   '":""}' json = JSON.parse; json[param] = animation.export() //设置动画 that.setData
var timer = null; // 声明一个timer来存储定时器function animate(obj, Obj, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { /* * 当我们改变多个属性时,如果其中一个属性已经达到目标值,就会清除定时器,就会导致其他没有达到目标值的属性也会停止 * 为了解决这个问题,我们声明一个节流阀flag,让它为true * 判断是否还有没达到目标值的属性,如果还有,就让flag为false(关闭节流阀),让定时器继续执行 * 当所有属性都达到了目标值时,才执行清除定时器那一步 */ var flag = true; for(var attr in Obj) { // for...in...遍历对象 var icur = 0; // 存储获取过来的属性值 if(attr == 'opacity') { // 判断获取过来的属性是否为opacity icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); // float会有小误差,所以需要四舍五入一下 } else { icur = parseInt(getStyle(obj, attr)); // 获取过来的值可能带单位,所以需要用到parseInt() } var speed = (Obj[attr] - icur) / 10; // 速度 逐渐变慢(也可以设为固定值实现匀速运动) speed = speed  0 ? Math.ceil(speed) : Math.floor(speed); // speed并不总是整数,会导致和目标值不相等,所以需要对speed进行取整,大于0向上取整,小于0向下取整 if(icur != Obj[attr]) { // 判断是否还有属性没有达到目标值 flag = false; } if(attr == 'opacity') { // opacity是没有单位的,所以在这里需要判断一下 obj.style.filter = 'alpha(opacity = '  (icur   speed)  ')'; obj.style.opacity = (icur   speed) / 100; // opacity别忘了除以100 } else { obj.style[attr] = icur   speed   'px'; // 原来的值加上速度赋值给属性 } } if(flag) { // 当所有属性都达到目标值,即flag为true时,再停止定时器 clearInterval(obj.timer); callback  callback(); // 判断是否有回调函数,有的话就执行 } }, 25)}

2/匀速运动封装函数

图片 3

匀速运动封装.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        #box1 {
            position: absolute;
            top: 150px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
<script>
    var box = document.getElementById("box");
    var box1 = document.getElementById("box1");
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    btn200.onclick = function() {
        animate(box,200);
        animate(box1,500);
    }
    btn400.onclick = function() {
        animate(box,400);
    }
    //  封装匀速运动
    function animate(obj,target){
        clearInterval(obj.timer);  // 先清除定时器
        var speed = obj.offsetLeft < target ? 5 : -5;  // 用来判断 应该    还是 -
        obj.timer = setInterval(function() {
            var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
            obj.style.left = obj.offsetLeft   speed   "px";
            if(Math.abs(result)<=5)  // 如果差值不小于 5 说明到位置了
            {
                clearInterval(obj.timer);
                obj.style.left = target   "px";  // 有5像素差距   我们直接跳转目标位置
            }
        },30)
    }
</script>

3.现在我们再看看调用这个函数的具体方法 在wxml中,只需要设置animation绑定即可,以首页index为例

接下来我们来调用一下:

三个取整函数

这三个函数都是 数学函数
Math

Math.ceil() 向上取整 天花板

比如说 console.log(Math.ceil(1.01)) 结果 是 2
console.log(Math.ceil(1.9)) 结果 2
console.log(Math.ceil(-1.3)) 结果 是 -1

Math.floor() 向下取整 地板

比如说 console.log(Math.floor(1.01)) 结果 是 1
console.log(Math.floor(1.9)) 结果 1
console.log(Math.floor(-1.3)) 结果 是 -2

Math.round() 四舍五入函数

console.log(Math.round(1.01)) 结果 是 1
console.log(Math.round(1.9)) 结果 是 2

// 这里是pages/page/index.wxml//使用view包裹需要动画的元素//class中定义动画开始前的初始样式,如透明度=0,向下偏移200px等,animtion属性填入绑定值

// 这里是pages/page/index.js//首先获取小程序实例,访问app.js中的函数this.app = getApp();//调用show函数,传参//注意:查看上面show函数定义查看参数含义//第一个参数是当前的页面对象,方便函数setData直接返回数据//第二个参数是绑定的数据名,传参给setData,详细见上面//第三个参数是上下滑动的px,因为定义初始该元素向下偏移了200px,所以这里使其上移200px//第四个参数是需要修改为的透明度,这里是1,表示从初始的中定义的透明度0修改到1this.app.slideupshow(this, 'slide_up1', -200, 1)
var box = document.querySelector('.box'); box.addEventListener("mouseover", function() { animate(this, {width: 300, height: 200, opacity: 100}, function() { animate(box, {width: 200, height: 100, opacity: 30}); }); });

缓动动画原理

匀速动画的原理: 盒子本身的位置 步长
缓动动画的原理: 盒子本身的位置 步长 (不断变化的)

图片 4

缓动动画原理.gif

5.让我们完善流程,达到预览图首页的效果 wxml就是将各个容器分别绑定不同的变量,一个view容器就是一个动画单位,如

缓动动画原理的源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var target = 400;
    var timer = null;
    btn.onclick = function() {
         timer = setInterval(function() {
             // 盒子本身的位置     步长 (不断变化的)
             var step = (target - box.offsetLeft) / 10;   // 步长
             console.log(step);
             step =  step > 0 ? Math.ceil(step) : Math.floor(step);  // 步长取整
             box.style.left = box.offsetLeft   step   "px";
             if(box.offsetLeft == target) // 判断结束条件
             {
                 clearInterval(timer);
                 alert("到目标了")
             }
         },30)

    }
</script>
 ... ...

//onload时获取小程序实例onLoad: function  { this.app = getApp() },//页面展示时,触发动画 onShow: function () { this.app.slideupshow(this, 'slide_up1', -200, 1) setTimeout { this.app.slideupshow(this, 'slide_up2', -200, 1) }.bind; },//页面隐藏时,触发渐出动画 onHide: function () { //你可以看到,动画参数的200,0与渐入时的-200,1刚好是相反的,其实也就做到了页面还原的作用,使页面重新打开时重新展示动画 this.app.slideupshow(this, 'slide_up1', 200, 0) //延时展现容器2,做到瀑布流的效果,见上面预览图 setTimeout { this.app.slideupshow(this, 'slide_up2', 200, 0) }.bind; }

缓动动画封装

( 缺陷:只能水平方向!随后的“封装运动框架单个属性会进一步改进”)

图片 5

封装函数动画.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            opacity: 0.3;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,200);
    }
    btn400.onclick = function() {
        animate(box,400);
    }
// 封装
    function animate(obj,target){  //  第一个参数 动谁   第二个参数  动多少
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
              // 计算步长   动画的原理    盒子本身的位置     步长
              var step = (target - obj.offsetLeft) / 10;  // 步长
              step =  step > 0 ? Math.ceil(step) : Math.floor(step);  //  取整步长
              // obj.style.left = 盒子本身的位置     步长
              obj.style.left = obj.offsetLeft   step   "px";
              if(obj.offsetLeft == target){
                  clearInterval(obj.timer);
              }
        },30)
    }

</script>

以上所述是小编给大家介绍的微信小程序实现元素渐入渐出动画效果封装方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

js 常用 访问 CSS 属性

我们访问得到css 属性,比较常用的有两种:

1. 利用点语法
   box.style.width      box.style.top    

点语法可以得到 width 属性 和 top属性 ** 带有单位的。 100px
但是这个语法有非常大的
缺陷**, 不变的。
后面的width 和 top 没有办法传递参数的。
var w = width;
box.style.w

2. 利用 [] 访问属性
  语法格式:  box.style[“width”]   

元素.style[“属性”];
attr 即代表属性

      console.log(box.style["left"]);

最大的优点 : 可以给属性传递参数

访问CSS属性的源码:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            left: 10px;
            position: absolute;
            top: 20px;
        }
    </style>
</head>
<body>
<div id="box" style="left:30px;width: 100px;height: 100px;"></div>
</body>
</html>
<script>
    var box =document.getElementById("box");
    console.log(box.style.left);
    console.log(box.style["left"]);
    function fn(attr){
        console.log(box.style[attr]);
    }
    fn("height");
    fn("width");
</script>

得到css 样式

我们想要获得css 的样式, box.style.left 和 box.style.backgorundColor
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办?
核心: 我们怎么才能得到内嵌或者外链的样式呢?

  1. obj.currentStyle ie opera 常用

外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)

2 .window.getComputedStyle("元素", "伪类") w3c

两个选项是必须的, 没有伪类 用 null 替代

得到CSS样式源码 ie和opera 和w3c
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 200px;
            background-color: pink;
            left: 10px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    console.log(demo.style.left);  // 得到的是空值   只能取行内
    //console.log(demo.currentStyle.left);  // ie这么写
    console.log(window.getComputedStyle(demo,null).left);
</script>

3 兼容写法 :

我们这个元素里面的属性很多, left top width ===
我们想要某个属性, 就应该 返回该属性,所有继续封装返回当前样式的 函数。

得到css 样式兼容性写法:返回当前样式的函数★★★★★

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 200px;
            position: absolute;
            top: 10px;
            left: 20px;
            background-color: pink;
            z-index: 2;
            opacity:  0.4;
        }
    </style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }

    console.log(getStyle(demo,"width"));
</script>

封装运动框架基本函数(单个属性)★★★★★

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>

    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
       animate(box,"left",500);
    }
    btn400.onclick = function() {
        animate(box,"top",400);
    }
    // 封装单个属性的运动框架
    function animate(obj,attr,target)  {  // 给谁    什么属性   改为多少
         clearInterval(obj.timer);
         obj.timer = setInterval(function() {
             //计算步长   动画的原理      盒子本身的样式    步长
             //我们怎么知道我们当前的样式
            // 先得到 当前的样式,然后 用 target 减去 就可以  除以 10  计算步长
             var current = parseInt(getStyle(obj,attr));  // 得到当前的样式 别忘乐去掉px
             var step = ( target -current ) / 10;
             step = step > 0 ? Math.ceil(step) : Math.floor(step);
             // 要做动画了
             //obj.style.left =  obj.offsetLeft   step   "px";
             obj.style[attr] =  current    step   "px";
             if(current == target )
             {
                 clearInterval(obj.timer);
             }
             //console.log(current);
         } ,30)
    }


    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>

JSON 遍历

for in 关键字
for ( 变量 in 对象)
{ 执行语句; }

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var arr = [1,3,5,7,9];
    console.log(arr[3]);
    for(var i = 0; i< arr.length;i  )  // 遍历数组
    {
        console.log(arr[i]);
    }
    var json = {width:200,height:300,left:50}
    console.log(json.width);
    for(var k in json)
    {
        console.log(k);   // k 遍历的是json  可以得到的是  属性
        console.log(json[k]);  // json[k]  得到 是属性的  值
    }

</script>
</body>
</html>

千万要记得 每个 的意思 : 那是相当重要

k 是 属性
json[k] 得到的是属性值

封装运动框架基本函数(多个属性)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 50px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,{width: 200, top: 800,left: 200});
    }
    btn400.onclick = function() {
        animate(box,{top:500});
    }
    // 多个属性运动框架
    function animate(obj,json) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            //开始遍历 json
            for(var attr in json){   // attr  属性     json[attr]  值
                // 计算步长        用 target 位置 减去当前的位置  除以 10
               // console.log(attr);
                var current = parseInt(getStyle(obj,attr));  // 数值
               // console.log(current);
                 // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current    step   "px" ;
            }
        },30)
    }
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>

封装运动框架基本函数(添加停止定时器)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 50px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,{width: 200, top: 800,left: 200});
    }
    btn400.onclick = function() {
        animate(box,{top:500});
    }
    // 多个属性运动框架
    function animate(obj,json) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            //开始遍历 json
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                // 计算步长        用 target 位置 减去当前的位置  除以 10
               // console.log(attr);
                var current = parseInt(getStyle(obj,attr));  // 数值
               // console.log(current);
                 // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current    step   "px" ;
                console.log(current);
                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
            }



        },30)
    }
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>    

flag在js中一般作为开关,进行判断。

回调函数

等动画执行完毕再去执行的函数回调函数
我们怎么知道动画就执行完毕了呢?
很简单当定时器停止了。 动画就结束了

图片 6

完整源码:
<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style>
       div {
           width: 100px;
           height: 100px;
           background-color: pink;
           position: absolute;
           left: 0;
           top: 50px;
           border-radius: 50%;
       }
   </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
   var btn200 = document.getElementById("btn200");
   var btn400 = document.getElementById("btn400");
   var box = document.getElementById("box");
   btn200.onclick = function() {
       animate(box,{width: 200, top: 800,left: 200},function(){alert("我来了")});
   }
   btn400.onclick = function() {
       animate(box,{top:500});
   }
   // 多个属性运动框架  添加回调函数
   function animate(obj,json,fn) {  // 给谁    json
       clearInterval(obj.timer);
       obj.timer = setInterval(function() {
           var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
           for(var attr in json){   // attr  属性     json[attr]  值
               //开始遍历 json
               // 计算步长    用 target 位置 减去当前的位置  除以 10
              // console.log(attr);
               var current = parseInt(getStyle(obj,attr));  // 数值
              // console.log(current);
                // 目标位置就是  属性值
               var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
               step = step > 0 ? Math.ceil(step) : Math.floor(step);
               obj.style[attr] = current    step   "px" ;
               console.log(current);
               if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
               {
                   flag =  false;
               }
           }
           if(flag)  // 用于判断定时器的条件
           {
               clearInterval(obj.timer);
               //alert("ok了");
               if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
               {
                   fn(); // 函数名    ()  调用函数  执行函数
               }
           }
       },30)
   }
   function getStyle(obj,attr) {  //  谁的      那个属性
       if(obj.currentStyle)  // ie 等
       {
           return obj.currentStyle[attr];  // 返回传递过来的某个属性
       }
       else
       {
           return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
       }
   }
</script>
案例:仿照360开机效果

图片 7

仿360开机效果.gif

案例源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 322px;
            position: fixed;
            bottom:0;
            right:0;
        }
        span{
            position: absolute;
            top:0;
            right:0;
            width:30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box" id="box">

    <div class="hd" id="t">
        [站外图片上传中……(1)]
    </div>
    <div class="bd" id="b">
        [站外图片上传中……(2)]
    </div>
</div>
</body>
</html>
<script>
    var b = document.getElementById('b');
    var closeAd = document.getElementsByTagName("span")[0];
    closeAd.onclick = function() {
        animate(b,{height: 0},function(){
            animate(b.parentNode,{width:0});
        });
    }


    // 多个属性运动框架
    function animate(obj,json,fn) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            //开始遍历 json
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                // 计算步长        用 target 位置 减去当前的位置  除以 10
                // console.log(attr);
                var current = parseInt(getStyle(obj,attr));  // 数值
                // console.log(current);
                // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current    step   "px" ;
                console.log(current);
                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
                if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
                {
                    fn(); // 函数名    ()  调用函数  执行函数
                }
            }
        },30)
    }
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>

in 运算符

in运算符也是一个二元运算符,但是对运算符左右两个操作数的要求比较严格。in运算符要求第1个(左边的)操作数必须是字符串类型或可以转换为字符串类型的其他类型,而第2个(右边的)操作数必须是数组或对象。只有第1个操作数的值是第2个操作数的属性名,才会返回true,否则返回false

// in 可以用用来判断 json 里面有没有某个属性

案例源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    var json = {name: "刘德华",age : 55};
    // in 可以用用来判断 json 里面有没有某个属性
    if("andy" in json)
    {
        console.log("yes");  // 返回的是 yes
    }
    else
    {
        console.log("no");
    }
</script>

封装运动框架基本函数 (添加透明度和zindex)★★★★★

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 50px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");
    btn200.onclick = function() {
        animate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert("我来了")});
    }
    btn400.onclick = function() {
        animate(box,{top:500});
    }
    // 多个属性运动框架  添加回调函数
    function animate(obj,json,fn) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                //开始遍历 json
                // 计算步长    用 target 位置 减去当前的位置  除以 10
               // console.log(attr);
                var current = 0;
                if(attr == "opacity")
                {
                    current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                    console.log(current);
                }
                else
                {
                    current = parseInt(getStyle(obj,attr)); // 数值
                }
               // console.log(current);
                 // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //判断透明度
                if(attr == "opacity")  // 判断用户有没有输入 opacity
                {
                     if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                     {
                         // obj.style.opacity
                         obj.style.opacity = (current   step) /100;
                     }
                    else
                     {  // obj.style.filter = alpha(opacity = 30)
                         obj.style.filter = "alpha(opacity = " (current   step)* 10 ")";

                     }
                }
                else if(attr == "zIndex")
                {
                    obj.style.zIndex = json[attr];
                }
                else
                {
                    obj.style[attr] = current    step   "px" ;
                }

                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
                if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
                {
                    fn(); // 函数名    ()  调用函数  执行函数 暂且这样替代
                }
            }
        },30)
    }
    function getStyle(obj,attr) {  //  谁的      那个属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }
</script>

(依据距离封装完成)★★★★★★★★★★【重点】以上源码下面部分直接存为animate.js使用

function animate(obj,json,fn) {  // 给谁    json
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
        for(var attr in json){   // attr  属性     json[attr]  值
            //开始遍历 json
            // 计算步长    用 target 位置 减去当前的位置  除以 10
            // console.log(attr);
            var current = 0;
            if(attr == "opacity")
            {
                current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                console.log(current);
            }
            else
            {
                current = parseInt(getStyle(obj,attr)); // 数值
            }
            // console.log(current);
            // 目标位置就是  属性值
            var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //判断透明度
            if(attr == "opacity")  // 判断用户有没有输入 opacity
            {
                if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                {
                    // obj.style.opacity
                    obj.style.opacity = (current   step) /100;
                }
                else
                {  // obj.style.filter = alpha(opacity = 30)
                    obj.style.filter = "alpha(opacity = " (current   step)* 10 ")";

                }
            }
            else if(attr == "zIndex")
            {
                obj.style.zIndex = json[attr];
            }
            else
            {
                obj.style[attr] = current    step   "px" ;
            }

            if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
            {
                flag =  false;
            }
        }
        if(flag)  // 用于判断定时器的条件
        {
            clearInterval(obj.timer);
            //alert("ok了");
            if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
            {
                fn(); // 函数名    ()  调用函数  执行函数
            }
        }
    },30)
}
function getStyle(obj,attr) {  //  谁的      那个属性
    if(obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回传递过来的某个属性
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
    }
}
今日仿照360图片素材获取:

链接:http://pan.baidu.com/s/1miEvqoo 密码:7fv8

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:原生JS实现动漫函数的卷入,前端根基