1、opacity问题：IE678支持filter: alpha(opacity=50)取值1-100；小数位容易精度丢失，所i有统一json字符串设置为百进制，赋值时除以100

2、zIndex问题：层级不需要徐徐渐进值的递增或者递减，而是一下赋值到目标值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            position: absolute;

            top: 40px;

            left: 0px;

            width: 100px;

            height: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

<button>运动到400</button>

<div></div>

<script>

    //原来的缓动框架在个别属性的获取上是有问题的

    //opacity：最好是百分制

    //zIndex：

    var btnArr = document.getElementsByTagName("button");

    var div = document.getElementsByTagName("div")[0];

    console.log(getStyle(div, "opacity") || 100);

    btnArr[0].onclick = function () {

        var json1 = {"left": 300, "top": 200, "width": 300, "height": 200, "opacity": 30, "zIndex": 1};

        var json2 = {"left": 0, "top": 40, "width": 100, "height": 100, "opacity": 100, "zIndex": 2};

        animate(div, json1, function () {

            animate(div, json2);

        });

    }

    //参数变为2个，将属性atrr和值都存储到json中

    function animate(ele, json, fn) {

        //先清定时器

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            //开闭原则

            var bool = true;

            //遍历属性和值，分别单独处理json

            //attr == k(键)    target == json[k](值)

            for (var k in json) {

                //四部

                var leader;

                //判断如果属性为opacity的时候特殊获取值

                if (k === "opacity") {

                    leader = getStyle(ele, k) * 100 || 100;

                } else {

                    leader = parseInt(getStyle(ele, k)) || 0;

                }

                //1.获取步长

                var step = (json[k] - leader) / 10;

                //2.二次加工步长

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                leader = leader + step;

                //3.赋值

                //ele.style[k] = leader + "px";

                //特殊情况特殊赋值

                if (k === "opacity") {

                    ele.style[k] = leader / 100;

                    //兼容IE678

                    ele.style.filter = "alpha(opacity=" + leader + ")";

                    //如果是层级，一次行赋值成功，不需要缓动赋值

                    //为什么？需求！

                } else if (k === "zIndex") {

                    ele.style.zIndex = json[k];

                } else {

                    ele.style[k] = leader + "px";

                }

                //4.清除定时器

                //判断: 目标值和当前值的差大于步长，就不能跳出循环

                //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

                // if (json[k] !== leader) {

                //     bool = false;

                // }

                if (Math.abs(json[k] - leader) > Math.abs(step)) {

                    bool = false;

                }

            }

            console.log(1);

            //只有所有的属性都到了指定位置，bool值才不会变成false；

            if (bool) {

                for (k in json) {

                    if (k === "opacity") {

                        ele.style[k] = json[k] / 100;

                        ele.style.filter = "alpha(opacity=" + leader + ")";//兼容IE678

                    } else if (k === "zIndex") {

                        ele.style.zIndex = json[k];

                    } else {

                        ele.style[k] = json[k] + "px";

                    }

                }

                clearInterval(ele.timer);

                //所有程序执行完毕之后执行回调函数

                //现在只有传递了回调函数，才能执行

                if (fn) {

                    fn();

                }

            }

        }, 25);

    }

    //兼容方法获取元素样式

    function getStyle(ele, attr) {

        if (window.getComputedStyle) {

            return window.getComputedStyle(ele, null)[attr];

        }

        return ele.currentStyle[attr];

    }

</script>

</body>

</html>

JS——缓动框架的问题的更多相关文章

  1. JS特效@缓动框架封装及应用

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...

  2. JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、

    缓动函数中opcity  写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...

  3. thwen 缓动框架

    描述 目前提供一个方法 ele 元素对象 obj 操作 duration 时间 effect 缓动选择 thwenMove(option) 框架支持以下缓动策略 -指数衰减的正弦曲线缓动 -圆形曲线的 ...

  4. tween.js缓动（补间动画）

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

  5. js缓动函数

    tween: { easeInQuad: function(pos){ return Math.pow(pos, 2); }, easeOutQuad: function(pos){ return - ...

  6. JS——缓动动画

    核心思想: (1)相对于匀速移动,盒子每次移动的步长都是变化的,公式:盒子位置=盒子本身位置+(目标位置-盒子本身位置)/10 (2)在盒子位置与目标距离小于10px时,其步长必然是小数,又由于off ...

  7. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  8. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  9. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

随机推荐

  1. 洛谷—— P2176 [USACO14FEB]路障Roadblock

    https://www.luogu.org/problem/show?pid=2176 题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一 ...

  2. Ubuntu 16.04下使用gcc输出汇编的.0文件为可执行文件时出现：`_start'被多次定义

    错误如下: `_start'被多次定义 /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o:(.text+0x0):第一次 ...

  3. Ubuntu 16.04设置开机关机时显示命令详细信息不显示进度条Logo

    1.编辑grub文件 sudo gedit /etc/default/grub 把 GRUB_CMDLINE_LINUX_DEFAULT="quiet splash" 改成 GRU ...

  4. 国际维修联合会IMA年度大会在瑞士圆满结束

    瑞士卢加诺 ☆2016年4月5日至7日 中国设备管理协会国际交流合作中心主任.学府咨询(国际)集团董事长.IMA中国分会主席李葆文教授,应邀出席了4月5日至7日在瑞士卢加诺召开的国际维修联合会年度大会 ...

  5. UIView convertRect

    CGRect newRect = [self.view.window convertRect:self.blueView.frame fromView:self.redView]; NSLog(@&q ...

  6. ScrollView中嵌套ScrollView或ListView而且内部ScrollView或ListView也可滑动

    1.ScrollView中嵌套ScrollView而且内部ScrollView也可滑动 (1)ScrollView继承类 public class InnerScrollView extends Sc ...

  7. Music information retrieval

    Music information retrieval - Wikipedia https://en.wikipedia.org/wiki/Music_information_retrieval Mu ...

  8. return在Java中的两个作用

    Java中return的两个作用:   (1)返回方法指定类型的值(这个值总是确定的),也可以是对象   (2)方法的结束

  9. bzoj2142 礼物——扩展卢卡斯定理

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2142 前几天学了扩展卢卡斯定理,今天来磕模板! 这道题式子挺好推的(连我都自己推出来了) , ...

  10. Python3基础复习

    目录 基本语法 运算符 输出格式 数据类型 数据结构 函数 面向对象 补充 异常 模块和包 文件 时间 线程和进程 基本语法 基本语法只列举与Java不一样的. 运算符 and, or而非 & ...