HTML5/GSAP通过拖拉的交互方式给手机着色

Drag and Drop Coloring，拖拉左边颜色板中的颜色到中间物体（手机壳）上，给物体染色。可用于在线定制商品类的网页应用。

html5, svg, 电商

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
// Polyfill for getTransformToElement
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
    return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
var App;
(function(App) {
    console.clear();
    var log = _.bind(console.log, console);
    var svgns = "http://www.w3.org/2000/svg";
    //
    // RIPPLE
    // =========================================================================== 
    var Ripple = (function() {
        function Ripple(x, y, color) {
            this.color = color;
            this.element = document.createElementNS(svgns, "circle");
            var dx = x - offsetX;
            var dy = y - offsetY;
            var element = this.element;
            var radius = this.getRadius(dx, dy, phoneRect.width, phoneRect.height);
            rippleLayer.appendChild(element);
            TweenLite.set(element, {
                attr: {
                    r: 5
                },
                fill: color,
                x: x,
                y: y
            });
            TweenLite.to(element, rippleDuration, {
                attr: {
                    r: radius
                },
                ease: Power1.easeIn,
                callbackScope: this,
                onComplete: this.removeRipple
            });
        }
        Ripple.prototype.getRadius = function(x, y, w, h) {
            var cx = w / 2;
            var cy = h / 2;
            var dx = x < cx ? w - x : x;
            var dy = y < cy ? h - y : y;
            return Math.sqrt(dx * dx + dy * dy);
        };
        Ripple.prototype.removeRipple = function() {
            TweenLite.set(background, {
                fill: this.color
            });
            rippleLayer.removeChild(this.element);
        };
        return Ripple;
    }());
    //
    // COLOR ITEM
    // =========================================================================== 
    var ColorItem = (function() {
        function ColorItem(color) {
            this.color = color;
            this.animation = null;
            this.itemElement = document.createElement("color-item");
            this.dragElement = document.createElement("color-draggable");
            this.draggable = new Draggable(this.dragElement, {
                trigger: this.itemElement,
                onPress: this.onPress,
                onDrag: this.onDrag,
                onDragEnd: this.onDragEnd,
                callbackScope: this
            });
            var itemElement = this.itemElement;
            var dragElement = this.dragElement;
            colorPicker.appendChild(itemElement);
            itemElement.appendChild(dragElement);
            TweenLite.set([itemElement, dragElement], {
                backgroundColor: color
            });
        }
        ColorItem.prototype.hitTest = function(x, y) {
            var inside = false;
            if (phoneRect.contains(x, y)) {
                if (phonePoly.contains(x, y)) {
                    inside = true;
                }
            }
            return inside;
        };
        ColorItem.prototype.onPress = function() {
            TweenLite.set(this.dragElement, {
                autoAlpha: 1,
                scale: 1,
                x: 0,
                y: 0
            });
            TweenLite.set(phoneOutline, {
                stroke: this.color,
                strokeOpacity: 0
            });
            this.animation = TweenLite.to(phoneOutline, rippleDuration / 2, {
                strokeOpacity: 1
            }).reverse();
            this.draggable.update();
        };
        ColorItem.prototype.onDragEnd = function() {
            var x = this.draggable.pointerX;
            var y = this.draggable.pointerY;
            var point = toLocal(x, y);
            var inside = this.hitTest(point.x, point.y);
            var duration = 0.2;
            if (inside) {
                var ripple = new Ripple(point.x, point.y, this.color);
                duration = 0;
            }
            this.animation.reverse().timeScale(0.5);
            TweenLite.to(this.dragElement, duration, {
                autoAlpha: 0,
                scale: 0.25
            });
        };
        ColorItem.prototype.onDrag = function() {
            var x = this.draggable.pointerX;
            var y = this.draggable.pointerY;
            var point = toLocal(x, y);
            var inside = this.hitTest(point.x, point.y);
            this.animation[inside ? "play" : "reverse"]();
        };
        return ColorItem;
    }());
    //
    // RECTANGLE
    // =========================================================================== 
    var Rectangle = (function() {
        function Rectangle(x, y, width, height) {
            if (x === void 0) {
                x = 0;
            }
            if (y === void 0) {
                y = 0;
            }
            if (width === void 0) {
                width = 0;
            }
            if (height === void 0) {
                height = 0;
            }
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
        }
        Rectangle.prototype.contains = function(x, y) {
            if (this.width <= 0 || this.height <= 0) {
                return false;
            }
            if (x >= this.x && x < this.x + this.width) {
                if (y >= this.y && y < this.y + this.height) {
                    return true;
                }
            }
            return false;
        };
        return Rectangle;
    }());
    //
    // POLYGON
    // =========================================================================== 
    var Polygon = (function() {
        function Polygon(points) {
            this.points = points;
        }
        Polygon.prototype.contains = function(x, y) {
            var inside = false;
            var points = this.points;
            var size = points.length / 2;
            // use raycasting to test hits
            // https://github.com/substack/point-in-polygon/blob/master/index.js
            for (var i = 0, j = size - 1; i < size; j = i++) {
                var xi = points[i * 2];
                var yi = points[(i * 2) + 1];
                var xj = points[j * 2];
                var yj = points[(j * 2) + 1];
                var intersect = ((yi > y) !== (yj > y)) && (x < ((xj - xi) * ((y - yi) / (yj - yi))) + xi);
                if (intersect) {
                    inside = !inside;
                }
            }
            return inside;
        };
        return Polygon;
    }());
    //
    // GLOBAL TO LOCAL
    // ===========================================================================
    function globalToLocal(element, svg) {
            var pt = svg.createSVGPoint();
            return function(x, y) {
                pt.x = x;
                pt.y = y;
                var globalPoint = pt.matrixTransform(svg.getScreenCTM().inverse());
                var localMatrix = element.getTransformToElement(svg).inverse();
                return globalPoint.matrixTransform(localMatrix);
            };
        }
        //
        // INIT
        // ===========================================================================
    var colors = [
        "#eaeaea",
        "#4d4b4c",
        "#537ebf",
        "#244191",
        "#ac286e",
        "#f17bb0",
        "#e8405d",
        "#f9a977",
        "#f9f06e",
        "#a7d492",
        "#88d3e1",
        "#ced6ed",
    ];
    var rippleDuration = 0.35;
    var svg = document.querySelector("#phone-svg");
    var background = document.querySelector("#background");
    var colorPicker = document.querySelector("color-picker");
    var rippleLayer = document.querySelector("#ripple-layer");
    var phoneOutline = document.querySelector("#phone-outline");
    // Convert path data to polygon points
    var pathData = MorphSVGPlugin.pathDataToBezier(phoneOutline);
    var contour = simplify(getContour(pathData, 50), 5, false);
    // Convert point objects to array of numbers
    var points = _.reduce(contour, function(res, pt) {
        res.push(_.round(pt.x, 3));
        res.push(_.round(pt.y, 3));
        return res;
    }, []);
    var box1 = phoneOutline.getBBox();
    var box2 = background.getBBox();
    // Shapes for hit testing
    var phoneRect = new Rectangle(box1.x, box1.y, box1.width, box1.height);
    var colorRect = new Rectangle(box2.x, box2.y, box2.width, box2.height);
    var phonePoly = new Polygon(points);
    var toLocal = globalToLocal(background, svg);
    var offsetX = phoneRect.x - colorRect.x;
    var offsetY = phoneRect.y - colorRect.y;
    var colorItems = _.map(colors, function(color) {
        return new ColorItem(color);
    });
    TweenLite.set("color-item", {
        autoAlpha: 0,
        scale: 0.9,
        xPercent: -100
    });
    TweenLite.set("phone-container", {
        autoAlpha: 0,
        scale: 0.5
    });
    window.addEventListener("load", onLoad);

编译

CSS

* {
    box-sizing: border-box;
}
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
main {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    overflow: hidden;
}
color-sidebar {
    display: block;
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 62px;
    flex: 0 0 62px;
}
color-picker {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #f5f5f5;
    box-shadow: inset 5px 0 5px rgba(128, 128, 128, 0.15), 5px 0 5px rgba(128, 128, 128, 0.15);
    z-index: 100;
}
color-item {
    display: block;
    position: relative;
    cursor: move;
    margin: 10px 10px 0 10px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: hidden;
}
color-draggable {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
}
phone-container {
    display: block;
    position: relative;
    width: 56.35553vmin;
    height: 90vmin;
    visibility: hidden;
    opacity: hidden;
}
#phone-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-content {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: -62px;
    padding-left: 62px;
}
@media screen and (max-height: 600px) {
    color-item {
        margin: 5px 5px 0 5px;
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
    }
}

HTML

<color-sidebar>
        <color-picker></color-picker>
    </color-sidebar>

</svg>
        </phone-container>
    </section>
</main>

Drag and Drop Coloring，拖拉左边颜色板中的颜色到中间物体（手机壳）上，给物体染色。可用于在线定制商品类的网页应用。

html5, svg, 电商

编辑器支持Emmet

快捷键

Drag and Drop Coloring，拖拉左边颜色板中的颜色到中间物体（手机壳）上，给物体染色。可用于在线定制商品类的网页应用。

html5, svg, 电商

HTML5/GSAP拥挤的交通与雨刷

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：