好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

原生Javascript动画运动框架分享

下载链接: https://pan.baidu.com/s/1eSgHA50 密码: 2djq

框架简介

首先推荐使用css动画,更顺滑,性能更好。

本框架用于实验和获取特殊运动形式,并能更好兼容各种老旧的浏览器。


本框架完全采用原生javascript,具有完美的兼容性,可生成多种运动动画效果:

 * 缓冲运动:速度和距离成反比,距离越远,速度越慢;

 * 加速运动:速度从0开始,不断加1,越来越快;

 * 减速运动:速度从某个值开始,不断减1,越来越慢;

 * 弹性运动:速度随距离不断摆荡,可为正负,最后停在目标位置;

 * 拖拽碰撞重力摩擦运动:通过拖拽将目标拖拽到指定位置,放开后根据拖拽的快慢获取初始速度,在目标位置上下左右某个距离边界的位置碰撞摩擦,最后停在下边界的某个位置;

 * 震荡运动:值在某一个范围内抖动,震荡距离不断减小,最后恢复初始值。

框架内容-函数:jsAnimate(type, obj, data, originSpeed, fn)

函数说明:

 本函数包含运动框架:

     * 缓冲运动:速度和距离成反比,距离越远,速度越慢

     * 加速运动:速度从0开始,不断加1,越来越快

     * 减速运动:速度从某个值开始,不断减1,越来越慢

     * 弹性运动:速度随距离不断摆荡,可为正负,最后停在目标位置

参数解析:

     * type:字符串参数,表示运动的类型:'ease'-缓冲运动,'add'-加速运动,'minus'-减速运动,'elastic'-弹性运动

     * obj:对象参数,表示运动的对象

     * data:Json数据,表示运动的属性和目标值对,没有无单位,透明度转换为整数即x100

     * originSpeed:整数参数,表示运动初始速度

     * fn:函数直接量参数,表示运动结束后的回调函数

框架内容-函数:jsAnimateDragImpact(obj, boundary, fn)

函数说明:

 本函数包含运动框架:

     * 拖拽碰撞重力摩擦运动:通过拖拽将目标拖拽到指定位置,放开后根据拖拽的快慢获取初始速度,在目标位置上下左右某个距离边界的位置碰撞摩擦,最后停在下边界的某个位置。

参数解析:

     * obj:对象参数,表示运动的对象

     * boundary:Json数据,表示运动边界,Json数据,为距离,如top:100,表示可往上100px的距离:

                        top:上边界,right:右边界,bottom:下边界, left:左边界

                        {}空对象表示以窗口为边界,超过也会自动以窗口为边界

     * fn:函数直接量参数,表示运动结束后的回调函数

框架内容-函数:jsAnimateDragImpact(obj, boundary, fn)

函数说明:

 本函数包含运动框架:

     * 拖拽碰撞重力摩擦运动:通过拖拽将目标拖拽到指定位置,放开后根据拖拽的快慢获取初始速度,在目标位置上下左右某个距离边界的位置碰撞摩擦,最后停在下边界的某个位置。

参数解析:

     * obj:对象参数,表示运动的对象

     * boundary:表示运动边界,Json数据,为距离,如top:100,表示可往上100px的距离:

                        top:上边界,right:右边界,bottom:下边界, left:左边界

                        {}空对象表示以窗口为边界,超过也会自动以窗口为边界

     * fn:函数直接量参数,表示运动结束后的回调函数

框架内容-函数:jsShake(obj, data, fn)

函数说明:

 本函数包含运动框架:

     * 抖动震荡运动:某个属性值在某个范围内不断抖动,抖动范围不断减小,最后恢复初始值。

参数解析:

     * obj:对象参数,表示抖动的对象

     * data:Json数据,抖动的属性和相应范围,格式:

                {attr:{target:数值,stepValue:数值},attr:{target:数值,stepValue:数值}...}

                attr:属性名称,字符串;target:最大震荡范围,数值;stepValue:每震荡一次减小的数值,数值

     * fn:函数直接量参数,表示运动结束后的回调函数

使用例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>迷津渡口分享-javascript动画运动框架用例</title>
<style type="text/css">
    div {width:100px;height:100px;background:red;position: absolute;left:20px;}
    #div1 {top:100px;}
    #div2 {top:300px;}
    #div3 {top:500px;}
    #div4 {top:700px;}
</style>
<script type="text/javascript" src="http://www.qingzz.cn/content/demo/jsAnimation.js"></script>
<script type="text/javascript">
window.onload = function() {
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oBtn3 = document.getElementById('btn3');

    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    var oDiv4 = document.getElementById('div4');

    // 载入完成后div1先左右摆荡然后上下摆荡
    jsShake(oDiv1,{'left':{target:20,stepValue:2}},function(){
        jsShake(this,{'top':{target:20,stepValue:2}});
    });

    // btn1控制属性增长
    oBtn1.onclick = function() {
        singleAdd();
        multiAdd();
    };
    // btn2控制属性减小
    oBtn2.onclick = function() {
        singleMinus();
        multiMinus();
    };

    // 循环增大减小
    oBtn3.onclick=function() {
    	singleLoop();
    	multiLoop();
    };

    // 开启div1的拖拽碰撞事件,有边界
    jsAnimateDragImpact(oDiv1,{top:100,right:100,bottom:100,left:100},function() {
        console.log('自定义边界拖拽碰撞运动完成!');
    });

    // 开启div4的拖拽碰撞事件,无边界
    jsAnimateDragImpact(oDiv4, {}, function() {
        console.log('拖拽碰撞运动完成!');
    });


// div2单属性宽度不同运动增长
function singleAdd(fn){
    jsAnimate('ease',oDiv2,{width:300},0,function(){
        console.log('单属性增长缓冲运动完成!');
        jsAnimate('add',this,{width:500},0,function(){
            console.log('单属性增长加速运动完成!');
            jsAnimate('minus',this,{width:700},20,function(){
                console.log('单属性增长减速运动完成!');
                jsAnimate('elastic',this,{width:900},0,function(){
                    console.log('单属性增长弹性运动完成!');
                    if (fn) fn.call(this);
                });
            });
        });
    });
}

// div2单属性宽度不同运动减小
function singleMinus(fn){
    jsAnimate('elastic',oDiv2,{width:700},0,function(){
        console.log('单属性减小弹性运动完成!');
        jsAnimate('minus',this,{width:500},20,function(){
            console.log('单属性减小减速运动完成');
            jsAnimate('add',this,{width:300},0,function(){
                console.log('单属性减小加速运动完成');
                jsAnimate('elastic',this,{width:100},0,function(){
                    console.log('单属性减小缓冲运动完成');
                    if (fn) fn.call(this);
                });
            });
        });
    });
}

// div2单属性宽度循环运动
function singleLoop() {
	singleAdd(function() {singleMinus(singleLoop);});
}

// div3多属性宽度和左边距不同运动增长
function multiAdd(fn){
    jsAnimate('ease',oDiv3,{width:300,left:200},0,function(){
        console.log('多属性增长缓冲运动完成!');
        jsAnimate('add',this,{width:500,left:300},0,function(){
            console.log('多属性增长加速运动完成!');
            jsAnimate('minus',this,{width:700,left:400},20,function(){
                console.log('多属性增长减速运动完成!');
                jsAnimate('elastic',this,{width:900,left:500},0,function(){
                    console.log('多属性增长弹性运动完成!');
                    if (fn) fn.call(this);
                });
            });
        });
    });
}

// div3多属性宽度和左边距不同运动减小
function multiMinus(fn){
    jsAnimate('elastic',oDiv3,{width:700,left:400},0,function(){
        console.log('多属性减小弹性运动完成!');
        jsAnimate('minus',this,{width:500,left:300},20,function(){
            console.log('多属性减小减速运动完成');
            jsAnimate('add',this,{width:300,left:100},0,function(){
                console.log('多属性减小加速运动完成');
                jsAnimate('elastic',this,{width:100,left:20},0,function(){
                    console.log('多属性减小缓冲运动完成');
                    if (fn) fn.call(this);
                });
            });
        });
    });
}
// div3多属性宽度和左边距循环运动
function multiLoop() {
	multiAdd(function() {multiMinus(multiLoop);});
}

};


</script>
</head>
<body>
    <button id="btn1">开始增长</button>
    <button id="btn2">开始减小</button>
    <button id="btn3">循环运动</button>

    <div id="div1">载入时震荡,可拖拽,边界都为100</div>
    <div id="div2">单属性宽变化</div>
    <div id="div3">多属性宽和左边距变化</div>
    <div id="div4">可拖拽,边界为窗口,为兼容,同时仅可拖拽一个</div>
</body>
</html>

小指才疏学浅,有任何疏漏之处,欢迎不吝赐教~

点赞5
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘