之前工作项目中，运用了缓动动画的效果，在网上看到其他大牛写的相关公式，结合工作需要，进行了整理，拿出来跟大家分享下，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 2226: [Spoj 5971] LCMSum 数论

    2226: [Spoj 5971] LCMSum Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 578  Solved: 259[Submit][St ...

  2. Two-phase Termination模式

    停止线程是一个目标简单而实现却不那么简单的任务.首先,Java没有提供直接的API用于停止线程.此外,停止线程时还有一些额外的细节需要考虑,如待停止的线程处于阻塞(等待锁)或者等待状态(等待其它线程) ...

  3. Unity 截取图片并且显示出来

    Unity 截取图片并且显示出来 近期用到了unity的截图,并且把他显示出来,摸索了很多! 讲解一个东西,android可以存储一些文件在本地,比如配置文件等! 对于不同的系统,方法不一! if ( ...

  4. Android 如何自定义EditText 下划线？

    项目要求: 笔者曾经做过一个项目,其中登录界面的交互令人印象深刻.交互设计师给出了一个非常作的设计,要求做出包含根据情况可变色的下划线,左侧有可变图标,右侧有可变删除标志的输入框,如图 记录制作过程: ...

  5. 【POJ3691】 DNA repair （AC自动机+DP）

    DNA repair Time Limit: 2000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Description B ...

  6. JqueryUI 为什么TypeError: $(...).slides is not a function

    单独写一个html发现一切没有问题,但放在自己的网页中作为一部分却出现了问题,最后发现是那些js文件引入顺序出现了问题,

  7. Tomcat默认打开项目设置

    Tomcat设置默认启动项目 Tomcat设置默认启动项目,顾名思义,就是让可以在浏览器的地址栏中输入ip:8080,就能访问到我们的项目.具体操作如下: 1.打开tomcat的安装根目录,找到Tom ...

  8. Reverse Linked List 递归非递归实现

    单链表反转--递归非递归实现 Java接口: ListNode reverseList(ListNode head) 非递归的实现 有2种,参考 头结点插入法 就地反转 递归的实现 1) Divide ...

  9. ASP.NET MVC 后台接收集合参数和 jquery ajax 传值

    MVC 接收参数数组(集合)   示例样本:   public class Person {      public string FirstName { get; set; }      publi ...

  10. Robot Framework安装

    Robot Framework(中文站/社交化知识社区,源码)是一款Python编写的通用开源功能测试自动化框架,以作验收测试和验收测试驱动开发(ATDD),它是一种使用表格测试数据语法的关键字驱动的 ...