TweenMax动画库学习(六)

目录           

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           TweenMax动画库学习(六)  

 

 

     上一节我们主要聊了TweenMax动画库中的currentLabel()：获取当前状态、getLabelAfter()：获取下一个状态、getLabelBefore()：获取上一个状态等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。    

      TweenMax动画库的官方网址:  http://greensock.com/timelinemax

      下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用： 

      1、页面布局

复制代码
 1 <style>
 2         html,body{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .div1{
 7             width:100px;
 8             height:100px;
 9             background: #8D121A;
10             position: absolute;
11             top:50px;
12             left:0;
13         }
14 </style>
复制代码
1 <body>
2 <div class="div1"></div>
3 </body>

2、ease：动画运动形式

            参数说明：如下图

复制代码
 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.add("state1");
 5             t.to(".div1",1,{left:300,ease:Bounce.easeIn},1);
 6             t.add("state2");
 7             t.to(".div1",1,{width:300},"+=1");
 8             t.add("state3");
 9             t.to(".div1",1,{height:300});
10         });
11 </script>
复制代码

 动画演示：

代码打包下载：

链接: http://pan.baidu.com/s/1c1JBBDu 密码: at3r

 

posted @   小旭的blog  阅读(3117)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手