之前工作项目中，运用了缓动动画的效果，在网上看到其他大牛写的相关公式，结合工作需要，进行了整理，拿出来跟大家分享下，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. hdu 2955 Robberies 背包DP

    Robberies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. BZOJ 4013 实验比较

    Description 小D被邀请到实验室,做一个跟图片质量评价相关的主观实验.实验用到的图片集一共有\(N\)张图片,编号为\(1\)到\(N\).实验分若干轮进行,在每轮实验中,小\(D\)会被要 ...

  3. 【测试】解决loadrunner11无法运行负载测试

    问题: LoadRunner11版,录制完脚本,准备运行时提示‘ loadrunner controller 无法创建 vuser 确保您的 load generator ’, 脚本已经录好,但是运行 ...

  4. websocket nodejs实例

    http://blog.sina.com.cn/s/blog_49cc837a0101aljs.html http://blog.sina.com.cn/s/blog_49cc837a0101a2q3 ...

  5. PHP 之 Laravel 框架安装及相关开源软件

    Laravel 被称为简洁.优雅的PHP开发框架,但第一次接触此框架的人有不少都卡在了安装上,其实在 Linux 下只需要很简单的几步就可以搞定,这里我们以 CentOS 下 PHP + Nginx ...

  6. C API向MySQL插入批量数据的快速方法——关于mysql_autocommit

    MySQL默认的数据提交操作模式是自动提交模式(autocommit).这就表示除非显式地开始一个事务,否则每个查询都被当做一个单独的事务自动执行.我们可以通过设置autocommit的值改变是否是自 ...

  7. MySQL的if，case语句

    IF表达式 IF(expr1,expr2,expr3) 如果 expr1 是TRUE (expr1 <> 0 and expr1 <> NULL),则 IF()的返回值为exp ...

  8. ☀【组件 - 工具】Parallax 视差

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 【转】Eclipse中设置ButterKnife进行注解式开发步骤 -- 不错

    原文网址:http://www.bubuko.com/infodetail-974262.html 最近在进行Android注解式开发的学习,正在尝试用ButterKnife.ButterKnife的 ...

  10. 【转】unity3d 如何得到当前物体播放的动画

    原文:http://blog.csdn.net/smilelance/article/details/22285125 public static string GetCurrentPlayingAn ...