动画库 Tweenmax 使用示例2 - 事件和状态

最新推荐文章于 2024-09-01 13:30:36 发布
最新推荐文章于 2024-09-01 13:30:36 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： js jQuery 动画 TweenMax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scy881119/article/details/51500084
版权

在动画结束后触发onComplete

回调写在to()方法的第三个参数内

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 50px; }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/uncompressed/TweenMax.js"></script>
    <script>
        $(function () {
            //得到对象
            var t = new TimelineMax();
            //队列动画
            t.to("#div1", 1, {
                left: 300,
                width: 300,
                onComplete: function () {
                    alert("动画执行结束");
                }
            });
        });
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

在反向动画结束后触发onReverseComplete

回调写在to()方法的第三个参数内

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 50px; }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/uncompressed/TweenMax.js"></script>
    <script>
        $(function () {
            //得到对象
            var t = new TimelineMax();
            //队列动画
            t.to("#div1", 1, {
                left: 300,
                width: 300,
                onReverseComplete: function () {
                    alert("反向动画执行结束");
                }
            });
            //反向播放按钮
            $("#reverse").click(function () {
                t.reverse();
            });
        });
    </script>
</head>
<body>
    <input type="button" id="reverse" value="反向播放" />
    <div id="div1"></div>
</body>
</html>

给动画添加状态(标签)add(),使动画可以分段执行tweenTo()

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/uncompressed/TweenMax.js"></script>
    <script>
        $(function () {
            var t = new TimelineMax();

            //动画队列
            t.to("#div1", 1, { left: 300, width: 300 });
            t.to("#div1", 1, { width: 300 });
                //添加状态1
                t.add("state1");
            t.to("#div1", 1, { height: 300 });
            t.to("#div1", 1, { top: 300 });
                //添加状态2
                t.add("state2");
            t.to("#div1", 1, { rotationZ: 180 });
            t.to("#div1", 1, { opacity: 0 });
                //添加状态3
                t.add("state3");

            //先把动画停止
            t.stop();

            //指定动画执行到状态1
            t.tweenTo("state1");
        });
    </script>

</head>
<body>
    <div id="div1"></div>
</body>
</html>

在动画过程中方便的添加回调add()

add方法不但可以传入一个字符串作为状态标识,也可以传入一个回调函数

这个回调在add之前的动画执行完成后触发

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/uncompressed/TweenMax.js"></script>
    <script>
        $(function () {
            var t = new TimelineMax();

            //动画队列
            t.to("#div1", 1, { left: 300, width: 300 });
            t.to("#div1", 1, { width: 300 });

                //用add方法添加一个回调
                t.add(function () {
                    $("#div1").css("background","pink");
                });

            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>

</head>
<body>
    <div id="div1"></div>
</body>
</html>

运行动画至指定的时间(秒)tweenTo()

add方法不但可以传入一个字符串作为执行到哪个状态,也可以传入一个int

这个int描述将动画执行到第x秒

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/uncompressed/TweenMax.js"></script>
    <script>
        $(function () {
            var t = new TimelineMax();
            //动画队列
            t.to("#div1", 1, { left: 300, width: 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 });

            //执行动画到第三秒
            t.tweenTo(3);
        });
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

完成动画至指定的时间或状态seek()

tweenTo()是执行动画

seek()则是完成动画,没有过渡效果

seek()到某一状态

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/uncompressed/TweenMax.js"></script>
    <script>
        $(function () {
            var t = new TimelineMax();

            //动画队列
            t.to("#div1", 1, { left: 300, width: 300 });
            t.to("#div1", 1, { width: 300 });
                //添加状态1
                t.add("state1");
            t.to("#div1", 1, { height: 300 });
            t.to("#div1", 1, { top: 300 });
                //添加状态2
                t.add("state2");
            t.to("#div1", 1, { rotationZ: 180 });
            t.to("#div1", 1, { opacity: 0 });
                //添加状态3
                t.add("state3");

            //先把动画停止
            t.stop();

            //指定动画完成到状态2
            t.seek("state2");
        });
    </script>

</head>
<body>
    <div id="div1"></div>
</body>
</html>

seek()到某一时间

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/uncompressed/TweenMax.js"></script>
    <script>
        $(function () {
            var t = new TimelineMax();

            //动画队列
            t.to("#div1", 1, { left: 300, width: 300 });
            t.to("#div1", 1, { width: 300 });
                //添加状态1
                t.add("state1");
            t.to("#div1", 1, { height: 300 });
            t.to("#div1", 1, { top: 300 });
                //添加状态2
                t.add("state2");
            t.to("#div1", 1, { rotationZ: 180 });
            t.to("#div1", 1, { opacity: 0 });
                //添加状态3
                t.add("state3");

            //先把动画停止
            t.stop();

            //指定动画完成到第5秒
            t.seek( 5 );
        });
    </script>

</head>
<body>
    <div id="div1"></div>
</body>
</html>

在seek()下,动画其实也是每一行动画都依次执行了,只是没有过渡效果

seek()第二个参,是否跳过回调函数,默认为ture

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/uncompressed/TweenMax.js"></script>
    <script>
        $(function () {
            var t = new TimelineMax();

            //动画队列
            t.to("#div1", 1, {
                left: 300,
                width: 300,
                onComplete: function myfunction() {
                    alert("执行了回调");
                }
            });
            t.to("#div1", 1, { width: 300 });
                //添加状态1
                t.add("state1");
            t.to("#div1", 1, { height: 300 });
            t.to("#div1", 1, { top: 300 });
                //添加状态2
                t.add("state2");
            t.to("#div1", 1, { rotationZ: 180 });
            t.to("#div1", 1, { opacity: 0 });
                //添加状态3
                t.add("state3");

            //先把动画停止
            t.stop();

            //指定动画完成到state2,且不跳过回调
            t.seek("state2", false);
        });
    </script>

</head>
<body>
    <div id="div1"></div>
</body>
</html>
孙冲翼
关注
专栏目录
gsap_demo:Vue 中使用 GSAP（专业的 web 动画库，包含：TweenLite.js、TweenMax.js、TimelineLite.js和TimelineMax.js）
05-19
GSAP（GreenSock Animation Platform），专业的 web 动画库，github地址： 官方地址： github 地址： 比较好的介绍文章： 。 A Vue.js project Build Setup # install dependencies npm install # serve with hot ...
TweenMax湖面上logo倒影引导页动画特效
06-11
总结起来，"TweenMax湖面上logo倒影引导页动画特效"是一个利用TweenMax库和HTML/CSS/JavaScript技术实现的高级网页动画示例。它展示了如何通过编程技巧创造出引人入胜的视觉效果，为用户提供更加丰富和互动的浏览...
tweenMax多个一起运动
yhwcool的博客
09-21 961
staggerFromTo函数 staggerFrom函数 staggerTo函数 cycle: {  //多个操作 循环等      x: [100,200,300] } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&am
tweenMAX 快速开发tween动画
topfire7的专栏
05-27 715
 使用可视化的编辑界面，生成对应效果，直接复制代码即可使用
使用TweenMax.js和CSS3创建冰球运动员动画效果教程
最新发布
weixin_42613017的博客
09-01 1559
本文还有配套的精品资源，点击获取 简介：本资源提供了一个用TweenMax.js和CSS3技术创建的冰球运动员打冰球动画效果的项目。 TweenMax.js是一个强大的JavaScript库，用于实现平滑动画，而CSS3则支持动画、过渡和3D变换等特性。开发者可利用这些工具创建动态的冰球动画，通过"使用须知.txt"了解安装和代码使用指南，并通过"***"文件中的源代码进行...
TweenMax（二）按钮点击小动画
Lee的博客
11-08 1919
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/TweenMax.js" &g
ScrollMagic结合TweenMax的Demo
HYEHYEHYE的博客
11-15 748
ScrollMagic是一款可以把滚动条当进度条用的jquery插件，ScrollMagic + GSAP的组合可以制作炫酷动画，TweenMax是GSAP中功能最全的一个库 ​ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ScrollMagic-GSAP</title> <script src="https
html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效
weixin_39843215的博客
06-03 318
8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效，支持英文字母和中文汉字。查看演示下载资源：14次 下载资源下载积分：20积分js代码 const letterWrapClass = 'letter-wrap';const letterWrapElements = document.getElementsB...
使用Three.js+TweenMax的简单示例源码.zip
01-07
而TweenMax则是一个强大的JavaScript动画库，能够帮助我们轻松地创建平滑的过渡效果和动画序列。 首先，我们要理解Three.js的基础概念。Three.js提供了一个框架，包括场景（Scene）、相机（Camera）和渲染器...
基于TweenMax的炫酷页面切换动画特效
12-10
TweenMax是一种强大的JavaScript动画库，由GreenSock公司开发，它为网页开发者提供了简单而高效的动画控制。在"基于TweenMax的炫酷页面切换动画特效"中，我们可以深入了解如何利用这个库来实现动态、吸引人的用户...
一个基于WebGL和TweenMax实现的装饰动画背景形状集合
08-11
标题中的“一个基于WebGL和TweenMax实现的装饰动画背景形状集合”表明这是一个关于WebGL图形渲染和TweenMax动画库的项目，主要用于创建动态、视觉吸引人的网页背景元素。WebGL是一个JavaScript API，用于在任何兼容...
网页模板——TweenMax.js+svg实现漂亮的农场风车风景动画效果源码.zip
11-23
网页模板——TweenMax.js+svg实现漂亮的农场风车风景动画效果源码
TweenMax.js+jQuery弹性滑动动画进度条特效.zip
09-21
TweenMax.js+jQuery弹性滑动动画进度条特效.zip
jQuery和TweenMax简单实用的水平手风琴特效
12-11
这是一款使用jQuery和TweenMax制作的简单实用的水平手风琴特效插件。该手风琴特效插件通过简单的设置和添加样式即可使用，非常简洁大方。
html5液晶灯管照亮发光动画特效
06-11
html5基于TweenMax绘制的液晶灯管照亮发光动画特效，跟随鼠标左右移动，照亮的背景网格线条更加清晰。
TweenMax动画库学习
weixin_30466039的博客
11-19 161
之前在做HTML5移动端开发的时候，用的都是Animate.css,这个插件封装的的确很好，但是在做一些缓动方面的动画，它也有一定的不足之处，比如手要写一个连续的动画，需要不停的去重复写函数，使得代码严重的冗余，再比如要获取动画执行的时间，就比较的麻烦等等。而TweenMax恰恰可以解决这方面的不足。于是我认真的学习了TweenMax动画库的用法，现在将个人的学习总结如下，若有不正确的地方，欢迎读...
一款基于TweenMax跟随鼠标单击移动的div
weixin_34261415的博客
11-19 153
前面给大家分享过 一款基于jquery ui漂亮的可拖动div实例，今天给大家分享一款基于TweenMax跟随鼠标单击移动的div。在这款实例中你可以单击任意位置，div会移动到你单击的位置。效果图如下： 在线预览   源码下载 实现的代码。 html代码： &lt;html ng-app="app" ng-click="moveblock($event)"&gt; &...
TweenMax使用说明
weixin_33671935的博客
05-25 475
一，主要代码结构：com.greensock包里面，首先最主要的就是TweenMax.as；然后一个常用的是 com.greensock.easing.*;里面包含了15个缓动，下文再一一介绍；另外一个是 com.greensock.events.TweenEvent，不过感觉不太常用；每一个TweenMax方法大多都会返回一个TweenMax的实例 -- 即下文所说的Twe...
Tweenmax.js 绳索动画效果
小九的博客
06-12 2739
html: class="fibers"> //引入Tweenmax.js文件 javascript:var st=0; TweenMax.set('.fibers',{ repeat:-1, backgroundPosition: '0px 0px',ease:Linear.easeNone,onComplete: function () { for (v
使用TweenMax.js和SVG制作弹性熊猫动画教程
***eenMax.js：TweenMax是GreenSock动画平台（GSAP）中强大的时间线动画库，广泛用于创建高级动画效果。它支持SVG动画，使得动画师和开发者能够轻松创建平滑的交互动画。在这个资源中，TweenMax被用于实现一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值