DirectionalRotationPlugin文档

TweenMax包含了DirectionalRotationPlugin。

将任何与rotation(旋转)相关的属性补间到特定方向上的另一个值,可以是顺时针("_cw"后缀),逆时"_ccw"后缀),也可以是最短方向("_short"后缀),在这种情况下,插件会根据你的最短路径为你选择方向。


var obj = {rotation:45}; 
 
//顺时针方向365体育官网-ribo88_365手机体育投注_365体育在线国外网址到270位置
TweenLite.to(obj, 1, {directionalRotation:"270_cw"}); 
 
//逆时针方向365体育官网-ribo88_365手机体育投注_365体育在线国外网址到270位置(-90度,看下面DEMO)
TweenLite.to(obj, 1, {directionalRotation:"270_ccw"});
 
//最短距离(在这里是逆时针)
TweenLite.to(obj, 1, {directionalRotation:"270_short"});

您还可以使用 "+=""-=" 前缀来指示相对值。

默认情况下,directionalRotation假定你正在尝试补间目标的"rotation"属性,但你可以通过传递对象来定义任何旋转属性名称(包括多重属性),如下所示:

//365体育官网-ribo88_365手机体育投注_365体育在线国外网址obj.rotationX和obj.rotationY
TweenLite.to(obj, 1, {directionalRotation:{rotationX:"-140_cw", rotationY:"70_short"}, ease:Power2.easeIn});

DirectionalRotationPlugin的功能内置于CSSPlugin中,因此如果你只想补间DOM元素的css相关属性,则无需单独加载DirectionalRotationPlugin插件。

  • HTML
  • CSS
  • JS
  • 展示

从45反方向(ccw)补间到270(-90)

var header = document.querySelector("h1");
var obj = {rotation:45}; 
TweenLite.to(obj, 5, {directionalRotation:"270_ccw", roundProps:"directionalRotation", onUpdate:function() {
    header.innerHTML = obj.rotation;
  }}); 
重播