HTML5 GSAP立式钢琴（机械装置）操作动画

SVG GASP upright piano action 可用于工业自动化领域的智能控制动画。

html5, machine

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
    var tl = new TimelineMax({
            paused: true
        }),
        point = {
            x: 0,
            y: 0
        },
        allowed = true;
    // When using an object tag, append .contentDocument
    var svgDoc = document.getElementById("upright");
    var key = svgDoc.getElementById("key");
    var pilot = svgDoc.getElementById("pilot");
    var wippen = svgDoc.getElementById("wippen");
    var bridal = svgDoc.getElementById("bridal");
    var hammer = svgDoc.getElementById("hammer");
    var jack = svgDoc.getElementById("jack");
    var spring = svgDoc.getElementById("spring");
    var damper = svgDoc.getElementById("damper");
    TweenLite.defaultEase = Linear.easeNone;
    ThrowPropsPlugin.track(point, "x,y");
    tl.timeScale(4);

tl.to(key, .6, {
            rotation: 1.4,
            transformOrigin: "center bottom"
        }, 0)
        .to(pilot, .6, {
            y: -8,
            rotation: -0.5
        }, 0)
        .to(wippen, .6, {
            rotation: -7,
            transformOrigin: "14% 90%"
        }, 0)
        .to(bridal, .6, {
            x: -16,
            y: -19,
            rotation: -1,
            transformOrigin: "right bottom"
        }, 0)
        .to(damper, .6, {
            rotation: 2,
            transformOrigin: "center center"
        }, 0)
        .to(jack, .6, {
            y: -12,
            x: -3,
            rotation: 4,
            transformOrigin: "40% 85%"
        }, 0)
        .to(spring, .6, {
            y: -12,
            rotation: 4
        }, 0)
        .to(hammer, .4, {
            rotation: -15,
            transformOrigin: "20% 90%"
        }, 0.2)
        .to(jack, .4, {
                y: -12,
                x: -2,
                rotation: 12,
                transformOrigin: "40% 85%"
            },
            "letoff")
        .to(hammer, .2, {
            rotation: -18,
            transformOrigin: "20% 90%"
        }, "letoff+=.2")
        .to(hammer, .4, {
            rotation: -9,
            transformOrigin: "20% 90%"
        }, "bounce")
        .to(key, .8, {
            rotation: -0.5,
            transformOrigin: "center bottom"
        }, "release")
        .to(pilot, .8, {
            y: 0,
            rotation: 0
        }, "release")
        .to(wippen, .8, {
            rotation: 0,
            transformOrigin: "14% 90%"
        }, "release")
        .to(spring, .8, {
            y: 0,
            rotation: 0
        }, "release")
        .to(bridal, .8, {
            x: 0,
            y: 0,
            rotation: 0,
            transformOrigin: "right bottom"
        }, "release")
        .to(damper, .8, {
            rotation: 0,
            transformOrigin: "center center"
        }, "release")
        .to(jack, .8, {
            y: 0,
            x: 0,
            rotation: 0,
            transformOrigin: "40% 85%"
        }, "release")
        .to(hammer, .8, {
            rotation: 0,
            transformOrigin: "20% 90%"
        }, "release")
        .addLabel("end");

document.addEventListener("touchstart", handleStart, false);
    document.addEventListener("mousedown", handleStart, false);
    document.addEventListener("touchend", handleEnd, false);
    document.addEventListener("mouseup", handleEnd, false);
    //document.addEventListener("touchmove", handleMove, false);

function handleStart(e) {
        e.preventDefault();
        svgDoc.focus();
        console.log("touchstart");
        tl.tweenFromTo(0, "release");
    }

var point = {
            x: 0,
            y: 0
        },
        highest = 0;
    ThrowPropsPlugin.track(point, "x,y");

function handleMove(e) {
        point.y = e.pageY;
        speed = Math.abs(ThrowPropsPlugin.getVelocity(point, "y"));
        speed /= 20000;
        current = tl.progress() + speed;
        current = Number(Math.round(current + 'e2') + 'e-2');
        if (current > 1) {
            current = 0
        };
        tl.progress(current, suppressEvents = true);
    };

function handleEnd(e) {
        e.preventDefault();
        console.log("touchend");
        tl.tweenTo("end");
    }

document.onkeyup = function(e) {
        this.allowed = true;
        console.log("keyup");
        switch (e.keyCode) {
            case 40:
                tl.tweenTo("end");
                break;
                //...
        }
    }
});

编译

CSS

HTML

SVG GASP upright piano action 可用于工业自动化领域的智能控制动画。

html5, machine

编辑器支持Emmet

快捷键

SVG GASP upright piano action 可用于工业自动化领域的智能控制动画。

html5, machine

HTML5 GSAP 在手机上展示地图位置的动画效果

HTML5 GSAP星球大战BB8机器人逃亡动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：