HTML5 Verlet积分法实现带重力效应可拖拉弹性毛线球动画

 首页 > 网页特效 > 其他特效 > HTML5 Verlet积分法实现带重力效应可拖拉弹性毛线球动画

HTML5 Verlet积分法实现带重力效应可拖拉弹性毛线球动画

 2018-11-30  426  收藏  0 赞一个  0 真差劲  0 去评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Verlet积分法实现可拖拉弹性毛线球</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);
html,
body {
    height: 100%;
}
body {
    font-family: 'Ubuntu', sans-serif;
    font-size: .75em;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: #282537;
    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    cursor: move;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
svg {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: #282537;
    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    box-shadow: inset 4px 4px 8px 8px hsla(0, 5%, 5%, .07);
    border-radius: 5px;
}
.svg {
    width: 100%;
    text-align: center;
    margin-top: 2%;
}
.input {
    padding: 2em;
}
p {
    bottom: 0;
    left: 0;
    width: 350px;
    position: absolute;
    text-align: left;
    padding: .5em;
}
form,
p {
    color: hsla(231, 5%, 85%, 1);
}
</style>

</head>

<body>
<div class='svg'>
    <svg width="465" height="465" viewBox='-20 0 465 465'>
        <path id="p" d="M 100 350 L 200 50 300 350 Z" stroke="hsla(231, 5%, 85%, 1)" stroke-width="1" fill="none" />
    </svg>
    <br />
    <div class='input'>
        <form oninput="val.value=ptrng.value">
            <label>#Points&nbsp;
                <input id="ptrng" type="range" min="0" max="20" step="1" />&nbsp;
                <output name="val" for="ptrng"></output>
            </label>
        </form>
    </div>
</div>
<script>
var ss = 460; //svg size
var p = document.getElementById('p'),
    poly, $;

function Pt(x, y) {
    this.x = x || 0;
    this.y = y || 0;
}

Pt.dist = function(a, b) {
    return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
};

function Rect(x, y, w, h) {
        this.x = 0;
        this.y = 0;
        this.w = w || 0; //width
        this.h = h || 0; //height
        this.l = x; //left
        this.r = x + w; //right
        this.t = y; //top
        this.b = y + h; //bottom
    }
    //verlet point
function vPt(x, y) {
        this.x = x || 0;
        this.y = y || 0;
        this.px = this.x;
        this.py = this.y;
    }
    //update
vPt.prototype.upd = function() {
        var tmpX = this.x,
            tmpY = this.y;
        this.x += this.getX();
        this.y += this.getY();
        this.px = tmpX;
        this.py = tmpY;
    }
    //set position
vPt.prototype.setPos = function(x, y) {
        this.x = this.px = x;
        this.y = this.py = y;
    }
    //contain
vPt.prototype.cont = function(rect) {
        this.x = Math.max(rect.l, Math.min(rect.r, this.x));
        this.y = Math.max(rect.t, Math.min(rect.b, this.y));
    }
    //set verlet x
vPt.prototype.setX = function(val) {
        this.px = this.x - val;
    }
    //get verlet x
vPt.prototype.getX = function() {
        return this.x - this.px;
    }
    //set verlet y
vPt.prototype.setY = function(val) {
        this.py = this.y - val;
    }
    //get verlet y
vPt.prototype.getY = function() {
        return this.y - this.py;
    }
    //verlet lines
function vLine(ptA, ptB, k, length) {
        this.ptA = ptA;
        this.ptB = ptB;
        this.k = k || 0.5;
        this.length = length || Pt.dist(ptA, ptB);
    }
    //update lines
vLine.prototype.upd = function() {
    var dx = this.ptB.x - this.ptA.x,
        dy = this.ptB.y - this.ptA.y,
        dist = Math.sqrt(dx * dx + dy * dy),
        diff = (this.length - dist) / dist,
        offX = diff * dx * this.k,
        offY = diff * dy * this.k;
    this.ptA.x -= offX;
    this.ptA.y -= offY;
    this.ptB.x += offX;
    this.ptB.y += offY;
}

//polygon (point, vertex, size, var k)
function Poly(pt, vert, size, k) {
    this.vert = vert;
    this.pts = [];
    this.lines = [];

    this.vx = 0.2;

    for (var v = 0; v < 2 * Math.PI; v += 2 * Math.PI / vert) {
        this.pts.push(
            new vPt(Math.cos(v) * size + pt.x, Math.sin(v) * size + pt.y)
        );
    }

    for (var i = 0, n = this.pts.length; i < n; i++) {
        pt = this.pts[i];

        for (var j = 0, m = this.pts.length; j < m; j++) {
            if (i !== j) {
                this.lines.push(
                    new vLine(pt, this.pts[j], k)
                );
            }
        }
    }
}

Poly.prototype.upd = function() {
    var pt,
        line,
        i = 0,
        n = this.pts.length;

    for (; i < n; i++) {
        pt = this.pts[i];
        pt.y += this.vx;
        pt.upd();
        pt.cont($);
    }

    i = 0;
    n = this.lines.length;
    for (; i < n; i++) {
        line = this.lines[i];
        line.upd();
    }
}

Poly.prototype.draw = function() {
    var pt,
        line,
        i,
        n;

    var d = 'M ' + this.pts[0].x + ' ' + this.pts[0].y + ' L ';

    i = 0;
    n = this.pts.length;
    for (; i < n; i++) {
        pt = this.pts[i];
        d += ' ' + pt.x + ' ' + pt.y;
    }

    d += ' Q ';

    i = 0;
    n = this.lines.length;

    for (; i < n; i++) {
        line = this.lines[i];
        d += ' ' + line.ptA.x + ' ' + line.ptA.y;
        d += ' ' + line.ptB.x + ' ' + line.ptB.y;
    }

    d += ' Z';
    p.setAttribute('d', d);
}

var msdn,
    prevX = 0,
    prevY = 0;

window.addEventListener("mousedown", function(e) {
    msdn = true;
    prevX = e.clientX;
    prevY = e.clientY;
});

window.addEventListener("touchstart", function(e) {
    msdn = true;
    prevX = e.touches[0].clientX;
    prevY = e.touches[0].clientY;
});

window.addEventListener("mouseup", function(e) {
    msdn = false;
});

window.addEventListener("touchend", function(e) {
    msdn = false;
});

window.addEventListener("mousemove", function(e) {
    if (msdn) {
        for (var i = 0; i < poly.pts.length; i++) {
            poly.pts[i].x += (e.clientX - prevX) / 8;
            poly.pts[i].y += (e.clientY - prevY) / 8;
        }
        prevX = e.clientX;
        prevY = e.clientY;
    }
});

window.addEventListener("touchmove", function(e) {
    if (msdn) {
        for (var i = 0; i < poly.pts.length; i++) {
            poly.pts[i].x += (e.touches[0].clientX - prevX) / 8;
            poly.pts[i].y += (e.touches[0].clientY - prevY) / 8;
        }
        prevX = e.touches[0].clientX;
        prevY = e.touches[0].clientY;
    }
});

$ = new Rect(0, 0, ss, ss);
poly = new Poly(new Pt(220, 90), 9, 80, 0.025);

function loop() {
    poly.upd();
    poly.draw();
    window.requestAnimationFrame(loop);
}

loop();

document.getElementById('ptrng').addEventListener('change', function(e) {
    poly = new Poly(new Pt(220, 90), e.currentTarget.value, 80, 0.025);
});
</script>
<div style="display:none"><script src="http://demo.jb51.net/js/tj.js"></script></div>
<script src="http://demo.jb51.net/js/yxj.js" type="text/javascript"></script>
</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

这是一款基于HTML5 Verlet积分法实现带重力效应可拖拉弹性毛线球动画源码。矩形框中一个由线条构成的毛绒球受重力效应下落，在碰撞到底部的时候呈现出弹性变形的动画效果，通过鼠标拖动还可移动毛绒小球，小球在移动、碰撞过程中都会发生弹性形变。页面下方还带有一个控制小球顶点数的滑块。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行