TweenMax学习总结（一）

最新推荐文章于 2024-09-01 13:30:36 发布
最新推荐文章于 2024-09-01 13:30:36 发布
阅读量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>
TweenMax.js和TweenMax.min.js 打包下载
08-16
TweenMax是一个很常用的动画制作框架，TweenMax.min.js是TweenMax的JS版本 ，TweenMax.js和TweenMax.min.js 打包下载
TweenMax（一）基础语法
Lee的博客
11-08 4536
偶然发现一个很强大打的动画库，果断了解一下。 &lt;script src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'&gt;&lt;/script&gt; 先给文件链接。 1.简单示例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &...
使用TweenMax.js和CSS3创建冰球运动员动画效果教程
最新发布
weixin_42613017的博客
09-01 1631
本文还有配套的精品资源，点击获取 简介：本资源提供了一个用TweenMax.js和CSS3技术创建的冰球运动员打冰球动画效果的项目。 TweenMax.js是一个强大的JavaScript库，用于实现平滑动画，而CSS3则支持动画、过渡和3D变换等特性。开发者可利用这些工具创建动态的冰球动画，通过"使用须知.txt"了解安装和代码使用指南，并通过"***"文件中的源代码进行...
初探TweenMax 动画
yhwcool的博客
09-21 437
直接 上代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&amp
TweenMax.js 专业动画插件
JUSTIN的博客
08-10 2675
（一）前言 当我们要做网页动画时候，不管是css还是js控制，其实在复杂连续动画下，都很难保证连续和流畅性，那么，我们就需要一个能给出的简单的解决方案，正好，TweenMax.js 就能解决这件事 （二）TweenMax初探 ...
TweenMax.js 用法
08-27 828
首先导入不用说了 导入本地： <script type="text/javascript" src="src/minified/TweenMax.min.js"></script> <script type="text/javascript" src="s...
TweenMax使用
03-02
### TweenMax 使用详解 #### 一、TweenMax 简介 TweenMax 是一款功能...通过对TweenMax的学习和应用，开发者可以轻松地在Flash项目中实现各种复杂的动画效果。无论是初学者还是经验丰富的开发者，都能从中获益良多。
TweenMax实现弹性滑动进度条特效.zip
07-04
总结来说， TweenMax结合jQuery，利用其强大的动画功能和丰富的缓动函数，可以轻松实现弹性滑动进度条特效。这不仅增强了用户界面的视觉吸引力，也为网页交互设计提供了更多的可能性。通过深入研究和实践，开发者...
TweenMax基于SVG绘制晶体树特效.zip
10-15
总结来说，"TweenMax基于SVG绘制晶体树特效.zip"是一个包含SVG图形、jQuery交互和TweenMax动画的网页特效项目。开发者可以学习如何结合这些技术创建动态的、视觉上吸引人的晶体树效果，并根据需求进行二次修改。这个...
jQuery+TweenMax动画翻页倒计时特效.zip
09-27
总结来说，"jQuery+TweenMax动画翻页倒计时特效.zip"是一个结合了HTML5、jQuery和TweenMax技术的项目，它展示了如何利用这些工具创建出引人注目的交互式Web元素。无论是初学者还是经验丰富的开发者，都能从中学习到...
基于TweenMax的超酷全屏轮播图切换特效.zip
11-21
总结起来，这个项目是一个使用TweenMax库来实现全屏轮播图切换特效的前端代码示例，通过学习和实践，开发者可以提升自己在网页动画和交互设计方面的技能。同时，"使用须知.txt"提供的指南对于正确运行和自定义这个...
TweenMax.min.js
06-27
tweenmax.min.js jquery插件 TweenMax.min.js Flash业界久负盛名的动画引擎(TweenLite等)GreenSock推出了新一代动画引擎平台GreenSock Animation
TweenMax.js+jQuery弹性滑动动画进度条特效.zip
09-21
TweenMax.js+jQuery弹性滑动动画进度条特效.zip
AS3常用三方类库（二）：TweenMax（转）
学习记录
06-04 7356
TweenMax 可能是很多人都用的，包括我 但 是最近发现大量的运用就总会产生这样或那样的"怪事"，有时用代码来做缓动有时又用TweenMax造成了代码的 混乱，而且除了单调的TweenMax.to()等几个函数外，貌似还有很多这样那样fun stuffs。对于动画ease的控制，自己除了一个Back就不知道其他了。 总之一片惨淡, 所以趁着这个机会好好总结一下： 一，主要代码结构： com
JS实现前端动画效果（一）
TXC1664181211的博客
04-22 447
TimeLine学习笔记 介绍 GSAP是一个JavaScript库，用于在每个主要浏览器中构建高性能动画。动画CSS，SVG，画布，React，Vue，WebGL，颜色，字符串，运动路径，通用对象… JavaScript可以接触的任何东西！没有其他的库能够在解决数百万个站点上的实际问题的同时，提供如此高级的排序、可靠性和严格的控制。GSAP解决了无数浏览器不一致的问题，即可以在任何浏览器上运行动...
jQuery+TweenMax动画翻页倒计时js特效
ICode联盟
03-06 143
基于jQuery+TweenMax制作的动画翻页倒计时特效，项目上线倒计时网页特效下载。
tweenMax下载和使用
string佳佳的博客
09-26 1155
官网下载地址：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,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

JiangNanMax

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

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

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

打赏作者

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

抵扣说明：

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

余额充值