圆圈的直径和圆点运动动画

Mathimation = Math + Animation

math，动画

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

第三方库
作品简介 1640
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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

var rad = function(deg) {
    return (deg * (Math.PI / 180));
};

var pointOnCircle = function(x, y, radius, point) {
    var xr = (x + (radius * Math.cos(rad(point))));
    var yr = (y + (radius * Math.sin(rad(point))));

return {
        x: xr,
        y: yr
    };
};

var distance = function(pt1, pt2) {
    return Math.sqrt((pt2.x -= pt1.x) * pt2.x + (pt2.y -= pt1.y) * pt2.y);
};

var map = function(value, imin, imax, omin, omax) {
    return ((value - imin) * (omax - omin) / (imax - imin) + omin);
}

Math.Tau = (Math.PI * 2);

$(function() {
    var canvas = document.getElementById('animation');
    var context = canvas.getContext('2d');

var circle = 100;
    var deg = 0;

var anim = function anim() {
        requestAnimFrame(anim);

// motion blur; 
        context.fillStyle = 'rgba(38, 38, 38, 0.5)';
        context.fillRect(0, 0, 400, 400);

var pt1 = pointOnCircle(200, 200, circle, deg);
        var pt2 = pointOnCircle(200, 200, circle, ((deg + 180) % 360));

context.strokeStyle = context.fillStyle = 'rgb(8, 243, 190)';
        context.lineWidth = 3;

// rotating line
        context.beginPath();
        context.moveTo(pt1.x, pt1.y);
        context.lineTo(pt2.x, pt2.y);
        context.stroke();
        context.closePath();

// opposite rotating dots
        context.save();
        context.beginPath();
        var db1 = distance(pt1, {
            x: pt1.x,
            y: pt2.y
        });

var db2 = distance(pt2, {
            x: pt2.x,
            y: pt1.y
        });

context.fillStyle = 'rgba(8, 243, 190, ' + map(db1, 0, 200, 0.1, 1) + ')';
        //if(db1 < 30 || db2 < 30) context.fillStyle = 'rgba(8, 243, 190, 1)';

context.arc(pt1.x, pt2.y, map(db1, 0, 200, 3, 6), 0, Math.Tau, false);
        context.arc(pt2.x, pt1.y, map(db2, 0, 200, 3, 6), 0, Math.Tau, false);
        context.fill();
        context.closePath();
        context.restore();

// border
        context.strokeStyle = 'rgba(8, 243, 190, 0.1)';
        context.beginPath();
        context.arc(200, 200, circle, 0, Math.Tau, false);
        context.stroke();
        context.closePath();

// lines
        var ldeg = 30;
        for (var i = 0; i < 3; i++) {
            var pt = pointOnCircle(200, 200, circle, ldeg);
            context.save();
            var dp1 = distance(pt, {
                x: pt1.x,
                y: pt2.y
            });

var dp2 = distance(pt, {
                x: pt2.x,
                y: pt1.y
            })

var dp = (dp1 > dp2 ? dp1 : dp2);
            context.strokeStyle = 'rgba(8, 243, 190, ' + map(dp / 200, 0.7, 1, 0, 1) + ')';

context.beginPath();
            context.moveTo(pt.x, pt.y);
            context.lineTo(200, 200);
            context.stroke();
            context.closePath();
            context.restore();
            ldeg = ((ldeg + 120) % 360);
        }
        deg = ((deg + 1) % 360);
    };
    anim();
});

编译

CSS

HTML

Mathimation = Math + Animation

math，动画

编辑器支持Emmet

快捷键

Mathimation = Math + Animation

math，动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：