之前工作项目中，运用了缓动动画的效果，在网上看到其他大牛写的相关公式，结合工作需要，进行了整理，拿出来跟大家分享下，js代码中，只运用了一个小功能进行了测试

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>测试</title>

</head>

<body>

    <div class="main">

        <div class="scroll">

            <div class="info">

                <ul id="scro">

                    <li>

                        <a href="">

                            <span>1</span>

                            <span></span>

                            <span></span>

                            <span></span>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

　　　　<input type="text" id="orderIndex"><button onclick="start()">测试</button>

    </div>

</body>

</html>
*{margin: auto;padding:;}

.main{width: 300px;height: 400px;overflow: hidden;float: left;}

.info ul{position: relative;}

.info ul li{height: 72px;background-color: #444444;list-style: none;border: 1px solid #303030;}

.info ul li a{height: 72px;line-height: 72px;padding-left: 15px;position: relative;display: block;text-decoration: none;}

.info ul li a span{color: #fff;font-size:18px;font-weight:normal;float: left;height: 72px;line-height: 72px;margin-right: 10px;}

.info ul li a .num{width: 25px;}

.info ul li a .photo{width: 70px;}

.info ul li a .photo img{margin-top: 11px;width: 50px;height: 50px;}

.info ul li a .name{width: 50px;}

.info ul li a .num2{float: right;margin-right: 20px;}

.info ul li a div{position: absolute;background-color: #06a7e1;float: left;left: 0px;height: 72px;width: 2px;}

.panel{float: left;background-color: red;width: 15px;height: 370px;}

.panel_scroll{width: 100%;height: 30px;background-color: #000;position: relative;}
var i=0;

var str = "";

for(;i<5;i++){

    str += '<li id="testLi'+(i+1)+'"><a href=""><span class="num">'+(i+1)+'</span><span class="photo"><img src="https://images0.cnblogs.com/blog/663787/201410/291050344726094.jpg"></span><span class="name">文字</span><span class="num2">1000</span></a></li>';

}

document.getElementById("scro").innerHTML = str;

/*

 * 动画效果

 */

function Cartoon(time, count, alg, callback) {

    this.time = time || 1000;

    this.count = count || 100;

    var alg = typeof (alg) == "string" ? alg : "";

    if (/^(uniform|acc|dec|accdec|arc-acc|arc-dec|arc-accdec)$/i.test(alg)) this.alg = alg.toLowerCase();

    else this.alg = "arc-dec";

    this.callback = callback;

    this.timer = null;

};

/*

 * @param {number} time 执行时间，并不是完全等于设置的时间，不用浏览器效果可能不同，需要配合count调节，缺省1000

 * @param {number} count 变化的次数，缺省100

 * @param {string} alg 运动类型，缺省arc-dec

 * @param {string} uniform 匀速

 * @param {string} acc 匀加速

 * @param {string} dec 圆弧加速

 * @param {string} accdec 匀加速

 * @param {string} arc-acc 圆弧减速

 * @param {string} arc-dec 先匀加速后匀减速

 * @param {string} arc-accdec 圆弧先加速后减速

 */

Cartoon.prototype = {

    run: function (callback, onStop) {//控制执行时机

        var self = this;

        var count = 1;

        this.timer = setInterval(function () {

            if (count > self.count) {

                self.stop();

                if (typeof (onStop) == "function") onStop();

            } else {

                switch (self.alg) {

                case "uniform":

                    callback(count / self.count);

                    break;

                case "acc":

                    var s = 0.002 * 0.5 * (count / self.count * 1000) * (count / self.count * 1000);

                    callback(s / 1000);

                    break;

                case "dec":

                    var s = 2 * (count / self.count * 1000) - 0.002 * 0.5 * (count / self.count * 1000) * (count / self.count * 1000);

                    callback(s / 1000);

                    break;

                case "accdec":

                    var t = (count / self.count * 1000);

                    if (t < 500) {

                        var s = 0.5 * 0.004 * t * t;

                    } else {

                        t -= 500;

                        var s = 500 + 2 * t - 0.004 * 0.5 * t * t;

                    };

                    callback(s / 1000);

                    break;

                case "arc-acc":

                    var x = count / self.count * 1000;

                    var y = 1000 - Math.pow(1000000 - x * x, 0.5);

                    callback(y / 1000);

                    break;

                case "arc-dec":

                    var x = 1000 - count / self.count * 1000;

                    var y = Math.pow(1000000 - x * x, 0.5);

                    callback(y / 1000);

                    break;

                case "arc-accdec":

                    var x = (count / self.count * 1000);

                    if (x < 500) {

                        var y = 500 - (Math.pow(250000 - x * x, 0.5));

                    } else {

                        x = 1000 - x;

                        var y = 500 + Math.pow(250000 - x * x, 0.5);

                    };

                    callback(y / 1000);

                    break;

                default:

                    break;

                };

                count += 1;

            }

        }, parseInt(this.time / this.count) == 0 ? 1 : parseInt(this.time / this.count));

        return this;

    },

    stop: function () {//停止动画

        clearInterval(this.timer);

        if (typeof (this.callback) == "function") this.callback();

        return this;

    },

    init:function(fn){//位置初始化

        var self = this;

        this.stop();

        console.log("123123");

        fn();

    }

};

/*

 * 在相应位置执行遮罩层的自左至右的运动

 */

function start(){
　　var order = document.getElementById("orderIndex").value;

    var C = new Cartoon(500,100,"arc-dec");//初始化盲选动画效果，定义执行时间

    C.eleList = document.getElementById("scro");

    C.eleList.style.position = "relative";

    C.el = document.getElementById("testLi"+order);

    C.elA = C.el.getElementsByTagName("a")[0];

    C.newDom = document.createElement("div");

    C.dom = C.elA.appendChild(C.newDom);

    C.run(function(x){C.dom.style.width = (( 330 - 120 )*x+120)+"px";},

        function(){

            C.run(function(x){

                    C.dom.style.width = (330-330*x+120)+"px";

                    C.dom.style.left = (( 330 - 120 )*x)+"px";

                },

                function(){

                    setTimeout(function(){

                        C.init(function(){C.dom.style.left = 210 + "px";C.dom.style.width = 120 + "px";});

                        C.run(function(x){C.dom.style.left = (120*x+210)+"px";},

                            function(){

                                C.elA.removeChild(C.dom);

                            }

                        );

                    },300);

                }

            );

        }

    );

}

javascript动画效果的更多相关文章

  1. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  2. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  3. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  4. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  5. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  6. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  7. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

  9. javascript动画效果之任意效果任意值

    通过学习,我发现当同一个ul下的li标签如果想要不同的效果,那怎么办? 比如第一个li是width变化,第二个li为透明度(opacity)变化,而opacity的值和width的值类型不同,不能通用 ...

随机推荐

  1. C/C++中的内存对齐 C/C++中的内存对齐

    一.什么是内存对齐.为什么需要内存对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特 定的内存地址 ...

  2. 提升 DevOps 效率，试试 ChatOps 吧！

    本文翻译自文章 To Boost DevOps, Try ChatOps,文中用简单易懂的方式介绍了 ChatOps 的发展和价值,由 OneAPM 工程师编译整理. 当我们谈论 DevOps 时,总 ...

  3. Werkzeug教程

    http://chaoxz2005.blog.163.com/blog/static/15036542012863405266/ http://www.dajo.com.cn/a/boke/pytho ...

  4. 向Python女神推荐这些年我追过的经典书籍

    http://blog.csdn.net/yueguanghaidao/article/details/10416867 最近"瑞丽模特学Python"的热点牵动了大江南北程序员的 ...

  5. Alternating Current

    Codeforces Round #200 (Div. 1) B:http://codeforces.com/problemset/problem/343/B 题意:这一题看懂题意是关键,题目的意思就 ...

  6. 14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小

    14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小 改变 InnoDB ...

  7. 最大流算法---Edmond-Karp

    这个算法是基于FF方法,就是通过不断求残余网络的增广路来增广流量,直到找不到增广路为止.注意:每次找到增广路以后都要更新原网络.EK算法通过BFS寻找源S到汇T的一条最短路径,因此时间复杂度是O(VE ...

  8. MessageFormat.format处理单引号和大括号

    在MessageFormat.format方法中组装jason数据字符串:{code:"w1",des:"w2"},起止分别有左大括号和右大括号.方法是将单引号 ...

  9. 排序算法简介及其C实现

    排序算法(Sorting Algorithm)是计算机算法的一个组成部分. 排序的目标是将一组数据 (即一个序列) 重新排列,排列后的数据符合从大到小 (或者从小到大) 的次序.这是古老但依然富有挑战 ...

  10. Postman用法简介-Http请求模拟工具

    在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具,现在流行的这种工具也挺多的,像火狐浏览器插件 ...