个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想在最后重复这个动画。重复();不适用于多个对象。它是使用 TweenMax (GSAP) 创建的。所有 div 都有 svg 图像，并且在 JS 中我为动画定义了 TweenMax.from 和 TweenMax.to 。
TweenMax.from(".chat", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut});
TweenMax.to(".chat", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:3})
TweenMax.from(".call", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut, delay:3});
TweenMax.to(".call", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:6})
TweenMax.from(".whatsapp", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut, delay:6});
TweenMax.to(".whatsapp", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:9}) .demo{
position: absolute;
top: 50%;
left: 50%;
}
.logo{
width: 66px;
}
.chat{
width: 31px;
margin: 17px;
}
.call{
width: 30px;
margin-top: 12px;
margin-left: 17px;
}
.whatsapp{
width: 35px;
margin-top: 14px;
margin-left: 17px;
}<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="demo"> <img class="logo" alt="circle" src="https://svgshare.com/i/7Ah.svg"/> </div>
<div class="demo"> <img class="chat" alt="chat" src="https://svgshare.com/i/798.svg"/> </div>
<div class="demo"> <img class="call" alt="call" src="https://svgshare.com/i/7B2.svg"/> </div>
<div class="demo"> <img class="whatsapp" alt="whatsapp" src="https://svgshare.com/i/7At.svg"/> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>最佳答案
您可以将整个内容放入一个函数中，该函数会在最终动画的完成时调用自身，如下所示:
const animation = () {
TweenMax.from(".chat", 0.7, {x:0, opacity:0, scale:0.1,
ease:Back.easeOut});
TweenMax.to(".chat", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:3})
TweenMax.from(".call", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut,
delay:3});
TweenMax.to(".call", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:6})
TweenMax.from(".whatsapp", 0.7, {x:0, opacity:0, scale:0.1,
ease:Back.easeOut, delay:6});
TweenMax.to(".whatsapp", 0.7, {x:0, scale:0, ease:Power2.easeOut, delay:9, onComplete: () => {animation()} })
}
但是最好的方法是在TimelineMax的构造函数中使用repeat: -1 .
关于javascript - TweenMax 重复 GSAP，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50946080/
25
4
0
我是 TweenMax.js 的新手，我正在尝试为元素的不透明度和位置设置动画。我想让元素在 0.5 秒内出现，而元素的水平移动应该在 2 秒内完成。 这是我迄今为止所完成的。 var tl = ne
我试图通过将鼠标悬停在另一个 div 中的链接上来更改带有边框的 div 的宽度，但悬停后不会将宽度返回到 0。 function over(){ TweenMax.to($(".grid-ite
我有这段代码可以为不透明度为 1 到 0 的对象设置动画。 但我想知道如何才能让这个 Action 无限重复，每 1 秒？ 有什么想法吗？ var tl = new TimelineMax();
当第一个动画完成后，我想在同一个目标上制作另一个动画。 var lnk = document.querySelector('#clickme'); var tl = new TimelineMax()
这是我的html代码: D e s i g n s 我正在尝试补间每个字母以像这样旋转: Tween
我今天刚听说 GSAP 并用它玩了将近 6 个小时(顺便说一句，这太棒了!)除了我想翻牌的时候，我把它全部搞定了，它的背面没有出现，我在网上搜索了一个有同样问题的帖子，但没有找到。 通过检查元素，我认
这是我第一次在 JavaScript 中使用 TweenMax。我正在尝试创建一个函数，该函数将创建一个具有圆 Angular 边缘的“卡片”，最终将保存图像和文本。现在我只想在我的一个标签内以一定的
这是我的 fiddle :DEMO 将鼠标悬停在卡片上会翻转卡片。如何在悬停在“信息”图标上时翻转卡片？ $(".cardWrapper").hover( function() { Twe
我正在处理一个不包含 jQuery 的 Angular TreeView 指令。我正在使用 TweenMax 打开和关闭树的分支。 TweenMax 似乎只适用于 id。我现在只能使用 id“list
如果我在 html 文件中编写脚本代码，动画就会起作用。但如果动画代码在js文件中，那就不行了。这是我的动画代码 $(document).ready(function(){ $(window)
我在 React 应用程序中使用 GSAP，在路线之间快速来回切换时遇到了大量空目标错误。 问题是我的动画比在 Macbook 上向左/向右滑动来后退/前进所需的时间更长，因此，当下一页加载时，旧动画
我试图让此页面上的图像同时旋转、缩放和更改不透明度，就像此网站上的某些图像一样； http://soyouwanttogotorisd.com/ 这是我的网站； http://www.duckling
我想在最后重复这个动画。重复();不适用于多个对象。它是使用 TweenMax (GSAP) 创建的。所有 div 都有 svg 图像，并且在 JS 中我为动画定义了 TweenMax.from 和
我在我的网站上使用 greensock gsap 制作动画。问题是在动画结束之前执行的回调。在下面的示例中，元素在动画一半的某处被删除。 TweenLite.to($(".flipper"), 2,
我尝试在 TweenMax 中完成动画之前停止动画。最初 div 顶部为“0px”。我将其动画设置为在 3 秒内到达顶部“90px”。如果我点击按钮我想停止它。如何获得？ TweenMax.t
我有这段代码，它基本上定义了一个在过渡结束时旋转图像的循环:http://jsfiddle.net/bolaoch8/k8XtU/1/ $('#avion').css('left', '0%'); v
我正在尝试制作类似幻灯片的基于 Web 的演示，并且正在尝试找出在幻灯片之间转换的最佳方式。 我最初使用的是 jQuery Animate()，但是发现一点都不流畅。我遇到了 GreenSock Tw
我是 GSAP 的新手。以下效果很好，背景图像之间会发生变化，但不确定如何加快速度，所以速度会更快一些。 JavaScript: var avatarAni = new TimelineMax({ p
我正在尝试使用 TweenMax 创建一个以随机顺序影响元素的 staggerTo() 动画，这意味着我不希望实际动画是随机的，而是它的顺序。 为此，我使用此函数获取所有我想要设置动画和随机播放的元素
我使用 Babel 的 ES6 transpiller 和 Tweenmax 作为我的动画库，它提供了一些存储缓动曲线的对象，例如 Back、Sine 等。 事实是，我也在使用 Eslint，并且这些
我是一名优秀的程序员,十分优秀！