当窗口宽度达到 865px 时重新启动绿袜 (JS) 动画
Restart greensock (JS) animation when window width reaches 865px
我正在使用js greensock动画库。我有一个动画,当您开始调整窗口大小时暂停,并在停止调整窗口大小时继续。
我现在正在尝试制作动画(重新开始)或从(某个点)如果窗口宽度在任一方向上超过 865px。
当前使用的代码"好的"工作,它在任一方向达到 865px 时刷新整个页面。但是,我只想"重新启动"动画,而不是重新加载整个页面。
这是一个有效的代码笔
这是我正在使用和引用的JS片段。
//Reload Animation if window width crosses over 865px either way.
var ww = $(window).width();
var limit = 865;
function refresh() {
ww = $(window).width();
var w = ww<limit ? (location.reload(true)) : ( ww>limit ? (location.reload(true)) : ww=limit );
}
var tOut;
$(window).resize(function() {
var resW = $(window).width();
clearTimeout(tOut);
if ( (ww>limit && resW<limit) || (ww<limit && resW>limit) ) {
tOut = setTimeout(refresh, 0);
}
});
谢谢!
无需刷新整个页面。有几种方法可以操作补间或时间轴。
如果你想从头开始玩它,最简单的方法是: myTimeline.restart()
或者,您可以更改进度并从该点播放动画: myTimeline.progress( myProgress )
占位符myProgress
可以0
标记开头,1
补间(或介于两者之间的任何数字)的结尾。因此,从一开始就播放它的代码如下所示:
myTimeline.progress( 0 ).play()
第三种方式是.play( time )
这与.progress()
相似,区别在于myProgress
是相对测量值,time
是绝对度量值。因此,如果myTimeline
的持续时间为 8 秒myTimeline.progress(0.5).play()
则结果与 myTimeline.play(4)
编辑:
这是你的笔的叉子。我相信它能满足您的需求:http://codepen.io/anon/pen/adqypP
您可以使用 TweenMax
或 TweenLite
调用重新启动并开始从头开始播放的 .restart()
。
API 信息在这里:https://greensock.com/docs/TweenMax/restart()
- 第节上的全页JS动画
- tween.js动画的奇怪行为
- 速度.js动画两个属性时持续时间不同
- d3.js动画径向图示例
- js动画不平滑
- 基于媒体查询的angular js动画无法调整窗口大小
- blast.js动画与jqueryui彩色动画
- 如何销毁popcorn.js动画
- 在桌面上向下滚动三个js动画,而不是在手机上
- Jasmine规格与Velocity.js动画失败$.Velocity.mock=true
- 为D3.js动画编写绑定的正确方法是什么
- sql到传单js动画标记
- 如何检测Tween.js动画完成
- 拉斐尔.js动画恢复()在片场失败
- 图表.js动画进度进度百分比
- 三个 js 动画形状
- 动态.js动画 包含形状和文本的多个组
- 三个js动画克隆网格
- 棱角分明.js动画
- 拉斐尔JS动画问题