移动经过中心时,光滑的动画

Question

我正在使用光滑来制作这样的旋转木马:

我使用过这些设置:

{
    dots: false,
    slidesToShow: 3,
    focusOnSelect: true,
    swipeToSlide: true,
    centerMode: true,
    event: {
        init: scope.init
    }
}

这似乎让实际的动画工作得很好.下一部分(这是导致我问题的一点)是试图让" 点 "和文本以大小颜色设置动画.有谁知道我会怎么做呢？我正在尝试使用滑动方法,但问题是我正在滑动哪个项目最接近中心.

任何帮助将不胜感激.

---

更新

所以我设法做了一部分.我将init回调添加到选项中,并添加了一些代码来计算中心元素的位置及其大小.

// Extend our scope
angular.extend(scope, {
    init: function (e, slick) {

        // Get our dragable element
        var sizes = scope.options.sizes,
            draggableElement = element[0].getElementsByClassName('draggable')[0],
            centerElement = draggableElement.getElementsByClassName('slick-center')[0].childNodes[0];

        // Set the active dimensions and margins
        centerElement.style.width = sizes.finish + 'px';
        centerElement.style.height = sizes.finish + 'px';
        centerElement.style.borderRadius = sizes.finish / 2 + 'px';
        centerElement.style.marginTop = '0';
        centerElement.style.marginBottom = '0';

        slick.$list.on('touchmove.slick mousemove.slick', function () {
            _resizePoint(slick, this, sizes);
        });
    }
});

// Extend our options
angular.extend(scope.options, {
    event: {
        init: scope.init
    },
    sizes: {
        start: 18,
        finish: 50
    }
});


// Resizes the point
var _resizePoint = function (slick, container, sizes) {

    // Get our actual Width
    var containerPadding = parseInt(container.style.paddingLeft),
        containerWidth = container.offsetWidth - containerPadding * 2;

    // If we have a swipe left
    if (slick.swipeLeft) {

        // Get our slide index
        var center = containerWidth / 2,
            left = -slick.swipeLeft > 0 ? -slick.swipeLeft : slick.swipeLeft,
            distance = left + center,
            index = Math.floor(distance / slick.slideWidth);

        // Get the active element
        var activeElement = container.childNodes[0].childNodes[index].childNodes[0];

        // Get our start point
        var half = slick.slideWidth / 2,
            start = center - half,
            position = (index * slick.slideWidth) - left;

        // Get our dimensions 
        var startDimension = sizes.start,
            finishDimension = sizes.finish,
            startMargin = (finishDimension - startDimension) / 2

        // Get the percentage in relation to the center
        var percent = (center - position) / half,
            directionalPercent = position > start ? percent : 2 - percent,
            dimension = startMargin + ((finishDimension - startMargin) * directionalPercent),
            marginPercent = 1 - directionalPercent,
            margin = startMargin * marginPercent;

        // Apply our sizes to our element
        activeElement.style.width = dimension + 'px';
        activeElement.style.height = dimension + 'px';
        activeElement.style.borderRadius = dimension / 2 + 'px';
        activeElement.style.marginTop = margin + 'px';
        activeElement.style.marginBottom = margin + 'px';
    }
};

这在拖动时有效,但是当focusOnSelect为true时,单击某个项目不会调整它的大小.此外,使用导航箭头不起作用,最后当你放开拖动时,当它移动到中心时,也不会调整大小.

我希望覆盖animateSlide方法来插入我的代码,但我的代码在当前项位置上工作,我认为这不适用于animateSlide.

我现在已经添加了赏金,因为我认为有人可以帮助我.

更新2

我创建了一个codepen来说明我的问题.

http://codepen.io/r3plica/pen/vKPyxE?editors=1010

如果向左或向右拖动,可以看到"点"的大小增加和减小.但是如果你点击任何一个点,它就会直接移动而不会改变尺寸.

我希望这能解释我的问题:)

Answer 1

检查 这个代码面板演示

这里我对CSS文件和JS文件进行了更改

在 CSS 文件中，我添加了动画的 CSS 属性，并在当前幻灯片上制作了更大的圆圈。

.slick-slider .slick-slide .slider-point
{
  transition:  1s ease-in;
}

在 JS 文件中，我删除了一些代码，并根据文档中的事件部分添加了光滑滑块的回调

angular.module('slick', ['slickCarousel']).controller('MainController', function() {
    var self = this;
    self.items = [1, 2, 3, 4, 5];
}).directive('pkSlider', ['$timeout', function($timeout){
return {
    restrict: 'A',

    scope: {
        items: '=pkSlider',
        options: '='
    },

    templateUrl: 'assets/templates/pk-slider.html',

    link: function(scope, element){

        $timeout(function(){
            // Extend our options
            angular.extend(scope.options, {
                event: {
                // init: scope.init,
                init: function(event, slick){
                    // let's do this after we init the banner slider
                    sizes=slick.options.sizes;
                    var margin=(sizes.finish-sizes.start)/2;
                    $(slick.$slides[slick.initials.currentSlide]).find('.slider-point').css({
                        width: sizes.finish + 'px',
                        height: sizes.finish + 'px',
                        borderRadius: sizes.finish / 2 + 'px',
                        marginTop: '0',
                        marginBottom: '0'
                    });    
                },
                beforeChange: function(event, slick, currentSlide, nextSlide){

                    sizes=slick.options.sizes;

                    var margin=(sizes.finish-sizes.start)/2;

                    $(slick.$slides[currentSlide]).find('.slider-point').css({
                        width: sizes.start + 'px',
                        height: sizes.start + 'px',
                        borderRadius: sizes.start / 2 + 'px',
                        marginTop: margin+'px',
                        marginBottom: margin+'px'
                    });

                    $(slick.$slides[nextSlide]).find('.slider-point').css({
                        width: sizes.finish + 'px',
                        height: sizes.finish + 'px',
                        borderRadius: sizes.finish / 2 + 'px',
                        marginTop: '0',
                        marginBottom: '0'
                    })
                }
            },
            sizes: {
            start: 18,
            finish: 50
            }
        });
    });
}};
}]);