好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

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

清空信息
关闭评论
asoseinhalb
 asoseinhalb 约 3 小时前回复
#165
<a href="http://www.soopsip.com/femminile-air-jordan-retro-7-arancia-verde-scarpej">femminile air jordan retro 7 arancia verde</a> <a href="http://www.laodikyahaber.com/air-jordan-retro-7-wei%C3%9F-greu-jade-schuhej">air jordan retro 7 wei脽 greu jade</a> <a href="http://www.dateplannerz.com/san-francisco-49ers-47-nfl-barksdale-47-mvp-cap-hath">san francisco 49ers 47 nfl barksdale 47 mvp cap</a> <a href="http://www.ultimumbaby.com/nike-huarache-high-bleu-or-chaussuresh">nike huarache high bleu or</a> <a href="http://www.cksholdings.com/nike-flyknit-lunar-ii-2-frau-orange-lila-wei%C3%9F-schuheh">nike flyknit lunar ii 2 frau orange lila wei脽</a> <a href="http://www.rosebasil.com/adidas-eqt-running-support-93-vintage-white-shoesk">adidas eqt running support 93 vintage white</a>
asoseinhalb http://www.asoseinhalb.com/
redfiveonline
 redfiveonline 约 4 小时前回复
#164
<a href="http://www.poradanomada.com/nike-free-run-4.0-maschio-caff%C3%A8-scarpej">nike free run 4.0 maschio caff猫</a> <a href="http://www.njdevsblog.com/nike-roshe-run-m%C3%A4nner-high-warm-schwarz-grau-schuhei">nike roshe run m盲nner high warm schwarz grau</a> <a href="http://www.theuonline.com/air-jordan-retro-4-sort-lilla-jade-skoh">air jordan retro 4 sort lilla jade</a> <a href="http://www.myflexijob.com/san-francisco-giants-alternate-road-jersey-nfli">san francisco giants alternate road jersey</a> <a href="http://www.myglobalsms.com/nike-air-max-90-kvinner-blomst-himmelen-bl%C3%A5-hvit-obuvk">nike air max 90 kvinner blomst himmelen bl氓 hvit</a> <a href="http://www.playunreal.com/coach-in-printed-signature-small-gold-totes-coachh">coach in printed signature small gold totes</a>
redfiveonline http://www.redfiveonline.com/
ferrago
 ferrago 约 8 小时前回复
#163
<a href="http://www.personalarrangement.net/zapatillas-nike-lunar-cross-elehombrest-scarpeb">zapatillas nike lunar cross elehombrest</a> <a href="http://www.petergeyer.net/jordan-retro-11-blanco-and-naranja-kurpese">jordan retro 11 blanco and naranja</a> <a href="http://www.phantomlite.net/air-jordan-retro-11-kvinders-himmelbl%C3%A5-mintgr%C3%B8n-scarpea">air jordan retro 11 kvinders himmelbl氓 mintgr酶n</a> <a href="http://www.philiphawley.net/nike-free-run-2-hommes-zappos-obuvb">nike free run 2 hommes zappos</a> <a href="http://www.phoneed.net/adidas-protator-absolute-a3-chaussuresd">adidas protator absolute a3</a> <a href="http://www.photodose.net/adidas-ultra-boost-nero-quarter-kurpesg">adidas ultra boost nero quarter</a>
ferrago http://www.ferrago.net/
exoticbg
 exoticbg 2019-04-25 00:08回复
#162
<a href="http://www.shrinetalk.com/reebok-z-electrify-noir-argent-kurpese">reebok z electrify noir argent</a> <a href="http://www.konyakbs.com/lebron-14-blanco-and-negro-yeezy-kurpesa">lebron 14 blanco and negro yeezy</a> <a href="http://www.cheezhayama.com/nike-air-max-2015-herren-grau-hair-chaussuresb">nike air max 2015 herren grau hair</a> <a href="http://www.eagleswingair.com/kyrie-1-rose-blanc-obuve">kyrie 1 rose blanc</a> <a href="http://www.alchemaerie.com/femminile-nike-free-run-3-nero-viola-chaussuresa">femminile nike free run 3 nero viola</a> <a href="http://www.eyecovet.com/nike-air-force-1-low-gr%C3%B8n-gr%C3%A5-butya">nike air force 1 low gr酶n gr氓</a>
exoticbg http://www.exoticbg.com/
ikioto
 ikioto 2019-04-24 10:16回复
#161
<a href="http://www.viaggivaldata.com/brixton-snapback-hats-hath">brixton snapback hats</a> <a href="http://www.sasguukr.com/nike-femmes-air-max-1-cmft-prm-tape-femmes-gris-orange-chaussuresh">nike femmes air max 1 cmft prm tape femmes gris orange</a> <a href="http://www.mobiigroups.com/nike-dunk-low-pro-sb-wei%C3%9F-schuheh">nike dunk low pro sb wei脽</a> <a href="http://www.alboths.com/white-nike-cortez-junior-shoesk">white nike cortez junior</a> <a href="http://www.woulee.com/k%C3%B8be-adidas-pr%C3%B8dator-x-skoj">k酶be adidas pr酶dator x</a> <a href="http://www.ulriksdalssk.com/nike-kd-trey-v-iii-m%C3%A4nner-lila-orange-schuheh">nike kd trey v iii m盲nner lila orange</a>
ikioto http://www.ikioto.com/
socabets
 socabets 2019-04-23 14:29回复
#160
<a href="http://www.chocopictures.com/michael-kors-large-jet-set-saffiano-tote-mkh">michael kors large jet set saffiano tote</a> <a href="http://www.baluntan.com/nike-roshe-run-menn-gr%C3%A5-svart-obuvi">nike roshe run menn gr氓 svart</a> <a href="http://www.anderonedream.com/adidas-originals-superstar-blu-scarpek">adidas originals superstar blu</a> <a href="http://www.variaponsel.com/nike-dunk-high-ac-neutral-grey-shoesi">nike dunk high ac neutral grey</a> <a href="http://www.allmydibs.com/nike-air-max-2019-naranja-zapatosi">nike air max 2019 naranja</a> <a href="http://www.macusaa.com/converse-chuck-alle-star-hvid-skoh">converse chuck alle star hvid</a>
socabets http://www.socabets.com/
seesoshow
 seesoshow 2019-04-21 18:09回复
#159
<a href="http://www.taiwanmeinet.com/gr%C3%A5-jordan-eclipse-boys-skoj">gr氓 jordan eclipse boys</a> <a href="http://www.talkwithgirl.com/ralph-lauren-hoodie-big-logo-poloh">ralph lauren hoodie big logo</a> <a href="http://www.mamatale.com/nike-kaishi-run-red-white-shoesi">nike kaishi run red white</a> <a href="http://www.strongtale.com/tutti-rosso-nike-lunar-force-1-high-scarpej">tutti rosso nike lunar force 1 high</a> <a href="http://www.iranpayamco.com/nike-air-max-2017-wei%C3%9F-blau-schuhej">nike air max 2017 wei脽 blau</a> <a href="http://www.hapeid.com/oakland-athletics-hat-with-elephant-hath">oakland athletics hat with elephant</a>
seesoshow http://www.seesoshow.com/
amemedgroup
 amemedgroup 2019-04-21 12:00回复
#158
<a href="http://www.alterwina.com/adidas-zx-750-m%C3%A6nd-dark-bl%C3%A5-hvid-skok">adidas zx 750 m忙nd dark bl氓 hvid</a> <a href="http://www.fajarmuda.com/nike-air-max-95-marinen-bl%C3%A5-and-hvit-obuvi">nike air max 95 marinen bl氓 and hvit</a> <a href="http://www.nohvfx.com/nike-dunk-low-negro-gum-zapatosl">nike dunk low negro gum</a> <a href="http://www.prepperdays.com/ray-ban-clubmaster-online-sunglassesh">ray ban clubmaster online</a> <a href="http://www.xlectures.com/minnesota-vikings-knit-hat-hatj">minnesota vikings knit hat</a> <a href="http://www.masvidalyoga.com/adidas-superstar-bianca-prezzo-scarpej">adidas superstar bianca prezzo</a>
[url=http://www.amemedgroup.com/]amemedgroup[/url]
asoseinhalb
 asoseinhalb 2019-04-20 15:00回复
#157
<a href="http://www.seesoshow.com/nike-roshe-flyknit-nero-bianca-scarpej">nike roshe flyknit nero bianca</a> <a href="http://www.crypolio.com/nike-roshe-run-flyknit-rot-and-schwarz-schuhei">nike roshe run flyknit rot and schwarz</a> <a href="http://www.vtrvideo.com/nike-zoom-lebron-xii-12-sort-greeb-skoh">nike zoom lebron xii 12 sort greeb</a> <a href="http://www.asoseinhalb.com/von-miller-replica-jersey-nfli">von miller replica jersey</a> <a href="http://www.handydgh.com/converse-john-varvatos-svart-l%C3%A6r-obuvk">converse john varvatos svart l忙r</a> <a href="http://www.blakefanz.com/coach-poppy-turnlock-medium-navy-totes-coachh">coach poppy turnlock medium navy totes</a>
asoseinhalb http://www.asoseinhalb.com/
jgeinc
 jgeinc 2019-04-20 00:08回复
#156
<a href="http://www.softballinsider.net/nike-roshe-run-hyp-schwarz-wei%C3%9F-kurpesd">nike roshe run hyp schwarz wei脽</a> <a href="http://www.sohoartusa.net/nike-free-5.0-v2-kvinders-orange-lyser%C3%B8d-kurpesc">nike free 5.0 v2 kvinders orange lyser酶d</a> <a href="http://www.sonegboom.net/vibram-fivefingers-speed-guld-sort-scarpec">vibram fivefingers speed guld sort</a> <a href="http://www.soulcircuit.net/jordan-fusion-4-cemennt-gr%C3%A5-schuhee">jordan fusion 4 cemennt gr氓</a> <a href="http://www.soulmateunlimited.net/how-to-clean-schwarz-air-max-95-obuvf">how to clean schwarz air max 95</a> <a href="http://www.spideradio.net/air-max-90-zapatilla-de-deporteboot-rosado-negro-butya">air max 90 zapatilla de deporteboot rosado negro</a>
jgeinc http://www.jgeinc.net/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸