问题描述
我正在尝试复制我在网上看到的一个设计,我在其中创建了一圈扑克牌并且可以拖动。当环被拖动时,卡片会随着旋转而上升和下降。我已经创建了卡片环并使用了可拖动的 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
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)