自定义渐变转换的缓动方程

Easing equations for custom transitions 自动播放各种缓动函数效果。

canvas, ease

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1665
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// class TransitionValue is where the value manipulation with easing equations happen

class TransitionPoint {
    constructor(options) {
        this.index = options.index;
        this.offset = options.offset;
        this.fixedX = options.x;

this.values = [];

this.values["y"] = new TransitionValue({
            start: options.y,
            ease: options.ease
        });
    }

render() {
        for (var k in this.values) {
            this.values[k].render();
        }

return {
            x: this.fixedX,
            y: this.values["y"].value,
            progress: this.values["y"].progress
        }
    }

goto(value) {
        this.values["y"].update(value, 2 + (this.index * 0.1));
    }
}

class TransitionValue {
    constructor(options) {
        this.ease = options.ease;
        this.value = options.start;
        this.start = options.start;
        this.finish = options.start;
        this.totalEaseTime = 0;
        this.timeCounter = 0;
    }

get progress() {
        return this.timeCounter / this.totalEaseTime;
    }

update(value, timeOffset) {
        this.timeCounter = 0;
        this.start = this.finish;
        this.finish = value;

// ease time defined by distance, could be what ever..
        this.totalEaseTime = Math.sqrt(this.finish + this.start);
        this.totalEaseTime *= timeOffset;
        this.totalEaseTime = Math.floor(this.totalEaseTime);
    }

render() {
        if (this.timeCounter < this.totalEaseTime) {
            this.timeCounter++;
        }

this.value = this.ease(this.timeCounter, this.start, this.finish - this.start, this.totalEaseTime);
        this.value = this.value > this.finish ? Math.max(this.finish, this.value) : Math.min(this.finish, this.value);

return this;
    }
}

class Segment {
    constructor(options) {
        this.ctx = options.ctx;
        this.shapes = [];
        this.opacity = 1;

this.color = zIndexCount % 2 == 0 ? "#d4d9dc" : "#e0e2d4";
        this.alignment = zIndexCount % 2 == 0 ? "top" : "bottom";

this.progressValue = new TransitionValue({
            start: 0,
            ease: options.easing
        });

const numPoints = 30;
        this.progressValue.update(1, numPoints * 5);
        console.log(this.progressValue.totalEaseTime);

for (var i = 0; i < numPoints; i++) {
            const x = (i / (numPoints - 1)) * (viewport.right - viewport.left);
            const y = this.alignment == "top" ? (viewport.bottom - viewport.top) : 0;

this.shapes.push(new TransitionPoint({
                index: i,
                x: viewport.left + x,
                y: viewport.top + y,
                ease: options.easing
            }));

this.shapes[i].goto(options.currentY);
        }
    }

dealloc() {
        this.shapes = null;
    }

hide() {
        this.shouldHide = true;
    }

render() {
        const y = this.alignment == "top" ? viewport.bottom : viewport.top;
        const counterY = this.removing

this.ctx.beginPath();
        this.ctx.moveTo(viewport.left, y);

let animatePercent = 0;
        for (var i = 0; i < this.shapes.length; i++) {
            let vector = this.shapes[i].render();
            this.ctx.lineTo(vector.x, vector.y);
            animatePercent += vector.progress / this.shapes.length;
        }

if (animatePercent >= 1 && !this.animatedIn) {
            this.animatedIn = true;
            if (this == easeSegments[easeSegments.length - 1]) {
                removeOthers(this);
            }
        }

this.ctx.lineTo(viewport.right, y);
        if (this.shouldHide) {
            this.opacity += (0 - this.opacity) * 0.1;
            this.ctx.save();
            this.ctx.globalAlpha = this.opacity;
            this.ctx.fillStyle = this.color;
            this.ctx.fill();
            this.ctx.restore();
        } else {
            this.ctx.fillStyle = this.color;
            this.ctx.fill();
            this.ctx.closePath();
        }

const p = this.progressValue.render().value;
        const lineHeight = 5 * this.opacity;
        this.ctx.beginPath();
        this.ctx.rect(viewport.left, this.alignment == "top" ? viewport.bottom - lineHeight : viewport.top, p * (viewport.right - viewport.left), lineHeight);
        this.ctx.fillStyle = "#172a3a";
        this.ctx.fill();
    }
}

function generateSegment(easeType) {
    clearTimeout(autoTimer);
    currentY = viewport.top;
    currentY += zIndexCount % 2 == 0 ? 0 : viewport.bottom - viewport.top;

for (var i = 0; i < easeSegments.length; i++) {
        easeSegments[i].hide();
    }

easeSegments.push(new Segment({
        currentY: currentY,
        easing: getEasing(easeType),
        ctx: window.ctx
    }));

zIndexCount++;

window.resize();

autoTimer = setTimeout(() => {
        generateSegment();
    }, 3000);
}

const easeSegments = [];

let viewport;
let currentY = 0;
let easings;
let zIndexCount = 0;
let autoTimer = 0;
let easeCount = 21; // start with elastic
function getEasing(easeType) {
    if (!easeType) {
        easeType = easings[easeCount];
        easeCount = Math.floor(Math.random() * easings.length);
    }

const easing = RP_EASINGS[easeType];

const lis = document.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
        lis[i].classList.remove("selected");
    }

const li = document.querySelectorAll("li[easetype='" + easeType + "']")[0];
    li.classList.add("selected");

return easing;
}

function onEaseButtonClick(event) {
    const easeType = event.currentTarget.getAttribute("easetype");

generateSegment(easeType);
}

function removeOthers(Segments) {
    while (easeSegments.length > 1)
        easeSegments.shift().dealloc();
}

function render() {
    window.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

for (var i = 0; i < easeSegments.length; i++) {
        easeSegments[i].render();
    }

requestAnimationFrame(() => render());
};

window.onload = function() {
    // start..
    window.ctx = document.getElementsByTagName("canvas")[0].getContext("2d");
    easings = [
        "easeInQuad",
        "easeOutQuad",
        "easeInOutQuad",
        "easeInCubic",
        "easeOutCubic",
        "easeInOutCubic",
        "easeInQuart",
        "easeOutQuart",
        "easeInOutQuart",
        "easeInQuint",
        "easeOutQuint",
        "easeInOutQuint",
        "easeInSine",
        "easeOutSine",
        "easeInOutSine",
        "easeInExpo",
        "easeOutExpo",
        "easeInOutExpo",
        "easeOutCirc",
        "easeInOutCirc",
        "easeInElastic",
        "easeOutElastic",
        "easeInOutElastic",
        "easeInBack",
        "easeOutBack",
        "easeInOutBack",
        "easeInBounce",
        "easeOutBounce",
        "easeInOutBounce"
    ];

// build some ui
    const ul = document.getElementsByTagName("ul")[0];
    for (var k in easings) {
        const li = document.createElement("li");
        li.innerHTML = easings[k];
        li.setAttribute("easetype", easings[k]);
        ul.appendChild(li);

if (ul.children.length < Object.keys(easings).length) {
            const span = document.createElement("span");
            span.innerHTML = ",";
            li.appendChild(span);
        }

li.addEventListener("click", (event) => onEaseButtonClick(event), false);
    }

resize();

generateSegment();

render();
};

window.resize = () => {
    if (!document.body.classList.contains("ready"))
        document.body.classList.add("ready");
    viewport = {
        top: this.innerHeight * 0.15,
        bottom: this.innerHeight * 0.85,
        left: this.innerWidth * 0.15,
        right: this.innerWidth * 0.85
    };

const div = document.getElementsByTagName("div")[0];
    div.style.top = viewport.top + (viewport.top * 0.5) + "px";
    div.style.left = viewport.left + (viewport.top * 0.5) + "px";

const cnvs = document.getElementsByTagName("canvas");
    for (var i = 0; i < cnvs.length; i++) {
        cnvs[i].width = window.innerWidth * window.devicePixelRatio;
        cnvs[i].height = window.innerHeight * window.devicePixelRatio;
        cnvs[i].style.width = window.innerWidth + "px";
        cnvs[i].style.height = window.innerHeight + "px";

cnvs[i].getContext("2d").scale(window.devicePixelRatio, window.devicePixelRatio);
    }
}

window.addEventListener("resize", window.resize.bind(window), false);

// from the source http://robertpenner.com/easing/
const RP_EASINGS = {
    // t: current time
    // b: begInnIng value
    // c: change In value
    // d: duration

def: 'easeOutQuad',
    swing: function(t, b, c, d) {
        //alert(RP_EASINGS.default);
        return RP_EASINGS[RP_EASINGS.def](t, b, c, d);
    },
    easeInQuad: function(t, b, c, d) {
        return c * (t /= d) * t + b;
    },
    easeOutQuad: function(t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b;
    },
    easeInOutQuad: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    },
    easeInCubic: function(t, b, c, d) {
        return c * (t /= d) * t * t + b;
    },
    easeOutCubic: function(t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b;
    },
    easeInOutCubic: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
        return c / 2 * ((t -= 2) * t * t + 2) + b;
    },
    easeInQuart: function(t, b, c, d) {
        return c * (t /= d) * t * t * t + b;
    },
    easeOutQuart: function(t, b, c, d) {
        return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    },
    easeInOutQuart: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    },
    easeInQuint: function(t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b;
    },
    easeOutQuint: function(t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
    },
    easeInOutQuint: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
    },
    easeInSine: function(t, b, c, d) {
        return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
    },
    easeOutSine: function(t, b, c, d) {
        return c * Math.sin(t / d * (Math.PI / 2)) + b;
    },
    easeInOutSine: function(t, b, c, d) {
        return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
    },
    easeInExpo: function(t, b, c, d) {
        return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
    },
    easeOutExpo: function(t, b, c, d) {
        return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
    },
    easeInOutExpo: function(t, b, c, d) {
        if (t == 0) return b;
        if (t == d) return b + c;
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
    },
    easeInCirc: function(t, b, c, d) {
        return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
    },
    easeOutCirc: function(t, b, c, d) {
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
    },
    easeInOutCirc: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
    },
    easeInElastic: function(t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) return b;
        if ((t /= d) == 1) return b + c;
        if (!p) p = d * .3;
        if (a < Math.abs(c)) {
            a = c;
            s = p / 4;
        } else s = p / (2 * Math.PI) * Math.asin(c / a);
        if (isNaN(s)) s = 0;
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    },
    easeOutElastic: function(t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) return b;
        if ((t /= d) == 1) return b + c;
        if (!p) p = d * .3;
        if (a < Math.abs(c)) {
            a = c;
            s = p / 4;
        } else s = p / (2 * Math.PI) * Math.asin(c / a);
        if (isNaN(s)) s = 0;
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
    },
    easeInOutElastic: function(t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) return b;
        if ((t /= d / 2) == 2) return b + c;
        if (!p) p = d * (.3 * 1.5);
        if (a < Math.abs(c)) {
            a = c;
            s = p / 4;
        } else s = p / (2 * Math.PI) * Math.asin(c / a);
        if (isNaN(s)) s = 0;
        if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
    },
    easeInBack: function(t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    easeOutBack: function(t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    easeInOutBack: function(t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
    },
    easeInBounce: function(t, b, c, d) {
        return c - RP_EASINGS.easeOutBounce(d - t, 0, c, d) + b;
    },
    easeOutBounce: function(t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b;
        } else if (t < (2 / 2.75)) {
            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
        } else if (t < (2.5 / 2.75)) {
            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
        } else {
            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
        }
    },
    easeInOutBounce: function(t, b, c, d) {
        if (t < d / 2) return RP_EASINGS.easeInBounce(t * 2, 0, c, d) * .5 + b;
        return RP_EASINGS.easeOutBounce(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
    }
}

编译

CSS

body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 100;
}
body,
html {
    overflow: hidden;
}
body {
    opacity: 0;
}
body.ready {
    opacity: 1
}
h1 {
    color: #172a3a;
    text-transform: uppercase;
    font-size: 7vh;
    line-height: 1.433333333;
    margin-top: -1.4vw;
}
ul {
    margin: 0px;
    padding: 0px;
    max-width: 75%;
    color: #757575;
}
canvas {
    position: absolute;
    z-index: 0;
    top: 0%;
    left: 0%;
}
div {
    position: absolute;
    z-index: 1000000;
    text-align: left;
}
li {
    font-size: 3vh;
    border: 0px;
    display: inline-block;
    background: none;
    cursor: pointer;
    position: relative;
    transition: color 1s cubic-bezier(0.075, 0.820, 0.165, 1.000);
    letter-spacing: 0.1vw;
    line-height: 1.3;
    margin-right: 1vw;
}
li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: #172a3a;
    height: 1px;
    transition: transform 1s cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transform-origin: 0% 50%;
    transform: scale(0, 1);
}
li.selected {
    color: #172a3a;
}
li.selected:after {
    transform: scale(1, 1);
}

HTML

Easing equations for custom transitions 自动播放各种缓动函数效果。

canvas, ease

编辑器支持Emmet

快捷键

Easing equations for custom transitions 自动播放各种缓动函数效果。

canvas, ease

Canvas 复杂的立体几何变换动画

使用Canvas实现的渐变色绕边按钮悬停动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：