最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

『HTML5梦幻之旅』-动感圆圈-H5教程

来源:http://erdangjiade.com/topic/134000.html H5程序员 2017-10-22 21:49浏览(22)

  最近在scratch社区逛的时候,发现了一位国外牛人设计的一个动画portals(项目链接),如下:

  在这个项目中,所有圆圈根据三个参数的调控进行一系列美妙的运动。我看这个项目挺有趣的,于是就用html5模仿了一个,不同的是,为了使动画更连贯,我采用了自动变更参数的方式来使整个动画播放过程完全自动化。以下是效果截图:

  核心代码

  这些圆圈的运动轨迹由三个参数和一个函数式来确立。具体看代码:

for (var i = 1; i <= 60; i++) {
    var angle = i * 6 / 180 * Math.PI;
    var r = Math.abs(30 * (pull + Math.sin((twist * 6 * (i + timer * 2) / 180 * Math.PI))));
    r = r % 60;

    var d = (2 + shout) * (60 - shout * r),
    x = d * Math.cos(angle),
    y = d * Math.sin(angle);

    c.save();

    c.beginPath();
    c.fillStyle = getColor();
    c.globalAlpha = r / 100;
    c.arc(x, y, r, 0, Math.PI * 2);
    c.fill();
    c.restore();
}
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2