PhysicsPropsPlugin

TweenMax没有包含PhysicsPropsPlugin。

物理效果插件，可设置速度、加速度、摩擦力。有时在特定速度和加速度下动画一个数值而不用考虑最终值时可以使用PhysicsPropsPlugin。PhysicsPropsPlugin 让你补间动画对象的任何数字属性。如果你同时定义了physicsProps 和其他属性，那么后定义的设置将会被忽略。

动画关键词：physicsProps

TweenLite.to(mc, 2, {physicsProps:{
     x:{velocity:100, acceleration:200},
     y:{velocity:-200, friction:0.1}
   }
});
  • HTML
  • CSS
  • JS
  • 展示



加速度和摩擦力演示






.box {
    width:50px;
    height:50px;
    border-radius:6px;
    margin-top:4px;
    display:inline-block
  }
.green{
    background-color:#6fb936;
  }
.orange {
  background-color:#f38630;
}  


//x和y会被忽略
TweenLite.to(".green", 6, {
   physicsProps:{
     x:{velocity:30, acceleration:200},
     y:{velocity:60, friction:0.002}
   },
   x:100,
   y:50,
});

//physicsProps会被忽略
TweenLite.to(".orange", 6, {
   x:100,
   y:50,
   physicsProps:{
     x:{velocity:30, acceleration:200},
     y:{velocity:60, friction:0.002}
   }  
});
重播

PhysicsPropsPlugin 参数

参数 类型 必填 说明
velocity Number 是 速度：以秒为单位动画对象的初始速度（如果useFrames为true，则以帧为单位）。默认值：0
acceleration Number 否 加速度：应用到对象的加速度，以秒为单位（如果useFrames为true，则以帧为单位）。默认值：0
friction Number 否 摩擦力：介于0和1之间的值，其中0表示无摩擦，0.08表示少量摩擦，1表示完全阻止任何运动。默认值：0