返回介绍

.updateTo()

发布于 2020-01-04 14:05:34 字数 1712 浏览 1118 评论 0 收藏 0

.updateTo( vars:object, resetDuration:Boolean ) : *
更新动画的值即使动画正在运行中。updateTo()仅适合改变非插件值,因此如果你想改变插件属性(如CSSPlugin),这个方法不太适用,因为插件的计算方式较为复杂。例如{x:500}无效,需要写成{css: {x:500}}

//一个通用的JavaScript对象(不是DOM元素)
var obj = {x:0, y:0, age:18, weight:180} 
var tween = new TweenMax(obj, 2, {wide:100, high:200, age:40, weight:250}); 
//更新动画属性,并重新设定动画时长 
tween.updateTo({wide:300, high:0}, true); 
//更新动画属性,并使用剩余动画时长 
tween.updateTo({wide:300, high:0}, false); 

返回self。
.updateTo()适用于TweenMax

.updateTo()的参数

参数类型必填说明
varsobject需要更新的属性值。只需设置要更新的属性即可,不必输入全部属性
resetDurationBoolean(default = false) 更新后是否重新计算动画时长。如果动画已经开始并resetDuration是true,动画将重新计时

.updateTo() 示例

updateTo()改变CSSPlugin插件的例子

.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
  }
.green{
    background-color:#6fb936;
  }
input{
margin-top:30px;
display:block;
}
var myTween = TweenMax.to(".box", 3, {x:500, y:100 ,opacity:0.2, rotation:360})
resetBtn = document.getElementById("resetBtn");
resetBtn.onclick = function() {
    // 改变属性后动画时长重新计算3秒
    myTween.updateTo({css: {x:300, y:0, opacity:0.2, rotation:360}}, true);
}

.updateTo()返回值

.updateTo()的补充说明

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文