使用HTML5模拟毛发动画

Fur Simulation，可用于模拟人的头发或者其他柔性集聚物体。

html5, fur

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var container = 'body';
var size = {
    x: $(container).width(),
    y: $(container).height()
};

var color = [157, 208, 136];

var resolution_scale = 1;

var bunchSize = 20;
var perlinSpread = 50;

var hairdist = 20;
var exS = 4;

var canvas = $('<canvas/>').attr({
        width: size.x * resolution_scale,
        height: size.y * resolution_scale
    }).appendTo(container),
    context = canvas.get(0).getContext("2d");

var startTime = new Date().getTime();
var currentTime = 0;

var wind = [];

var hairs = [];
var hair = function(position, shape, shade) {
    this.position = position;
    this.drawShape = shape;
    this.shade = shade;

this.draw = function() {
        var windr = wind[Math.floor(this.position.x / bunchSize)][Math.floor(this.position.y / bunchSize)];
        if (!windr) {
            windr = 0;
        }
        context.save();
        context.translate((this.position.x - hairdist * 2) * resolution_scale, (this.position.y - hairdist * 2) * resolution_scale);
        context.rotate(windr * (Math.PI / 2));
        this.light = Math.floor(40 * (1 + windr)) + this.shade;
        this.drawShape(this.light);
        context.restore();

}

this.id = hairs.length;
    hairs.push(this);
}

window.requestFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

function hairShape(light) {
    context.fillStyle = 'rgb(' + (color[0] + light) + ',' + (color[1] + light) + ',' + (color[2] + light) + ')';
    context.fillRect(0, 80 * resolution_scale, 2 * resolution_scale, -80 * resolution_scale);
}

for (var x = 0; x < size.x / hairdist + exS; x++) {
    for (var y = 0; y < size.y / hairdist + exS; y++) {
        new hair({
            x: x * hairdist + Math.floor(Math.random() * hairdist),
            y: y * hairdist + Math.floor(Math.random() * hairdist)
        }, hairShape, Math.floor(Math.random() * 30));
    }
}

function render() {
    var now = new Date().getTime();
    currentTime = (now - startTime) / 10000;
    context.clearRect(0, 0, size.x * resolution_scale, size.y * resolution_scale);

updateWind();
    for (var i = 0; i <= hairs.length; i++) {
        if (hairs[i]) {
            hairs[i].draw();
        }

}

requestFrame(render);
}
render();

编译

CSS

HTML

Fur Simulation，可用于模拟人的头发或者其他柔性集聚物体。

html5, fur

编辑器支持Emmet

快捷键

Fur Simulation，可用于模拟人的头发或者其他柔性集聚物体。

html5, fur

使用HTML5 GSAP模拟植物卷须动物卷发触角动画特效

HTML5/CSS3使用不规则圆形模拟雨水动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：