JavaScript Tween算法及缓动效果

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/*算法 </article> </section> <section class="article-more"> <div class="rel mask-box"> <div class="content-mask"></div> <div class="content-more js-content-more">展开更多 <span>（<span class="cont-remain">50</span>%）</span> <i class="icon-arrow"></i> </div> </div> <div class="gg show-pageup" data-id="pageup"></div> <div class="soshm-box"> <div class="soshm-title"><span>分享</span></div> <div id="soshm-box"></div> </div> <div class="gg show-pagedown" data-id="pagedown"></div> <div id="wechat"></div> </section><section class="section you-like"> <header class="section-header"> <h3 class="section-title">猜你喜欢</h3> <div class="section-toolbar"> <a class="section-more" href="javascript:;" title="查看更多相关文章"> <span></span> <span></span> <span></span> </a> </div> </header> <div id="bd-recommend"></div> <div class="article-list"> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160220/1632804.html" title="JavaScript Tween算法及缓动效果">JavaScript Tween算法及缓动效果</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160220/1632804.html" title="JavaScript Tween算法及缓动效果"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/20/6d819f39deb799d55dae26448f7a832f_thumb_189.jpg" alt="JavaScript Tween算法及缓动效果"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160220/1632991.html" title="JS教程:Javascript实现缓动效果">JS教程:Javascript实现缓动效果</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160220/1632991.html" title="JS教程:Javascript实现缓动效果"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/20/40ccbe1f3a6b896f37301208b142d05c_thumb_189.jpg" alt="JS教程:Javascript实现缓动效果"></a> </div> </div> <div class="gg" data-id="content1"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171117/2766281.html" title="s8lol主宰符文怎么配">s8lol主宰符文怎么配</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> <a href="http://m.tulaoshi.com/wangluoyouxi/" target="_blank">网络游戏</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171117/2766281.html" title="s8lol主宰符文怎么配"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/17/2b6780a6d697ab474ec43d2b143a8c33.jpg" alt="s8lol主宰符文怎么配"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160129/1487369.html" title="Flash缓动效果">Flash缓动效果</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/fjc/" target="_blank">flash教程</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160129/1487369.html" title="Flash缓动效果"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201601/29/159f4443cfbe74c4fae7806592225af4_thumb_189.jpg" alt="Flash缓动效果"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160219/1593121.html" title="Javascript中的常见排序算法">Javascript中的常见排序算法</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160219/1593121.html" title="Javascript中的常见排序算法"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/19/86d2cdd97f16da653a837ba64c8e2a92_thumb_189.jpg" alt="Javascript中的常见排序算法"></a> </div> </div> <div class="gg" data-id="content2"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171116/2766194.html" title="lol偷钱流符文搭配推荐">lol偷钱流符文搭配推荐</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> <a href="http://m.tulaoshi.com/wangluoyouxi/" target="_blank">网络游戏</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171116/2766194.html" title="lol偷钱流符文搭配推荐"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/16/68ce3c7443802f29f089fd2b8aeacfac.jpg" alt="lol偷钱流符文搭配推荐"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160318/1895429.html" title="Flash制作一个不错的缓动导航实例">Flash制作一个不错的缓动导航实例</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/flash/" target="_blank">FLASH</a> <a href="http://m.tulaoshi.com/fjc/" target="_blank">flash教程</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160318/1895429.html" title="Flash制作一个不错的缓动导航实例"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201603/18/2d9b60faf5b75242e29b850c420dcff6_thumb_189.jpg" alt="Flash制作一个不错的缓动导航实例"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20160129/1482428.html" title="冒泡算法的三种JavaScript表示">冒泡算法的三种JavaScript表示</a></h4> <div class="article-item-meta"> <a href="/diannao/" title="电脑网络">电脑网络</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20160129/1482428.html" title="冒泡算法的三种JavaScript表示"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201601/29/48f61e90f8426ebf057497eaa2c9a0d4_thumb_189.jpg" alt="冒泡算法的三种JavaScript表示"></a> </div> </div> <div class="gg" data-id="content3"></div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="http://m.tulaoshi.com/n/20171116/2766140.html" title="lolAD刺客新符文搭配推荐">lolAD刺客新符文搭配推荐</a></h4> <div class="article-item-meta"> <a href="http://m.tulaoshi.com/yingxionglianmeng/" target="_blank">英雄联盟</a> </div> </div> <div class="article-item-thumb"> <a href="http://m.tulaoshi.com/n/20171116/2766140.html" title="lolAD刺客新符文搭配推荐"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201711/16/bd0c64bbcf0c4a08cdc15ba757ac2fa3.jpg" alt="lolAD刺客新符文搭配推荐"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="/n/20160220/1632801.html">有道词典学堂之旅助力开学英语提升</a></h4> </div> <div class="article-item-thumb"> <a href="/n/20160220/1632801.html" title="有道词典学堂之旅助力开学英语提升"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/20/600cb3f7e947d651e78d49a2138306ce_thumb_189.jpg" alt="有道词典学堂之旅助力开学英语提升"></a> </div> </div> <div class="article-item"> <div class="article-grouper"> <h4 class="article-item-title"><a href="/n/20160220/1632805.html">JavaScript入门教程(8):Location地址对象</a></h4> </div> <div class="article-item-thumb"> <a href="/n/20160220/1632805.html" title="JavaScript入门教程(8):Location地址对象"><img class="lazyload cover-img" src="http://i1.tulaoshi.com/images/lazy-spinner.jpg" data-src="http://img.tulaoshi.com/201602/20/50cd1d71b5de3ba2a8a16ce596c6231e_thumb_189.jpg" alt="JavaScript入门教程(8):Location地址对象"></a> </div> </div> <div class="gg" data-id="content4"></div> </div> </section> <div class="loadbox"> <div class="load-btn">下拉加载更多内容 ↓</div> <div class="icon-loading"></div> </div> <div class="gg show-banner2" data-id="banner2"></div> <div class="gg show-foot" data-id="foot"></div> </section> <footer id="footer" class="site-footer"> <ul class="footer-nav"> <li><a href="/" title="图老师首页">首页</a></li> <li><a href="/diannao/sitemap/" title="地图">地图</a></li> <li><a href="/update/6/" title="最新">最新</a></li> </ul> </footer> <div id="fixed-box" class="js-insert-box" data-id="fixed"></div> <script src="http://i1.tulaoshi.com/js/mobile.js"></script> <script type="application/ld+json"> { "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld", "@id": "http://m.tulaoshi.com/n/20160220/1632804.html", "appid": "1556758182286999", "title": "JavaScript Tween算法及缓动效果", "images": [ "http://img.tulaoshi.com/201602/20/6d819f39deb799d55dae26448f7a832f_thumb_189.jpg" ], "description": "下面请跟着图老师小编一起来了解下JavaScript Tween算法及缓动效果，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！", "pubDate": "2016-02-20T00:54:37" } </script></body></html>