TweenMax学习总结（一）

最新推荐文章于 2023-05-28 21:56:50 发布
最新推荐文章于 2023-05-28 21:56:50 发布
阅读量4.5k 收藏
点赞数 1
分类专栏： TweenMax
本文链接：https://blog.csdn.net/J__Max/article/details/82558421
版权

TweenMax学习总结（一）

初识TweenMax

  • 缘于在学习JavaScript的时候，做了一个回到顶部的demo：https://jiangnanmax.github.io/JS_back_to_top/ 只是使用缓动函数简单的实现了回到顶部的功能，没有任何动画特效，觉得甚是乏味。在网上找各种回到顶部的插件，最后找到了一个动画特效比较酷炫的插件，做了些改进，查看效果请点击链接：https://jiangnanmax.github.io/Back_To_Top/ 发现这个插件使用了一个TweenMax.js的动画库，然后只要几行简单的代码就能实现各种酷炫的动画效果，十分社会，遂学之。

  • 和其它的库类似，TweenMax动画库也依赖于jQuery库，以上两个文件都放在了Github上：https://github.com/JiangNanMax/TweenMax

引用TweenMax库

<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.js"></script>

创建一个动画实例

$(function () {
        var t = new TimelineMax();

    });

to()方法：用来添加动画

  • 方法介绍和参数说明
// TweenMax.to()是最常用的方法，它允许你定义对象的各个目标值
t.to("元素选择器或对象",持续时间,对象(描述运动的方向参数等),(可选)动画延迟发生时间可写数字,"-=0.5","+=0.5")
/*
    1. 传入一个元素选择器或对象

    2. 设定动画的持续时间

    3. 对象

        {变化的属性:值}

    4. (可选)动画延迟发生时间

        可写数字，“-=0.5”，“+=0.5“
*/

实例演示

  • 页面布局
<body>
    <div id="div1"></div>
</body>
<style>
        html,body{
            margin: 0;
            padding: 0;
        }

        #div1{
            width: 100px;
            height: 100px;
            background-color: #8D121A;
            position: absolute;
            left: 0;
            top: 100px;
        }
</style>
  • 执行单个动画
<script>
    $(function(){
        var t =new TimelineMax();
        t.to("#div1", 1, {left:300});
    });
</script>
  • 执行组合动画,其中第三个参数内的动画效果同时进行
<script>
    $(function(){
        var t =new TimelineMax();
        t.to("#div1", 1, {left:300,width:300});
    });
</script>
  • 执行一个队列的动画，其中队列中的动画会依次进行
<script>
    $(function(){
        var t =new TimelineMax();

        t.to("#div1", 1, { left: 300 });
        t.to("#div1", 1, { width: 300 });
        t.to("#div1", 1, { height: 300 });
        t.to("#div1", 1, { top: 300 });
        t.to("#div1", 1, { rotationZ: 180 });
        t.to("#div1", 1, { opacity: 0 });
    });
</script>

  • 添加第四个参数，设置动画播放的延迟时间

    <script>
$(function(){
    var t =new TimelineMax();

    t.to("#div1", 1, { left: 300 }, 1); //第一个动画延迟1s后执行
    t.to("#div1", 1, { width: 300 }); //第二个动画没有添加延迟，因此轮到它的时候立即执行
});
</script>
    <script>
$(function(){
    var t =new TimelineMax();

    t.to("#div1", 1, { left: 300, width: 300 }, 1); //第一个动画延迟1s后执行
    t.to("#div1", 1, { width: 300 }, 1); //第二条动画也是延迟一秒执行,会和第一条动画同时延迟一秒执行
});
</script>

  • 延迟执行第二个动画

    <script>
$(function(){
    var t =new TimelineMax();

    t.to("#div1", 1, { left: 300, width: 300 }, 1); //第一个动画延迟1s后执行
    t.to("#div1", 1, { width: 300 }, 3); //实现第一条动画完成后,延迟一秒,执行第二条动画
});
</script>

  • 通过play()方法和stop()方法来控制动画的播放与停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }

        #div1{
            width: 100px;
            height: 100px;
            background-color: #8D121A;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>
<body>
<input type="button" id="play" value="播放">
<input type="button" id="stop" value="停止">
<input type="button" id="reverse" value="反向播放">
<div id="div1"></div>

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/TweenMax.js"></script>

<script>
    $(function () {
        var t = new TimelineMax();

        t.to("#div1", 1, {left: 300}, 1);
        t.to("#div1", 2, {width: 300}, "+=1");
        t.to("#div1", 2, {height: 300}, "+=1");
        t.to("#div1", 2, {top: 600});
        t.to("#div1", 2, {rotationZ: 360});
        t.to("#div1", 2, {opacity: 0});
        t.stop();

        //通过play()方法和stop()方法来控制动画的播放与停止
        $("#play").click(function () {
            t.play();
        });

        $("#stop").click(function () {
            t.stop();
        });


    });
</script>

</body>
</html>
  • 通过reverse()方法让动画反向执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }

        #div1{
            width: 100px;
            height: 100px;
            background-color: #8D121A;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>
<body>
<input type="button" id="play" value="播放">
<input type="button" id="stop" value="停止">
<input type="button" id="reverse" value="反向播放">
<div id="div1"></div>

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/TweenMax.js"></script>

<script>
    $(function () {
        var t = new TimelineMax();

        t.to("#div1", 1, {left: 300}, 1);
        t.to("#div1", 2, {width: 300}, "+=1");
        t.to("#div1", 2, {height: 300}, "+=1");
        t.to("#div1", 2, {top: 600});
        t.to("#div1", 2, {rotationZ: 360});
        t.to("#div1", 2, {opacity: 0});
        t.stop();

        //通过play()方法和stop()方法来控制动画的播放与停止
        $("#play").click(function () {
            t.play();
        });

        $("#stop").click(function () {
            t.stop();
        });

        //通过reverse()方法让动画反向执行
        $("#reverse").click(function () {
            t.reverse();
        });

    });
</script>

</body>
</html>
  • 动画运动结束后的回调函数：onComplete()； 动画反向运动结束后的回调函数：onReverseComplete()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }

        #div1{
            width: 100px;
            height: 100px;
            background-color: #8D121A;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>
<body>
<input type="button" id="play" value="播放">
<input type="button" id="stop" value="停止">
<input type="button" id="reverse" value="反向播放">
<div id="div1"></div>

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/TweenMax.js"></script>

<script>
    $(function () {
        var t = new TimelineMax();

        t.to("#div1", 1, {left: 300,onComplete:function () {
                alert("left:300px");
            },onReverseComplete:function () {
                alert("lef:0px");
            }}, 1);
        t.to("#div1", 2, {width: 300}, "+=1");
        t.to("#div1", 2, {height: 300}, "+=1");
        t.to("#div1", 2, {top: 600});
        t.to("#div1", 2, {rotationZ: 360});
        t.to("#div1", 2, {opacity: 0});
        t.stop();

        //通过play()方法和stop()方法来控制动画的播放与停止
        $("#play").click(function () {
            t.play();
        });

        $("#stop").click(function () {
            t.stop();
        });

        //通过reverse()方法让动画反向执行
        $("#reverse").click(function () {
            t.reverse();
        });

        //onComplete()：运动结束后触发的函数
        //onReverseComplete()：反向运动结束后触发的函数
        //对应补充如上：
    });
</script>

</body>
</html>
JiangNanMax
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5 SVG+TweenMax.js全屏背景图片切换特效
06-11
大气炫酷的HTML5 SVG+TweenMax.js全屏背景图片切换特效，图片滑动切换动画效果相当的有创意，具体请看演示。
TweenMax.js 专业动画插件
JUSTIN的博客
08-10 2551
（一）前言 当我们要做网页动画时候，不管是css还是js控制，其实在复杂连续动画下，都很难保证连续和流畅性，那么，我们就需要一个能给出的简单的解决方案，正好，TweenMax.js 就能解决这件事 （二）TweenMax初探 ...
TweenMax介绍
Jave.Lin 的学习笔记
05-31 7791
Tweenmax是TweenLite和TweenFilterLite的基础上建立的。目的在于使得tweening家族具备更加大众化的功能......Tweenmax同样使用简单易学的语法。实际上，因为Tweenmax是演化版，所以TweenMax可以实现TweenLite和 TweenFilterLite的所有功能，或者更多。那么，你可能要问，为什么不仅仅弄一个类呢？这是个很好的问题。这是因为我们
TweenMax
leiwen_su的博客
06-03 1540
TweenMax扩展自TweenLite，添加了很多比较有用的特性，例如：repeat(),repeatDelay(),yoyo(),等等。TweenMax构造函数TweenMax ( target:Object, duration:Number, vars:Object );target : Object – 目标 MovieClip (或其它对象)，对它的属性进行缓动 duration : N
TweenMax参数用法中文介绍
weixin_30390075的博客
06-22 389
TweenMax 建立在 TweenLite 和 TweenFilterLite 基础之上，因此，又揉合了这二者的功能，使得功能更加的齐备，但是如果说易用性，觉得还是 TweenLite 来得方便一些。我的译文是从 TweenLite 开始的，接着是 TweenFilterLite 最后是 TweenMax ，这也恰好是这个类发展的轨迹，沿着这个轨迹一路读过来，会觉得容易理解很多。 Twe...
TweenMax学习记录教程
Lcc的博客
05-28 460
TweenMax.js 适用于移动端和现代互联网的超高性能专业级动画插件
TweenMax基于SVG绘制晶体树特效
06-24
TweenMax基于SVG绘制晶体树特效是一款卡通结晶大树动画特效。
TweenMax图片碎片化切换特效
07-24
TweenMax图片碎片化切换特效是一款TweenMax使用canvas制作图片碎片化，图片像镜子打碎动画切换特效。
Swiper 和 TweenMax 移动端实战 源码
02-01
Swiper 和 TweenMax 移动端实战 里的案例的实现代码，适合新手学习，大家共享学习。
TweenMax.min.js
09-08
TweenMax是一个很常用的动画制作框架，TweenMax.min.js是TweenMax的JS版本
缓动 TweenMax 非常强大的as3.0缓动类
05-01
缓动 TweenMax 非常强大的as3.0缓动类，直接导入到文档类中即可使用，非常方便！
as3缓动类TweenMax
11-22
缓动类 greensock tweenMax
TweenMax不规则图片切换特效
04-09
TweenMax不规则图片切换特效是一款不规则图片透明渐变切换图片焦点图代码。
tweenMax库
08-02
编译出来的flash用的tweenmax库
TweenMax.js和TweenMax.min.js 打包下载
08-16
TweenMax是一个很常用的动画制作框架，TweenMax.min.js是TweenMax的JS版本 ，TweenMax.js和TweenMax.min.js 打包下载
tweenMax下载和使用
string佳佳的博客
09-26 848
官网下载地址：https://www.tweenmax.com.cn/source/ 官方文档：https://www.tweenmax.com.cn/api/tweenmax/ 中文文档：https://www.wenjiangs.com/doc/tweenmax-delayedcall 使用方法： tweenMax () { this.tween = TweenMax.to(this.camera.position, 5, { x: -700, y: 5,
AS3常用三方类库（二）：TweenMax（转）
学习记录
06-04 7294
TweenMax 可能是很多人都用的，包括我 但 是最近发现大量的运用就总会产生这样或那样的"怪事"，有时用代码来做缓动有时又用TweenMax造成了代码的 混乱，而且除了单调的TweenMax.to()等几个函数外，貌似还有很多这样那样fun stuffs。对于动画ease的控制，自己除了一个Back就不知道其他了。 总之一片惨淡, 所以趁着这个机会好好总结一下： 一，主要代码结构： com
TweenMax 教程 & 使用（转）
03-11 6161
内容:  TweenMax 继承 TweenLite ， 轻量，快速并增加了新的功能：比如 pause/resume, timeScale, event listeners, reverse(), restart(), setDestination(), yoyo, loop,  rounding, 并且能够使用 progress 属性 跳到动画的任何位置. 默认比 TweenLite 激活更多的插件, 因此它功能齐全，它比 TweenLite 能做的更多. 如果你想整合其它动画引擎，可以考虑使用 Twee
TweenMax 暂停
最新发布
06-07
如果您正在使用TweenMax动画库，可以使用以下代码将动画暂停： ```javascript TweenMax.pauseAll(); ``` 这将暂停所有TweenMax动画。如果您只想暂停特定的动画，可以使用TweenMax实例的pause()方法： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JiangNanMax

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值