Question

我为水平卷轴创建了一个原型，它将以动画方式选择获胜者。我希望通过以编程方式突出显示指标下的所选图像来改善这一点。我已经想出如何让它滚动到我想要的地方，但是我无法弄清楚如何在赢得它之后以编程方式选择图像。

目前正在使用：

HTML
CSS
的jQuery
GSAP TimeLineMax

工作示例：http://codepen.io/ByteKnight13/pen/950a1a0d277fc0204d1827120bdcc090/

当前代码：

if (!String.prototype.format) {
    String.prototype.format = function () {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function (match, number) {
            return typeof args[number] != 'undefined'
                ? args[number]
                : match;
        });
    };
}
$(window).load(function () {
    console.log('Window loaded!');

    var $roulette = $('#roulette-images-list');
    $roulette.html(generateRouletteImages(200));

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function getPositionOfWinner(winner) {
        var widthOfImg = $('#roulette-img0').width();
        var minDistanceToEdgeAllowed = 4;

        var desiredImg = $('#roulette-img' + winner.toString());

        var minPos = desiredImg.position().left + minDistanceToEdgeAllowed;
        var maxPos = desiredImg.position().left + widthOfImg - minDistanceToEdgeAllowed;

        console.log('Position.Left: {0} | Offset().left: {1}'.format(desiredImg.position().left, desiredImg.offset().left));
        return getRandomInt(minPos, maxPos);
    }

    function printLeftOfRouletteSpinner() {
        var pos = $('#roulette-images-list').position().left;
        if (pos % 100 == 0) console.log(pos);
    }

    function rouletteSpin(destImg) {
        if (!destImg) destImg = 40;
        var tl = new TimelineMax({onUpdate: printLeftOfRouletteSpinner}),
            rouletteImages = $('#roulette-images-list'),
            startLeft = rouletteImages.position().left;

        tl//.to(rouletteImages, 0, {x: 5000})
            .to(rouletteImages, 10, {x: getPositionOfWinner(destImg) * -1, ease:Power4.easeOut})
            .to(rouletteImages, 0, {x: 0}, 11);
    }

    $('#spin').click(function () {
        var winner = $('#winner-text').val();
        //if (isNaN(winner) || winner > 49) alert('Enter 0 through 49');
        rouletteSpin(winner);
    });

    function getRandomColor() {
        return ((1 << 24) * Math.random() | 0).toString(16)
    }

    function generateRouletteImages(howMany) {
        var imgTemplate = '<img src="{0}" class="{1}" id="roulette-img{2}">';
        var imgClass = 'roulette-img';
        var imgSrcTemplate = 'http://placehold.it/{0}/{1}?text={2}';

        var completedRouletteImages = [];
        for (var i = 0; i < howMany; i++) {
            var color = getRandomColor();
            var imgSrc = imgSrcTemplate.format('80', color, i);
            var completedTemplate = imgTemplate.format(imgSrc, imgClass, i);
            completedRouletteImages.push('<li>' + completedTemplate + '</li>');
        }
        return completedRouletteImages;
    }
});

Answer 1

TimelineMax上有onComplete个参数。将其与onCompleteParams参数相结合，您可以将获胜者图片引用传递给onComplete回调。

new TimelineMax({
     onComplete: timelineFinished, 
     onCompleteParams: [ destImg ]
})

function timelineFinished(destImg){
    // this is where you highlight your winner
    $('#roulette-img' + destImg).css({
      border: '3px solid red'
    });
  }

此外，轮盘赌在完成旋转后重置，所以我删除了最后一个：.to(rouletteImages, 0, {x: 0}, 11)

这是一个相当粗略的选择，但您可以使用一些CSS或任何您想要实现的目标来清理它。

工作示例： http://codepen.io/kingkode/pen/EyKwJW

改进现有的水平“轮盘”滚轮

1 个答案: