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

    windows dos命令 - 知识天地 - 博客园http://www.cnblogs.com/mfryf/archive/2012/02/13/2348685.html

  2. Alternating Current

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

  3. 在 ActionBar 添加刷新按钮

    在以前版本的 Gmail 应用中,ActionBar 上有个刷新菜单,点击一下刷新菜单变成一个转圈的刷新标示动画图片. 之前实现该功能的时候都是使用一个类库 RefreshActionItem来实现的 ...

  4. SQL语句 远程操作数据库

    --远程操作数据库SQL语句exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB ', '211.81.251.85 'exec sp_addlinkedsr ...

  5. 【HDOJ】1881 毕业bg

    01背包. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 1005 ty ...

  6. ECHO.js 纯javascript轻量级延迟加载

    演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...

  7. Linux学习笔记17——输入输出重定向

    1 何谓输入输出重定向? 默认情况下输入是由键盘输入的.输出是默认的输出到屏幕上.而输入输出重定向就是改变默认的输入输出方向 2 freopen函数 freopen是被包含与stdio.h头文件中,是 ...

  8. 局域网内通过UDP协议进行传输接受数据——AsyncUdpSocket

    在相同的局域网内,可以通过Udp协议进行数据的传输和接收,Udp协议与Http协议不同,Udp更加方便快捷,省去了很多步骤,但是也有很多传输问题,在局域网内小范围传输数据时Udp还是非常能够胜任的. ...

  9. Nginx + Tomcat 动静分离实现负载均衡

    0.前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 # 定义Nginx运行的用户 和 用户组 如果对 ...

  10. 炮兵阵地 - POJ 1185（状态压缩）

    分析:先枚举出来所有的合法状态(当N=10的时候合法状态最多也就60种),用当前状态匹配上一行和上上一行的状态去匹配,看是否可以.....复杂度100*60*60*60,也可以接受. 代码如下: == ...