JavaScript Tween算法及缓动效果

2016-02-20 00:54 0 1 收藏

下面请跟着图老师小编一起来了解下JavaScript Tween算法及缓动效果，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！

【 tulaoshi.com - Web开发】

Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。我这里要教大家的是怎么利用flash的Tween类的算法，来做js的Tween算法，并利用它做一些简单的缓动效果。

完整实例下载

运行代码框
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /titleTween/title/headbodydiv style="padding-left:50px;"div style="position:relative; border:1px solid #000000; width:550px; height:50px;"div id="idMove" style="width:50px; height:50px; background:#930; position:absolute;"/div/divdiv style="position:relative;width:550px;height:200px; margin-top:50px;"div id="idChart" style="border:1px solid #000;height:200px;" /divdiv id="idLine" style="position:absolute;top:0;left:0;height:200px;width:1px;background:#000;"/div/div/divdivp Tween类型： br /labelinput name="vTween" type="radio" value="Linear" checked="checked" /Linear /labellabelinput name="vTween" type="radio" value="Quad" /Quadratic /labellabelinput name="vTween" type="radio" value="Cubic" /Cubic /labellabelinput name="vTween" type="radio" value="Quart" /Quartic /labellabelinput name="vTween" type="radio" value="Quint" /Quintic /labellabelinput name="vTween" type="radio" value="Sine" /Sinusoidal /labelbr /labelinput name="vTween" type="radio" value="Expo" /Exponential /labellabelinput name="vTween" type="radio" value="Circ" /Circular /labellabelinput name="vTween" type="radio" value="Elastic" /Elastic /labellabelinput name="vTween" type="radio" value="Back" /Back /labellabelinput name="vTween" type="radio" value="Bounce" /Bounce /label/pp ease类型： br /labelinput name="vEase" type="radio" value="easeIn" checked="checked" /easeIn /labellabelinput name="vEase" type="radio" value="easeOut" /easeOut /labellabelinput name="vEase" type="radio" value="easeInOut" /easeInOut /label/pinput id="idSpeed" type="button" value="减慢速度" /input id="idRun" type="button" value=" Run " //divscript/*算法 </div> <p style="color:#333;margin:10px 0;">来源:http://www.tulaoshi.com/n/20160220/1632804.html</p> </div> <div id="tls-pages" class="tls-pages"></div> <ul class="pages-two"> <li class="pages-two-item"> <span>上一篇：</span> <a href="/n/20160220/1632801.html">有道词典学堂之旅助力开学英语提升</a> </li> <li class="pages-two-item"> <span>下一篇：</span> <a href="/n/20160220/1632805.html">JavaScript入门教程(8):Location地址对象</a> </li> </ul> </div> </div> <div class="contain-left read-more"> <p class="inter-tit rel"> <a href="javascript:;">看过《JavaScript Tween算法及缓动效果》的人还看了以下文章</a> <a href="/diannao/" class="C_hs_nr_111_a">更多>></a> </p> <ul class="read-list clearfix style-circle"> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160220/1632804.html">JavaScript Tween算法及缓动效果</a> <span class="fr">02-20</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160220/1632991.html">JS教程:Javascript实现缓动效果</a> <span class="fr">02-20</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1487369.html">Flash缓动效果</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1593121.html">Javascript中的常见排序算法</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160318/1895429.html">Flash制作一个不错的缓动导航实例</a> <span class="fr">03-18</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1482428.html">冒泡算法的三种JavaScript表示</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20151211/1032807.html">注意怀孕不可一缓再缓</a> <span class="fr">12-11</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1593165.html">C++ 冒泡排序数据结构、算法及改进算法</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1485314.html">全文信息检索介绍及算法分析</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1625788.html">Javascript 调用XML制作连动下拉框</a> <span class="fr">02-19</span> </li> </ul> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner2_780')</script></div> <div class="contain-left site-output"><script>tls.output.www_news('banner3_780')</script></div> <div class="vertical-tab-box contain-left"> <div class="recommend-tit clearfix"> <div class="recommend-tit-cont">延伸阅读</div> </div> <div class="lx-news-box"> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160326/2006532.html">太极拳视频了解论腰先动及先动之理</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160326/2006532.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201603/26/08b0293de236f73330bcb4551e43f18d_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/taijiquanjiaocheng/" target="_blank">太极拳教程</a> <a href="http://www.tulaoshi.com/tjq/" target="_blank">太极拳</a> <a href="http://www.tulaoshi.com/ershisishijianhuataijiquan/" target="_blank">二十四式简化太极拳</a> <a href="http://www.tulaoshi.com/yangshitaijiquan/" target="_blank">杨氏太极拳</a> <a href="http://www.tulaoshi.com/seshitaijiquan/" target="_blank">42式太极拳</a> <a href="http://www.tulaoshi.com/chenshitaijiquan/" target="_blank">陈氏太极拳</a> </div> <div class="ks-news-desc"> 太极拳视频了解论腰先动及先动之理在太极拳的练习中很多太极拳者都忽视了腰对于太极拳的重要性，大家知道腰是承载着整体身体的关键位置。在太极拳中也是同样的道理，可见腰对于太极拳是多么的重要了。我们很多人在练习的中都不能去运用腰。在太极拳中，可以说腰是整个太极拳的发力根本，一点都不夸张。我们当知，万...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner4_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1610635.html">JavaScript 弹出层效果</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1610635.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/ca18b7a9215ca680b5246ace69017e54_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> function sAlert(str){ var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=100;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#336699";//提示窗口的边框颜色 titlecolor="#99CCFF";//提示窗口的标题颜色 ...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160318/1887273.html">Flash AS3简单制作跟随鼠标缓动运动的圆-Flash实例教程</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160318/1887273.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201603/18/6cfed81b04267337435e597aedc227ba_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/flash/" target="_blank">FLASH</a> <a href="http://www.tulaoshi.com/fjc/" target="_blank">flash教程</a> </div> <div class="ks-news-desc"> poluoluo核心提示：Flash Awww.Tulaoshi.comS3简单制作跟随鼠标缓动运动的圆，我们这个教程主要是利用AS3来制作，非常简单，适合新手。 Flash AS3简单制作跟随鼠标缓动运动的圆，我们这个教程主要是利用AS3来制作，非常简单，适合新手。先看效果，鼠标点击动画的任何部分可以预览到效果。启动flash，新建立文档，设置...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner5_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1596233.html">JavaScript 经典效果集</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1596233.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/cfe8be6854058ab86081332c5f329d99_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> 些很实用且必用的小脚本代码: 脚本1:进入主页以后自动播放声音 embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true 脚本2:进入主页后自动最大话,省的去在自己单击了 script self.moveTo(0,0) self.resizeTo(screen.availWidth,screen.availHe...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1596819.html">【算法】扑克发牌算法实现</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1596819.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/28eaace886c135fdb22779849f0f80a6_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc">首先给扑克牌中每张牌设定一个编号，下面算法实现的编号规则如下： u 红桃按照从小到大依次为：1-13 u 方块按照从小到大依次为：14-26 u 黑桃按照从小到大依次为：27-39 u 梅花按照从小到大依次为：40-52 u 小王为53，大王为54 算法实现如下： u 首先按照以上编号规则初始化一个包含108个数字的数组 u 每次随机从该数组中抽取一个数字，...</div> </div> </div> <div class="news-more-btn"> <a class="btn btn-block btn-default" title="查看更多精彩" href="/diannao/">查看更多精彩>></a> </div> </div> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner6_780')</script></div> </div>  <div class="conter_300"> <div class="contain-right site-output"><script>tls.output.www_news('right1_300')</script></div> <div class="Member clearfix"> <div class="Menber_tx_1 rel"> <a href="/user/球都麻得/1/"> <img class="member-img" src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" width="70" height="70" alt="球都麻得"> </a> <a href="/user/球都麻得/1/" id="username">球都麻得</a> </div> <div class="Menber_tx_ww"> <div class="Menter_tx_ww_1"> <p>经验教程</p> <a href="/user/球都麻得/1/">12</a> </div> <div class="Menter_tx_ww_1 right_j"> <p>收藏</p> <a href="/user/球都麻得/2/">47</a> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right2_300')</script></div>  <div class="hop_gg clearfix js-tab"> <div class="hop_gg_s clearfix tab_control2"> <a class="js-tab-item active" href="javascript:;">最新文章</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active"> <ul> <li><a href="http://www.tulaoshi.com/n/20160220/1632802.html">2012伦敦奥运会视觉形象设计欣赏</a></li> <li><a href="http://www.tulaoshi.com/n/20160220/1632801.html">有道词典学堂之旅助力开学英语提升</a></li> <li><a href="http://www.tulaoshi.com/n/20160220/1632800.html">win10预览版10061升级后无法激活怎么办？</a></li> <li><a href="http://www.tulaoshi.com/n/20160220/1632799.html">Win10 Build 10061怎么升级</a></li> <li><a href="http://www.tulaoshi.com/n/20160220/1632798.html">国外优秀icon图标设计—叉车图标</a></li> </ul> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right3_300')</script></div> <div class="hop_gg clearfix js-tab newest-msg"> <div class="hop_gg_s clearfix"> <a href="javascript:;" class="js-tab-item active" >Web开发</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active" > <ul class="news-list mt5 has-ad-list"> <li class="news-list-item"> <span class="range-type">01</span> <a href="http://www.tulaoshi.com/n/20171121/2766880.html">开发一个网站需要做哪些准备搭建网站步骤</a> </li> <li class="news-list-item"> <span class="range-type">02</span> <a href="http://www.tulaoshi.com/n/20171114/2765722.html">成为高级工程是要具备什么</a> </li> <li class="news-list-item"> <span class="range-type">03</span> <a href="http://www.tulaoshi.com/n/20170112/2607885.html">谷歌开发者中国网站涵盖什么</a> </li> <li class="news-list-item"> <span class="range-type">04</span> <a href="http://www.tulaoshi.com/n/20160220/1633591.html">CSS入门教程——样式表加入网页方式</a> </li> </ul> </div> </div> <div class="site-output"><script>tls.output.www_news('right4_300')</script></div> </div> <div class="fixed-right"> <div class="hop_gg clearfix"> <h3>精华推荐</h3> <div class="jinghua-list"> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160402/2116607.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201604/02/5137022668ec12b0661228d3eccf8349_thumb_189.jpg" alt="手机YY语音使用流量情况及算法"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160402/2116607.html">手机YY语音使用流量情况及算法</a> </p> <p class="jinghua-item-tag">李阳1852</p> </dd> </dl> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1507355.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/a0d30647f3abf1efe9dc035daefacff1_thumb_189.jpg" alt="Linux C 函数参考(数据结构及算法）"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160129/1507355.html">Linux C 函数参考(数据结构及算法）</a> </p> <p class="jinghua-item-tag">丸子弧</p> </dd> </dl> <div class="site-output"><script>tls.output.www_news('right5_300')</script></div> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160220/1632235.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/20/10b96d13ba03b879888d4da96d053c5f_thumb_189.jpg" alt="JavaScript事件驱动及事件处理"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160220/1632235.html">JavaScript事件驱动及事件处理</a> </p> <p class="jinghua-item-tag">罗马森林9</p> </dd> </dl> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right6_300')</script></div>  <div class="hop_gg clearfix"> <h3>热门标签</h3> <div class="hot-tag-box-item"> <a class="hot-tag col_9" href="http://www.tulaoshi.com/webkaifa/" title="Web开发">Web开发</a> <a class="hot-tag col_1" href="http://www.tulaoshi.com/web/" title="web">web</a> <a class="hot-tag col_7" href="http://www.tulaoshi.com/chengxukaifa/" title="程序开发">程序开发</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/webgongju/" title="WEB工具">WEB工具</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/yidongkaifa/" title="移动开发">移动开发</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/webbiaozhun/" title="Web标准">Web标准</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/kaifagongju/" title="开发工具">开发工具</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/younaokaifa/" title="宝宝右脑开发">宝宝右脑开发</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/webfuwuqi/" title="WEB服务器">WEB服务器</a> <a class="hot-tag col_5" href="http://www.tulaoshi.com/webyingyongchengxu/" title="web应用程序">web应用程序</a> <a class="hot-tag col_1" href="http://www.tulaoshi.com/javascript/" title="JavaScript">JavaScript</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/dongche/" title="动车">动车</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/shubiaodongbule/" title="鼠标动不了">鼠标动不了</a> <a class="hot-tag col_5" href="http://www.tulaoshi.com/baobaoshuijiaoduodong/" title="宝宝睡觉多动">宝宝睡觉多动</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/erjinzhisuanfa/" title="二进制算法">二进制算法</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/dongyashuayounaxieyoudian/" title="动牙刷有哪些优点">动牙刷有哪些优点</a> <a class="hot-tag col_1" href="http://www.tulaoshi.com/psxg/" title="PS效果">PS效果</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/xueqianjiruyuan/" title="学前及入园">学前及入园</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/liangchaxiaoguo/" title="凉茶效果">凉茶效果</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/xieyouxiaoguo/" title="鞋油效果">鞋油效果</a> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right0_300')</script></div> </div> </div> <div class="float_bottom js-share-box" id="fixbottom"> <div class="float_bot_1"> <a href="javascript:;" class="icon-share icon-share71" id="weixin_show_btn"></a> <img src="https://pan.baidu.com/share/qrcode?w=150&h=150&url=http://m.tulaoshi.com/n/20160220/1632804.html" style="right:0;left:0;top:-130px;display:none; border:1px solid #e5e5e5; background:#fff; padding:10px; width:100px" id="weixin_show"> </div> <a href="javascript:;" class="icon-share icon-share11 js-share-weibo">微博分享</a> <a href="javascript:;" class="icon-share icon-share21 js-share-qq">QQ分享</a> <a href="javascript:;" class="icon-share icon-share31 js-share-qzone">QQ空间</a> <a href="http://m.tulaoshi.com/n/20160220/1632804.html" class="icon-share icon-share41">手机页面</a> <a href="javascript:;" class="icon-share icon-share51" id="fav_site_btn" data-url="http://www.tulaoshi.com/n/20160220/1632804.html">收藏网站</a> <a href="javascript:;" class="icon-share icon-share61" id="totop">回到头部</a> </div> <div class="c_xins" style="display:none;"> <a href="http://m.tulaoshi.com/n/20160220/1632804.html"> JavaScript Tween算法及缓动效果移动版</a> </div> </div>  <script type="text/javascript">tls.output.show_foot();</script>   <script src="http://static.tulaoshi.com/js/pc_show.min.js"></script> </body> </html>