我正在尝试复制我在网上看到的一个设计，我在其中创建了一圈扑克牌并且可以拖动。当环被拖动时，卡片会随着旋转而上升和下降。我已经创建了卡片环并使用了可拖动的 js 来允许用户旋转环。我不确定如何添加顶部卡片的动画（大约 12 点钟位置）以使它们上升。查看屏幕截图。

可以在这里看到完整的动画。 CardsAnimation

到目前为止我有

JS

var wheel = $("#wheel");

var border = parseInt(wheel.css("border-width"));
var radius = Math.min(window.innerWidth,window.innerHeight) * 0.7 / 2;
var center = radius - border / 2;
var total  = 22;
var slice  = 2 * Math.PI / total;

TweenLite.set(wheel,{
  width:  (radius * 2) - border,height: (radius * 2) - border,xPercent: -50,yPercent: -50
});

for (var i = 0; i < total; i++) {
  createBox(i);
}

Draggable.create(wheel,{
  type: "rotation",throwProps: true,minimumMovement: 10,onClick: function(e) {    
    var num = e.target.dataset.num;    
    if (num) { info.text("Clicked Box " + num); }
  }
});

function createBox(i) {
    
  var num = i + 1;
  var hue = i / total * 360;  
  var angle = i * slice;
  
  var x = center + radius * Math.sin(angle);
  var y = center - radius * Math.cos(angle);
  
  var box = $("<div class='box' />").attr("data-num",num).text(num).appendTo(wheel);
  
  TweenLite.set(box,{
    backgroundColor: "hsl(" + hue + ",100%,50%)",rotation: angle + "_rad",yPercent: -50,x: x,y: y
  });
}

我相信这可以通过 TweenLite 或 gasp 来完成。我的代码笔在这里Codepen