基于Vue实现的色彩渐变步进动画

Vue.js based Visual Steps

vue, color, app

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const vueMixinColorFunctions = {
    created: function() {
        // console.log('color mixin called')
    },
    methods: {
        randomHex() {
                return '#' + ('00' + Math.floor(Math.random() * 16777216).toString(16)).substr(-6)
            },
            hexArray(hex) {
                return /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
            },
            rgbObjectFromHex(hex) {
                var result = this.hexArray(hex)
                return result ? {
                    r: parseInt(result[1], 16),
                    g: parseInt(result[2], 16),
                    b: parseInt(result[3], 16),
                } : null;
            },
            rgbArrayFromHex(hex) {
                const rgb = this.rgbObjectFromHex(hex)
                return [rgb.r, rgb.g, rgb.b]
            },
            hslObjectFromHex(hex) {
                const hsl = {}
                const rgb = this.rgbObjectFromHex(hex)

rgb.r /= 255, rgb.g /= 255, rgb.b /= 255
                let max = Math.max(rgb.r, rgb.g, rgb.b)
                let min = Math.min(rgb.r, rgb.g, rgb.b)

hsl.l = (max + min) / 2

if (max == min) {
                    hsl.h = hsl.s = 0 // achromatic
                } else {
                    let d = max - min

hsl.s = hsl.l > 0.5 ? (d / (2 - max - min)) : (d / (max + min))

switch (max) {
                        case rgb.r:
                            hsl.h = (rgb.g - rgb.b) / d + (rgb.g < rgb.b ? 6 : 0)
                            break
                        case rgb.g:
                            hsl.h = (rgb.b - rgb.r) / d + 2
                            break
                        case rgb.b:
                            hsl.h = (rgb.r - rgb.g) / d + 4
                            break
                    }

hsl.h /= 6;
                }

return {
                    h: Math.round(hsl.h * 360),
                    s: Math.round(hsl.s * 100),
                    l: Math.round(hsl.l * 100),
                }
            },
            hslArrayFromHex(hex) {
                const hsl = this.hslObjectFromHex(hex)
                return [hsl.h, hsl.s, hsl.l]
            },
            hexToRgb(hex) {
                const rgb = this.rgbObjectFromHex(hex)
                return `rgb(${rgb.r},${rgb.g},${rgb.b})`
            },
            hexToHsl(hex) {
                const hsl = this.hslObjectFromHex(hex)
                return `hsl(${hsl.h},${hsl.s}%,${hsl.l}%)`
            },
            rgbChannelToHex(channel) {
                const hex = channel.toString(16)
                return hex.length == 1 ? `0${hex}` : hex
            },
            rgbToHex(r, g, b) {
                return `#${this.rgbChannelToHex(r)}${this.rgbChannelToHex(g)}${this.rgbChannelToHex(b)}`
            },
            rgbArrayToHex(color) {
                return this.rgbToHex(color[0], color[1], color[2])
            },
            hexToHsl(hex) {
                const hsl = this.hslObjectFromHex(hex)
                return `hsl(${hsl.h},${hsl.s}%,${hsl.l}%)`
            },
            hslToRgbObject(h, s, l) {
                var r, g, b;

if (s == 0) {
                    r = g = b = l; // achromatic
                } else {
                    var hue2rgb = function hue2rgb(p, q, t) {
                        if (t < 0) t += 1;
                        if (t > 1) t -= 1;
                        if (t < 1 / 6) return p + (q - p) * 6 * t;
                        if (t < 1 / 2) return q;
                        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                        return p;
                    }

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                    var p = 2 * l - q;
                    r = hue2rgb(p, q, h + 1 / 3);
                    g = hue2rgb(p, q, h);
                    b = hue2rgb(p, q, h - 1 / 3);
                }

return {
                    r: Math.round(r * 255),
                    g: Math.round(g * 255),
                    b: Math.round(b * 255)
                }
            },
            hslToRgb(h, s, l) {
                const rgb = this.hslToRgbObject(h, s, l)
                return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
            },
            hslToHex(h, s, l) {
                const rgb = this.hslToRgbObject(h, s, l)
                return this.rgbToHex(rgb.r, rgb.g, rgb.b)
            },
            brightness(hex) {
                const rgb = this.rgbObjectFromHex(hex)
                return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
            },
            foregroundAdjust(hex, test, lightHex, darkHex) {
                test = test || 154
                lightHex = lightHex || '#fff'
                darkHex = darkHex || '#000'
                return this.brightness(hex) < test ? lightHex : darkHex
            },
            interpolateColor(color1, color2, factor) {
                if (arguments.length < 3) {
                    factor = 0.5
                }
                const result = color1.slice()

for (var i = 0; i < 3; i++) {
                    result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]))
                }
                return result
            },
            interpolateColors(color1, color2, steps) {
                let stepFactor = 1 / (steps - 1)
                let interpolatedColorArray = []

color1 = this.rgbArrayFromHex(color1).map(Number)
                color2 = this.rgbArrayFromHex(color2).map(Number)

for (var i = 0; i < steps; i++) {
                    interpolatedColorArray.push(this.interpolateColor(color1, color2, stepFactor * i))
                }

return interpolatedColorArray
            }
    },
}

// Vue use like:
// mixins: [vueMixinColorFunctions],

let vm = new Vue({
    el: 'main',
    mixins: [vueMixinColorFunctions],
    data: {
        min: 3,
        max: 27,
        delta: 10,
        steps: 10,
        color1: '#0ebeff',
        color2: '#ff42b3',
    },
    computed: {
        colors() {
                return this.interpolateColors(this.color1, this.color2, this.steps)
            },
            visualSteps() {
                return (this.steps - 2)
            },
            visualStepsLabel() {
                return (this.visualSteps === 1 ? 'step' : 'steps')
            },
    },
    // mounted () {
    //   this.$el.addEventListener('mousewheel', (event) => {
    //     this.steps = this.scrollShift(event)
    //   })
    // },
    methods: {
        adjust(color) {
                const hex = this.rgbToHex(color[0], color[1], color[2])
                return this.foregroundAdjust(hex)
            },
            setStyles(color) {
                return `background: rgb(${color}); color: ${this.adjust(color)}`
            },
            colorName(color) {
                return this.rgbArrayToHex(color)
            },
            // scrollShift (event) {
            //   this.delta = Math.max(this.min, Math.min(this.max, this.delta + Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)))))
            //   return this.delta
            // }
    }
})

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Work+Sans:300");
:root {
    --fg: #fff;
    --bg: #000;
}
.tools {
    flex: 1;
    padding: 2em;
    color: #fff;
}
.tools div {
    display: flex;
    position: relative;
}
.tools div + div {
    margin-top: .5em;
}
.tools .steps {
    position: absolute;
    top: 50%;
    left: 6em;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding: 0;
    margin: 0;
}
.colors {
    flex: 2;
    display: flex;
    flex-direction: column;
    font-size: .85em;
}
.colors .color {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 1em;
    transition: 300ms linear;
}
.vertical-range {
    display: flex;
    align-items: center;
    width: 9em;
    height: 9em;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.steps-control {
    width: 10em;
    height: 10em;
}
.steps-control .ring {
    -webkit-transform: scale(calc(var(--size)/40));
    transform: scale(calc(var(--size)/40));
    width: 100%;
    box-shadow: 0 0 0 .2em;
    border-radius: 5em;
    -webkit-transform: 300ms linear;
    transform: 300ms linear;
}
input {
    margin: 0;
    padding: 0 .5em;
    font-size: inherit;
    font-family: inherit;
    border: none;
    width: 7em;
    outline: none;
    border-radius: 0 1em 1em 0;
}
input[type=color] {
    padding: 0;
    width: 2em;
    height: 2em;
    border-radius: 1em 0 0 1em;
}
input[type=color]::-moz-color-swatch {
    border: none;
    border-radius: 1em;
    transform: scale(0.75);
}
input[type=color]::-webkit-color-swatch {
    border: none;
    border-radius: 1em;
}
input[type=color]::-webkit-color-swatch-wrapper {
    padding: .25em;
    border-radius: 1em;
}
input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: .25em;
    border-radius: 1em;
    cursor: pointer;
    font-size: inherit;
    background: var(--fg);
}
input[type=range]::-moz-range-track {
    -moz-appearance: none;
    appearance: none;
    background: var(--fg);
    outline: none;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}
input[type=range]::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border: none;
    border-radius: 1em;
    box-shadow: 0 0 0 0.3em var(--bg);
    background: var(--fg);
    transform: scale(1);
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
input[type=range]::-moz-range-thumb:focus,
input[type=range]::-moz-range-thumb:active {
    -moz-appearance: none;
    appearance: none;
    transform: scale(0.85);
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border: none;
    border-radius: 1em;
    box-shadow: 0 0 0 0.3em var(--bg);
    background: var(--fg);
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
input[type=range]::-webkit-slider-thumb:focus,
input[type=range]::-webkit-slider-thumb:active {
    -webkit-appearance: none;
    appearance: none;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    background: #000;
    font-family: 'Work Sans', sans-serif;
}
main {
    flex: 1;
    display: flex;
    font-size: calc(1em + 1vw);
}
@supports (-webkit-backdrop-filter: blur(2em)) {
    input[type=color] {
        display: none;
    }
    input {
        border-radius: 1em;
        padding: .25em .5em;
        width: 9em;
    }
}

HTML

Vue.js based Visual Steps

vue, color, app

编辑器支持Emmet

快捷键

Vue.js based Visual Steps

vue, color, app

基于Vue.js实现的轮播动画特效

使用Vue2.js实现的矩阵排序动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：