上滑跑马灯

时间 2019-11-07

标签马灯繁體版

原文原文链接

前言

产品说，咱们作一个转盘活动吧，须要轮播中奖信息。固然这需求彻底没有问题。
产品说，你听我说完。css

是从下往上轮播
如何数据没有更新，就反复轮播。
若是数据有更新，要无缝更新。
进入时间1s，暂停1S，出去时间1s.

没问题吧。
额，等等，没多大问题。那个谁，这个任务教你啦。css3

方案

而后，个人同事开始搜罗实现方案，不少都是匀速走的。
同事甚至和产品讨论要不要换成跑马灯，嘻嘻，开玩笑。
说个笑话，csdn上有很多的这样代码，可是下载要积分，我能够说，日了*狗么！。git

一个下午天气晴，有凉风，心情还好。因而花了一点时间思考了一种方案。github

关于移动端动画，无非是纯js控制，js Animation API(兼容不理想)， css动画，canvas, webgl以及杂交方案。关于本需求，前两种应该比较适合，成本低，容易实现。web

纯js实现控制比较传统的方案，要启用定时器setTimeout/setInterval/requestAnimation等等，我很烦这。canvas

采用css3 + js杂交方案，有戏靠谱。既然有三个阶段，那么我就把你拆成三段动画，随你去配置，随你去high。固然你也能够用一段动画，经过设置来控制距离。app

总体的思路ide

我把每一个须要滚动的每一个元素独立起来，每一个元素有三段动画， in , pause , out. 怎么衔接，经过animationend事件。
那么不一样元素又怎么衔接，经过animationDelay来延时启动动画，启动后依旧是走上面的三段动画。
怎么轮回播放，固然你能够利用原来的节点，从新修改属性，设置延时启动。我这里采用比较简单的，直接删除了原有，而后从新建立。固然从新建立是有讲究的，你有不少选择，只要控制好衔接的事件，我这里是在最后一个节点开始第一阶段运动的时候，从新建立新节点，最后节点第三阶段运动结束，清除以前运动完毕的节点
关于无缝更新，固然要让最后一个运动的元素运动完，因此我在第二个阶段 pause阶段执行新的节点建立，并设置好相关的延时。
关于暂停能力， animationPlayState提供这个能力，paused和running。暂停的手，animationDelay也会中止计时，很是的棒。由于懒，只实现了PC的暂停能力。移动端嘛，添加touch,tap,pointer事件就好。由于懒，因此。

改进动画

每一个元素三个动画，是有点消耗。能够用一个大的容器放好全部的元素，而后animationPlayState来控制，蛮不错的。如何控制每一个阶段的计时呢，固然能够用js，我有个想法，就是起一个三段动画，在这个事件里面去控制animationPlayState。
节点也没回收利用，是有点浪费。
移动端的支持呢？
不过重要的其余......

效果呢？

怎么使用呢？

const contents = [
            "队列1：春天 - first",
            "队列1：夏天",
            "队列1：秋天",
            "队列1：冬天",
            "队列1：夏夏湉",
            "队列1：求七天",
            "队列1：Who are You - last"
        ];
        const contents2 = [
            "队列2：这是怎么回事 - first",
            "队列2：谁是最可赖的人",
            "队列2：壮士一去不复返",
            "队列2：谁来拯救你",
            "队列2：家福乐团购有没有 - last"
        ]

        const el = document.querySelector("#box");

        let upSlide = new UpSlide({
            el
        });
        upSlide.start(contents);

        document.getElementById('btnChange').addEventListener("click", () => {
            upSlide.start(contents);
        })

        document.getElementById('btnChange2').addEventListener("click", () => {
            upSlide.start(contents2);
        })

源码呢？

等等这个有点用，源码呢
上滑跑马灯源码webgl

再贴出源码，这样文章长一点

const DEFAULT_OPTION = {
    inTime: 1000,
    pauseTime: 1500,
    outTime: 1000,
    className: "upslide-item",
    animationClass: "upslide-item-animation",
    animationInClass: "slideup-animation-in",
    animationPauseClass: "slideup-animation-pause",
    animationOutClass: "slideup-animation-out",
    pauseOnFocus: false
};

const DELETING_CLASS_NAME = "__deleting__";

function clearSiblings(el) {
    const parent = el.parentElement;
    // 移除前面节点
    while (el.previousElementSibling) {
        parent.removeChild(el.previousElementSibling);
    }
    // 移除后面的节点
    while (el.nextElementSibling) {
        parent.removeChild(el.nextElementSibling);
    }
}

class UpSlide {
    constructor(options) {
        this.el = options.el;
        this.options = Object.assign({}, DEFAULT_OPTION, options);
        this.changeStatus = 0;
        this.currentContents = null;

        const { inTime, pauseTime, outTime } = this.options;
        this.totalTime = inTime + pauseTime + outTime;
        this.inPausePercent = (inTime + pauseTime) / this.totalTime;
        this.animationstartEvent = this.animationstartEvent.bind(this);
        this.animationendEvent = this.animationendEvent.bind(this);
        this.mouseenterEvent = this.mouseenterEvent.bind(this);
        this.mouseleaveEvent = this.mouseleaveEvent.bind(this);
        this.init();
    }

    createItems(datas, baseDelay = 0) {
        const { className, animationInClass, animationClass, inTime } = this.options;
        const { totalTime, inPausePercent } = this;
        const fragment = document.createDocumentFragment();
        datas.forEach((c, i) => {
            const newEl = document.createElement("div");
            newEl.dataset.isLast = i === datas.length - 1 ? 1 : 0;
            newEl.innerText = c;
            newEl.className = className + " " + animationClass;
            newEl.style.animationName = animationInClass;
            newEl.style.animationDelay = baseDelay + i * totalTime * inPausePercent + "ms";
            newEl.style.animationDuration = inTime + "ms";
            fragment.appendChild(newEl);
        });
        return fragment;
    }

    animationstartEvent(e) {
        const { totalTime, inPausePercent } = this;
        const { animationInClass } = this.options;
        // 开启新的轮回
        if (e.animationName === animationInClass && e.target.dataset.isLast == 1) {
            this.innerStart(this.currentContents, totalTime * inPausePercent);
        }
    }

    animationendEvent(e) {
        const {
            animationInClass,
            animationPauseClass,
            animationOutClass,
            className,
            animationClass,
            pauseTime,
            outTime
        } = this.options;

        const { changeStatus } = this;
        const el = e.target;
        const parent = el.parentElement;
        const animationName = e.animationName;

        switch (animationName) {
            case animationInClass:
                el.style.animationName = animationPauseClass;
                el.style.animationDuration = pauseTime + "ms";
                el.style.animationDelay = "0ms";
                break;
            case animationPauseClass:
                el.style.animationName = animationOutClass;
                el.style.animationDuration = outTime + "ms";
                el.style.animationDelay = "0ms";

                // 切换
                if (changeStatus === 1) {
                    clearSiblings(el);
                    // 标记
                    el.classList.add(DELETING_CLASS_NAME);
                    // 切换
                    this.innerStart(this.currentContents, 0);
                    this.changeStatus = 0;
                }
                break;
            case animationOutClass:
                e.target.classList.remove(animationClass);
                e.target.style.animationDelay = "";

                if (el.classList.contains(DELETING_CLASS_NAME)) {
                    parent.removeChild(el);
                }
                // 轮回结束-清除节点
                if (e.target.dataset.isLast == 1) {
                    const parent = e.target.parentElement;
                    const delItems = parent.querySelectorAll(
                        `.${className}:not(.${animationClass})`
                    );
                    if (delItems.length > 0) {
                        for (let i = delItems.length - 1; i >= 0; i--) {
                            parent.removeChild(delItems[i]);
                        }
                    }
                }
                break;
            default:
                break;
        }
    }

    mouseenterEvent() {
        const { className } = this.options;
        this.el.querySelectorAll("." + className).forEach(el => {
            el.style.animationPlayState = "paused";
        });
    }

    mouseleaveEvent() {
        const { className } = this.options;
        this.el.querySelectorAll("." + className).forEach(el => {
            el.style.animationPlayState = "running";
        });
    }

    init() {
        const { el } = this;
        el.addEventListener("animationstart", this.animationstartEvent);
        el.addEventListener("animationend", this.animationendEvent);
        const { pauseOnFocus } = this.options;
        if (pauseOnFocus === true) {
            el.addEventListener("mouseenter", this.mouseenterEvent);
            el.addEventListener("mouseleave", this.mouseleaveEvent);
        }
    }

    innerStart(content, delay = 0) {
        this.currentContents = content;
        const c = this.createItems(content, delay);
        this.el.appendChild(c);
    }

    start(content, delay = 0) {
        if (this.currentContents != null) {
            this.changeStatus = 1;
            this.currentContents = content;
            return;
        }
        this.innerStart(content, delay);
    }

    destroy() {
        this.el.removeEventListener("animationstart", this.animationstartEvent);
        this.el.removeEventListener("animationend", this.animationendEvent);
        const { pauseOnFocus } = this.options;
        if (pauseOnFocus === true) {
            el.removeEventListener("mouseenter", this.mouseoverEvent);
            el.removeEventListener("mouseleave", this.mouseleaveEvent);
        }
        this.el.innerHTML = null;
        this.el = null;
        this.options = null;
    }
}