之前工作项目中，运用了缓动动画的效果，在网上看到其他大牛写的相关公式，结合工作需要，进行了整理，拿出来跟大家分享下，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. [BZOJ 2127] happiness 【最小割】

    题目链接:BZOJ - 2127 题目分析 首先,每个人要么学文科,要么学理科,所以可以想到是一个最小割模型. 我们就确定一个人如果和 S 相连就是学文,如果和 T 相连就是学理. 那么我们再来确定建 ...

  2. Solr总结

    http://www.cnblogs.com/guozk/p/3498831.html Solr调研总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍solr的功能使用及相关注 ...

  3. .config-20150410

    ## Automatically generated file; DO NOT EDIT.# OpenWrt Configuration#CONFIG_MODULES=yCONFIG_HAVE_DOT ...

  4. 许令波老师的java的IO机制分析文章

    深入分析 Java I/O 的工作机制 I/O 问题可以说是当今互联网 Web 应用中所面临的主要问题之一,因为当前在这个海量数据时代,数据在网络中随处流动.这个流动的过程中都涉及到 I/O 问题,可 ...

  5. 简单的javascript例子

    <html> <head> <title>hongmaju</title> <link rel="shortcut icon" ...

  6. 配置Myeclipse中的项目部署到服务器，报the selected server is enabled, but is not configured properly.

    the selected server is enabled, but is not configured properly. deployment to it will not be permitt ...

  7. gcc编译器参数使用及解决

    gcc -c CStringAndPointer.c -o CStringAndPointer.o 执行时出现问题: ./CStringAndPointer.o bash: ./CStringAndP ...

  8. poj 2975 Nim（博弈）

    Nim Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5232   Accepted: 2444 Description N ...

  9. 怎么把GPUImageFIlter处理过的图像保存成UIImage

    总共有两种方法能够把GPUImage处理过的图片转化成UIImage 方法一:     UIImage *inputImage = [UIImage imageNamed:@"Lambeau ...

  10. 解压华为P6 UPDATE.APP

    #!/usr/bin/env python # Version: 0.2.201308040830 # Author: linkscue # Function: unpack any hauwei h ...