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;">来源:https://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="/reader/1632804">看过《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="https://www.tulaoshi.com/n/20160220/1632804.html">JavaScript Tween算法及缓动效果</a> <span class="fr">02-20</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20160220/1632991.html">JS教程:Javascript实现缓动效果</a> <span class="fr">02-20</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20160129/1487369.html">Flash缓动效果</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20160219/1593121.html">Javascript中的常见排序算法</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20160318/1895429.html">Flash制作一个不错的缓动导航实例</a> <span class="fr">03-18</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20160129/1482428.html">冒泡算法的三种JavaScript表示</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20160219/1593165.html">C++ 冒泡排序数据结构、算法及改进算法</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20160129/1485314.html">全文信息检索介绍及算法分析</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20160219/1625788.html">Javascript 调用XML制作连动下拉框</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="https://www.tulaoshi.com/n/20151211/1032807.html">注意怀孕不可一缓再缓</a> <span class="fr">12-11</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="https://www.tulaoshi.com/n/20160219/1610635.html">JavaScript 弹出层效果</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="https://www.tulaoshi.com/n/20160219/1610635.html"> <img class="cover-img scale-img" src="https://img.tulaoshi.com/201602/19/ca18b7a9215ca680b5246ace69017e54_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="https://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="site-output"><script>tls.output.www_news('banner4_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="https://www.tulaoshi.com/n/20160219/1596233.html">JavaScript 经典效果集</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="https://www.tulaoshi.com/n/20160219/1596233.html"> <img class="cover-img scale-img" src="https://img.tulaoshi.com/201602/19/cfe8be6854058ab86081332c5f329d99_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="https://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="https://www.tulaoshi.com/n/20160326/2006532.html">太极拳视频 了解论腰先动及先动之理</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="https://www.tulaoshi.com/n/20160326/2006532.html"> <img class="cover-img scale-img" src="https://img.tulaoshi.com/201603/26/08b0293de236f73330bcb4551e43f18d_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="https://www.tulaoshi.com/taijiquanjiaocheng/" target="_blank">太极拳教程</a> <a href="https://www.tulaoshi.com/tjq/" target="_blank">太极拳</a> <a href="https://www.tulaoshi.com/ershisishijianhuataijiquan/" target="_blank">二十四式简化太极拳</a> <a href="https://www.tulaoshi.com/yangshitaijiquan/" target="_blank">杨氏太极拳</a> <a href="https://www.tulaoshi.com/seshitaijiquan/" target="_blank">42式太极拳</a> <a href="https://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('banner5_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="https://www.tulaoshi.com/n/20160402/2116607.html">手机YY语音使用流量情况及算法</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="https://www.tulaoshi.com/n/20160402/2116607.html"> <img class="cover-img scale-img" src="https://img.tulaoshi.com/201604/02/5137022668ec12b0661228d3eccf8349_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="https://www.tulaoshi.com/shoujiruanjian/" target="_blank">手机软件</a> <a href="https://www.tulaoshi.com/yingyongruanjian/" target="_blank">应用软件</a> </div> <div class="ks-news-desc"> 手机YY语音使用流量情况及算法   手机YY耗流量吗?手机YY语音流量怎么计算? 当你在频道里面听歌，或者和朋友语音时，声音数据本身就是大量的数据流量。如果仅仅是挂机或者使用文字功能，则手机YY使用的数据量不大。 1)手机YY占用的网络流量详细说明 挂机而不进入频道时的流量大约是：150K/小时 进入娱乐频道，K歌或者听电...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="https://www.tulaoshi.com/n/20160318/1887273.html">Flash AS3简单制作跟随鼠标缓动运动的圆-Flash实例教程</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="https://www.tulaoshi.com/n/20160318/1887273.html"> <img class="cover-img scale-img" src="https://img.tulaoshi.com/201603/18/6cfed81b04267337435e597aedc227ba_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="https://www.tulaoshi.com/flash/" target="_blank">FLASH</a> <a href="https://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="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> <!--width 300--> <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="https://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/">305</a> </div> <div class="Menter_tx_ww_1 right_j"> <p>收藏</p> <a href="/user/球都麻得/2/">28</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="https://www.tulaoshi.com/n/20160220/1632802.html">2012伦敦奥运会视觉形象设计欣赏</a></li> <li><a href="https://www.tulaoshi.com/n/20160220/1632801.html">有道词典学堂之旅助力开学英语提升</a></li> <li><a href="https://www.tulaoshi.com/n/20160220/1632800.html">win10预览版10061升级后无法激活怎么办？</a></li> <li><a href="https://www.tulaoshi.com/n/20160220/1632799.html">Win10 Build 10061怎么升级</a></li> <li><a href="https://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="https://www.tulaoshi.com/n/20171121/2766880.html">开发一个网站需要做哪些准备 搭建网站步骤</a> </li> <li class="news-list-item"> <span class="range-type">02</span> <a href="https://www.tulaoshi.com/n/20171114/2765722.html">成为高级工程是要具备什么</a> </li> <li class="news-list-item"> <span class="range-type">03</span> <a href="https://www.tulaoshi.com/n/20170112/2607885.html">谷歌开发者中国网站涵盖什么</a> </li> <li class="news-list-item"> <span class="range-type">04</span> <a href="https://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="https://www.tulaoshi.com/n/20160220/1632235.html"> <img class="cover-img scale-img" src="https://img.tulaoshi.com/201602/20/10b96d13ba03b879888d4da96d053c5f_thumb_189.jpg" alt="JavaScript事件驱动及事件处理"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="https://www.tulaoshi.com/n/20160220/1632235.html">JavaScript事件驱动及事件处理</a> </p> <p class="jinghua-item-tag">罗马森林9</p> </dd> </dl> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="https://www.tulaoshi.com/n/20160220/1632262.html"> <img class="cover-img scale-img" src="https://img.tulaoshi.com/201602/20/4fa290f0cd011c0e2c85f75cc8219d37_thumb_189.jpg" alt="JavaScript制作滚动文本效果"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="https://www.tulaoshi.com/n/20160220/1632262.html">JavaScript制作滚动文本效果</a> </p> <p class="jinghua-item-tag">四川蜀旺科技30</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="https://www.tulaoshi.com/n/20160219/1610029.html"> <img class="cover-img scale-img" src="https://img.tulaoshi.com/201602/19/1969fc97c44d123841af48fe33abc810_thumb_189.jpg" alt="JavaScript幻灯片效果"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="https://www.tulaoshi.com/n/20160219/1610029.html">JavaScript幻灯片效果</a> </p> <p class="jinghua-item-tag">幸运的嗨菜</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="https://www.tulaoshi.com/webkaifa/" title="Web开发">Web开发</a> <a class="hot-tag col_3" href="https://www.tulaoshi.com/web/" title="web">web</a> <a class="hot-tag col_5" href="https://www.tulaoshi.com/webgongju/" title="WEB工具">WEB工具</a> <a class="hot-tag col_6" href="https://www.tulaoshi.com/chengxukaifa/" title="程序开发">程序开发</a> <a class="hot-tag col_6" href="https://www.tulaoshi.com/yidongkaifa/" title="移动开发">移动开发</a> <a class="hot-tag col_3" href="https://www.tulaoshi.com/webbiaozhun/" title="Web标准">Web标准</a> <a class="hot-tag col_7" href="https://www.tulaoshi.com/kaifagongju/" title="开发工具">开发工具</a> <a class="hot-tag col_3" href="https://www.tulaoshi.com/younaokaifa/" title="宝宝右脑开发">宝宝右脑开发</a> <a class="hot-tag col_5" href="https://www.tulaoshi.com/webfuwuqi/" title="WEB服务器">WEB服务器</a> <a class="hot-tag col_4" href="https://www.tulaoshi.com/webyingyongchengxu/" title="web应用程序">web应用程序</a> <a class="hot-tag col_7" href="https://www.tulaoshi.com/javascript/" title="JavaScript">JavaScript</a> <a class="hot-tag col_8" href="https://www.tulaoshi.com/dongche/" title="动车">动车</a> <a class="hot-tag col_8" href="https://www.tulaoshi.com/shubiaodongbule/" title="鼠标动不了">鼠标动不了</a> <a class="hot-tag col_3" href="https://www.tulaoshi.com/baobaoshuijiaoduodong/" title="宝宝睡觉多动">宝宝睡觉多动</a> <a class="hot-tag col_8" href="https://www.tulaoshi.com/kaojijishucai/" title="烤鸡及蔬菜">烤鸡及蔬菜</a> <a class="hot-tag col_1" href="https://www.tulaoshi.com/luyujiepoujiyingyong/" title="鲈鱼解剖及应用">鲈鱼解剖及应用</a> <a class="hot-tag col_8" href="https://www.tulaoshi.com/erjinzhisuanfa/" title="二进制算法">二进制算法</a> <a class="hot-tag col_3" href="https://www.tulaoshi.com/dongyashuayounaxieyoudian/" title="动牙刷有哪些优点">动牙刷有哪些优点</a> <a class="hot-tag col_7" href="https://www.tulaoshi.com/psxg/" title="PS效果">PS效果</a> <a class="hot-tag col_5" href="https://www.tulaoshi.com/xueqianjiruyuan/" 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=https://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="https://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="https://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="https://m.tulaoshi.com/n/20160220/1632804.html"> JavaScript Tween算法及缓动效果 移动版</a> </div> </div> <!--footer底部--> <script type="text/javascript">tls.output.show_foot();</script> <!-- 尾部 --> <!--www_news PC内容页面--> <script src="https://static.tulaoshi.com/js/pc_show.min.js"></script> </body> </html>