酷炫的canvas粒子动画和性能消耗

这里只有作者精心编写的学习经历!
回复
头像
hellohappy
网站管理员
网站管理员
帖子: 365
注册时间: 2018年11月18日, 14:27
点赞次数: 1 time
被点赞: 9 time

#1 酷炫的canvas粒子动画和性能消耗

未读帖子 hellohappy »

    自从建站以后,就对别人网站的各种特效十分敏感,有时候会遇到一些很酷炫的动画或者背景,就很想模仿(抄袭。。)。

    当然我遇到的使用这些特效的网站,一般都不会对特效js进行加密,通常都是使用经过简单混淆压缩的js代码,甚至直接放源码(还带注释那种),所以通常想模仿也不是很难实现。
    就比如之前在网站上看到了很多类似的粒子动画,有的还会跟随鼠标,比如如下样式(点击查看原图)。

    粒子特效1会跟随鼠标移动而围剿过来~
粒子特效1.GIF

    粒子特效2还可以自己输入文字,他会自动聚集成你输入的文字。
粒子特效2.GIF

    粒子特效3纯动画,展示的是神级网络样式?
粒子特效3.GIF

    特别是第一个特效,第一次遇到玩了差不多2分钟才住手。当时还以为有多难实现,花了很久去研究这个网站到底哪个js画出了这么漂亮的效果,还能跟随鼠标移动。后来发现这个项目在github上有各种不同的版本,效果也差不多。我下面会给出含有注释的版本(本来实现逻辑都不是很难,都不超过200行有效代码,真的想看懂代码的,自己对着带注释的源码认真看半小时估计都能懂了)。

    正当我十分兴奋地给我的网站加上这些秀的不行的特效的时候;我发现一个现象,一打开网站,电脑的风扇就fufu作响?哦?以前我的网站不会这么耗电脑性能的啊?打开任务管理器一看(ctrl+alt+del),浏览器的程序直接跑满了的单核(我电脑是4核八线程,他直接跑满了其中1核,也就占用13%左右),而且关掉特效以后,立马就降到了0%。

    这到底是程序优化不好还是真的就必须这么消耗cpu?为了一个特效,要消耗如此多的性能,是不太值得的(除非人家本来就是过来欣赏特效的。)

    我们随便打开一个源码来分析分析,看看这代码到底是怎么回事。以特效1为例
隐藏内容
显示

代码: 全选

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
          var cWidth,cHeight;
        resize();
        window.onresize = resize;
        function resize() {
          cWidth = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
          cHeight = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
        // 鼠标活动时,获取鼠标坐标
        var mouse = {x: null, y: null, max: 20000};
        window.onmousemove = function(e) {
          e = e || window.event;
          mouse.x = e.clientX;
          mouse.y = e.clientY;
        };
        window.onmouseout = function(e) {
          mouse.x = null;
          mouse.y = null;
        };
        // 添加粒子
        // x,y为粒子坐标,moveX, moveY为粒子xy轴加速度,max为连线的最大距离
        var dots = ;
        for (var i = 0; i < 300; i++) {
          var x = Math.random() * cWidth;
          var y = Math.random() * cHeight;
          var moveX = Math.random() * 2 - 1;
          var moveY = Math.random() * 2 - 1;
          dots.push({
            x: x,
            y: y,
            moveX: moveX,
            moveY: moveY,
            max: 6000
          })
        }
        // 延迟100毫秒开始执行动画,如果立即执行有时位置计算会出错
        setTimeout(function() {
          animate();
        }, 100);
        // 每一帧循环的逻辑
        function animate() {
          ctx.clearRect(0, 0, cWidth, cHeight);
          // 将鼠标坐标添加进去,产生一个用于比对距离的点数组
          var allDots = [mouse].concat(dots);
          dots.forEach(function(dot) {
            // 粒子位移
            dot.x += dot.moveX;
            dot.y += dot.moveY;
            // 遇到边界将加速度反向
            dot.moveX *= (dot.x > cWidth || dot.x < 0) ? -1 : 1;
            dot.moveY *= (dot.y > cHeight || dot.y < 0) ? -1 : 1;
            // 绘制点
            ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
            // 循环比对粒子间的距离
            for (var i = 0; i < allDots.length; i++) {
              var tempDot = allDots[i];
              if (dot === tempDot || tempDot.x === null || tempDot.y === null) continue;
              var _x = dot.x - tempDot.x;
              var _y = dot.y - tempDot.y;
              // 两个粒子之间的距离
              var dis = _x * _x + _y * _y;
              // 距离比
              var ratio;
              // 如果两个粒子之间的距离小于粒子对象的max值,则在两个粒子间画线
              if (dis < tempDot.max) {
                // 如果是鼠标,则让粒子向鼠标的位置移动
                if (tempDot === mouse && dis > (tempDot.max / 2)) {
                  dot.x -= _x * 0.03;
                  dot.y -= _y * 0.03;
                }
                // 计算距离比
                ratio = (tempDot.max - dis) / tempDot.max;
                // 画线
                ctx.beginPath();
                ctx.lineWidth = ratio / 2;
                ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
                ctx.moveTo(dot.x, dot.y);
                ctx.lineTo(tempDot.x, tempDot.y);
                ctx.stroke();
              }
            }
            // 将已经计算过的粒子从数组中删除
            allDots.splice(allDots.indexOf(dot), 1);
          });
         setTimeout(function() {
             animate();
         }, 1000/60);
        }
      </script>
    </body>
</html>[/i]

    以上整个特效,html的body里面只包含了一个canvas元素和一个JavaScript程序段。JavaScript是我们要研究的内容(具体整个js什么意思自己去读吧,我只介绍一小部分)。
这里,整个js,是用setTimeout() 控制整个核心函数animate的执行频率的。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。( 1000 毫秒= 1 秒。)
第一次出现setTimeout出现在43行,直接告诉浏览器在100毫秒以后开始访问我们的核心函数animate;而核心程序本身又是自己调用自己的,animate的最后几行是:

代码: 全选

[i]setTimeout(function() {
animate();
}, 1000/60);[/i]

    这几行是在告诉浏览器再过 1000/60大约17毫秒再调用一次自己。总体上说就是,整个例子动画效果就是用animate这个函数,一帧一帧地画出来的,每执行一次就会刷新一次屏幕。这里1000毫秒等于1秒,除以60,刚好是人类视网膜能接受的流畅帧率60帧。
    那么如果我们调低整个核心函数animate的执行频率,把1000/60改成更大,是否能降低整个电脑的负载呢?当然没问题!比如你改成1000/10=100,cpu的负载也是接近于零的,只是动画变得十分的缓慢,而且也不是很流畅。

    同理,我们也可以分析其他例子效果的程序,下面给出这几个效果的源码,粘贴成文本再以html文件后缀保存就可以了。

单击显示按钮显示源码
显示
例子特效1:

代码: 全选

[i]<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cWidth,cHeight;
resize();
window.onresize = resize;
function resize() {
cWidth = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
cHeight = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
// 鼠标活动时,获取鼠标坐标
var mouse = {x: null, y: null, max: 20000};
window.onmousemove = function(e) {
e = e || window.event;
mouse.x = e.clientX;
mouse.y = e.clientY;
};
window.onmouseout = function(e) {
mouse.x = null;
mouse.y = null;
};
// 添加粒子
// x,y为粒子坐标,moveX, moveY为粒子xy轴加速度,max为连线的最大距离
var dots = ;
for (var i = 0; i < 300; i++) {
var x = Math.random() * cWidth;
var y = Math.random() * cHeight;
var moveX = Math.random() * 2 - 1;
var moveY = Math.random() * 2 - 1;
dots.push({
x: x,
y: y,
moveX: moveX,
moveY: moveY,
max: 6000
})
}
// 延迟100hao毫秒开始执行动画,如果立即执行有时位置计算会出错
setTimeout(function() {
animate();
}, 100);
// 每一帧循环的逻辑
function animate() {
ctx.clearRect(0, 0, cWidth, cHeight);
// 将鼠标坐标添加进去,产生一个用于比对距离的点数组
var allDots = [mouse].concat(dots);
dots.forEach(function(dot) {
// 粒子位移
dot.x += dot.moveX;
dot.y += dot.moveY;
// 遇到边界将加速度反向
dot.moveX *= (dot.x > cWidth || dot.x < 0) ? -1 : 1;
dot.moveY *= (dot.y > cHeight || dot.y < 0) ? -1 : 1;
// 绘制点
ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
// 循环比对粒子间的距离
for (var i = 0; i < allDots.length; i++) {
var tempDot = allDots[i];
if (dot === tempDot || tempDot.x === null || tempDot.y === null) continue;
var _x = dot.x - tempDot.x;
var _y = dot.y - tempDot.y;
// 两个粒子之间的距离
var dis = _x * _x + _y * _y;
// 距离比
var ratio;
// 如果两个粒子之间的距离小于粒子对象的max值,则在两个粒子间画线
if (dis < tempDot.max) {
// 如果是鼠标,则让粒子向鼠标的位置移动
if (tempDot === mouse && dis > (tempDot.max / 2)) {
dot.x -= _x * 0.03;
dot.y -= _y * 0.03;
}
// 计算距离比
ratio = (tempDot.max - dis) / tempDot.max;
// 画线
ctx.beginPath();
ctx.lineWidth = ratio / 2;
ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
ctx.moveTo(dot.x, dot.y);
ctx.lineTo(tempDot.x, tempDot.y);
ctx.stroke();
}
}
// 将已经计算过的粒子从数组中删除
allDots.splice(allDots.indexOf(dot), 1);
});
setTimeout(function() {
animate();
}, 1000/10);
}
</script>
</body>
</html>[/i][/i]


例子特效2:

代码: 全选

[i][i]<!DOCTYPE html>
<html>
<body>

<div class="help">?</div>

<div class="ui">
<input class="ui-input" type="text" />
<span class="ui-return">↵</span>
</div>

<div class="overlay">
<div class="tabs">
<div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>

<div class="tabs-panels">
<ul class="tabs-panel commands">
<li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
<li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
<li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
<li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li>
<li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li>

<li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span> |<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li>
</ul>

<div class="tabs-panel ui-details">
<div class="ui-details-content">
<h1>Shape Shifter</h1>
<p>
An experiment by <a href="//www.kennethcachia.com" target="_blank">Kenneth Cachia<a/>.<br/>
<a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a> is being used to render all #icons.
</p>

<br/><p>Visit <a href="http://www.kennethcachia.com/shape-shifter/?a=#icon thumbs-up" target="_blank">Shape Shifter</a> to use icons.</p>
</div>
</div>

<div class="tabs-panel ui-share">
<div class="ui-share-content">
<h1>Sharing</h1>
<p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p>
<p>
<a href="http://www.kennethcachia.com/shape-shifter?a=Hello" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello</a><br/>
<a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3</a>
</p>
</div>
</div>
</div>
</div>
</div>

<style>
body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #79a8ae;
color: #666;
font-size: 16px;
line-height: 1.5em;
overflow: hidden;
}

h1 {
color: #111;
margin: 0 0 12px 0;
font-size: 24px;
line-height: 1.5em;
}

p {
margin: 0 0 10x 0;
}

a {
color: #888;
text-decoration: none;
border-bottom: 1px solid #ccc;
}

a:hover {
border-bottom-color: #888;
}

body,
.overlay {
-webkit-perspective: 1000;
-webkit-perspective-origin-y: 25%;
}

.body--ready {
/* Ideas
background: -webkit-linear-gradient(top, #e2b986 -10%, #241c35 140%);
background: -webkit-linear-gradient(top, #c97369 -40%, #241c35 130%);
background: -webkit-linear-gradient(top, #fac4c4 -10%, #606386 140%);
background: -webkit-linear-gradient(top, #519ab0 0%, #414A6D 110%);
background: -webkit-linear-gradient(top, rgb(129, 0, 170) 0%, rgb(43, 4, 114) 110%);
background: -webkit-linear-gradient(top, rgb(163, 235, 189) 0%, rgb(16, 93, 145) 110%);
background: -webkit-linear-gradient(top, rgb(165, 103, 189) 0%, rgb(75, 233, 214) 120%);
*/

background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}

.body--ready .overlay {
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
-moz-transition: -moz-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
-ms-transition: -ms-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
-o-transition: -o-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
}


.ui {
position: absolute;
left: 50%;
bottom: 5%;
width: 300px;
margin-left: -150px;
}

.ui-input {
width: 100%;
height: 50px;
background: none;
font-size: 24px;
font-weight: bold;
color: #fff;
text-align: center;
border: none;
border-bottom: 2px solid white;
}

.ui-input:focus {
outline: none;
border: none;
border-bottom: 2px solid white;
}

.ui-return {
display: none;
position: absolute;
top: 20px;
right: 0;
padding: 3px 2px 0 2px;
font-size: 10px;
line-height: 10px;
color: #fff;
border: 1px solid #fff;
}

.ui--enter .ui-return {
display: block;
}

.ui--wide {
width: 76%;
margin-left: 12%;
left: 0;
}

.ui--wide .ui-return {
right: -20px;
}

.help {
position: absolute;
top: 40px;
right: 40px;
width: 25px;
height: 25px;
text-align: center;
font-size: 13px;
line-height: 27px;
font-weight: bold;
cursor: pointer;
background: #fff;
color: #79a8ae;
opacity: .9;

-webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.help:hover {
opacity: 1;
}

.overlay {
position: absolute;
top: 50%;
left: 50%;
width: 550px;
height: 490px;
margin: -260px 0 0 -275px;
opacity: 0;

-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}

.overlay--visible {
opacity: 1;

-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}

.ui-share,
.ui-details {
opacity: .9;
background: #fff;
z-index: 2;
}

.ui-details-content,
.ui-share-content {
padding: 100px 50px;
}

.commands {
margin: 0;
padding: 0;
list-style: none;
cursor: pointer;
}

.commands-item {
font-size: 12px;
line-height: 22px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px;
background: #fff;
margin-top: 1px;
color: #333;
opacity: .9;

-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-ms-transition: -ms-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-o-transition: -o-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.commands-item--gap {
margin-top: 9px;
}

.commands-item:hover {
opacity: 1;
}

.commands-item:hover .commands-item-action {
background: #333;
}

.commands-item a {
display: inline-block;
}

.commands-item-mode {
display: inline-block;
margin-left: 3px;
font-style: italic;
color: #ccc;
}

.commands-item-title {
display: inline-block;
width: 150px;
}

.commands-item-info {
display: inline-block;
width: 300px;
font-size: 14px;
text-transform: none;
letter-spacing: 0;
font-weight: normal;
color: #aaa;
}

.commands-item-action {
display: inline-block;
float: right;
margin-top: 3px;
text-transform: uppercase;
font-size: 10px;
line-height: 10px;
color: #fff;
background: #90c9d1;
padding: 5px 10px 4px 10px;
border-radius: 3px;
}

.commands-item:first-child {
margin-top: 0;
}

.twitter-share {
position: absolute;
top: 4px;
right: 20px;
}


.tabs-labels {
margin-bottom: 9px;
}

.tabs-label {
display: inline-block;
background: #fff;
padding: 10px 20px;
font-size: 12px;
line-height: 22px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
opacity: .5;
cursor: pointer;
margin-right: 2px;

-webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
-o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.tabs-label:hover {
opacity: .9;
}

.tabs-label--active {
opacity: .9;
}

.tabs-panel {
display: none;
}

.tabs-panel--active {
display: block;
}

.tab-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
}

.touch .ui-input {
display: none;
}
</style>


<script>
/*
* Shape Shifter
* http://www.kennethcachia.com/shape-shifter
* A canvas experiment
*/

'use strict';

var canvas;
var ctx;
var pixelRadius;
var pixelContiner;
var fontSize = 500,
fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';

var shapeShift = {
init: function() {
var action = window.location.href,
i = action.indexOf('?a=');

shapeShift.Drawing.init('.canvas');
shapeShift.ShapeBuilder.init();
shapeShift.UI.init();


if (i !== -1) {
shapeShift.UI.simulate(decodeURI(action).substring(i + 3));
} else {
shapeShift.UI.simulate('#rectangle 5x5|#circle 25|Shape|Shifter|Type|to start|#icon thumbs-up|#countdown 3||');
}

shapeShift.Drawing.loop(function() {
shapeShift.Shape.render();
});
}
};

window.addEventListener('load', function() {
canvas = document.createElement('canvas');
canvas.id = 'mainCanvas';
canvas.className = 'canvas';
ctx = canvas.getContext('2d');

pixelRadius = 4;
pixelContiner = pixelRadius * 2 + 1;
document.body.insertBefore(canvas, document.body.firstChild);


document.body.classList.add('body--ready');

shapeShift.init();
});

shapeShift.Drawing = (function() {
var renderFn,
requestFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};

return {
init: function(el) {

this.adjustCanvas();

window.addEventListener('resize', function() {
shapeShift.Drawing.adjustCanvas();
});
},

loop: function(fn) {
renderFn = !renderFn ? fn : renderFn;
this.clearFrame();
renderFn();
requestFrame.call(window, this.loop.bind(this));
},

adjustCanvas: function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
},

clearFrame: function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
},

getArea: function() {
return { w: canvas.width, h: canvas.height };
},

drawCircle: function(p, c) {
ctx.fillStyle = c.render();
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
}
};
}());


shapeShift.Point = function(args) {
this.x = args.x;
this.y = args.y;
this.r = args.r;
this.a = args.a;
this.h = args.h;
};


shapeShift.Color = function(r, g, b, a) {
this.r = r;
this.g = g;
this.b = b;
this.a = a;
};

shapeShift.Color.prototype = {
render: function() {
return 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')';
}
};


shapeShift.UI = (function() {
var input = document.querySelector('.ui-input'),
ui = document.querySelector('.ui'),
help = document.querySelector('.help'),
commands = document.querySelector('.commands'),
overlay = document.querySelector('.overlay'),
interval,
isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
currentAction,
resizeTimer,
time,
maxShapeSize = 30,
firstAction = true,
sequence = ,
cmd = '#';

function formatTime(date) {
var h = date.getHours(),
m = date.getMinutes();

m = m < 10 ? '0' + m : m;
return h + ':' + m;
}

function getValue(value) {
return value && value.split(' ')[1];
}

function getAction(value) {
value = value && value.split(' ')[0];
return value && value[0] === cmd && value.substring(1);
}

function timedAction(fn, delay, max, reverse) {
clearInterval(interval);
currentAction = reverse ? max : 1;
fn(currentAction);

if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
interval = setInterval(function() {
currentAction = reverse ? currentAction - 1 : currentAction + 1;
fn(currentAction);

if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
clearInterval(interval);
}
}, delay);
}
}

function reset(destroy) {
clearInterval(interval);
sequence = ;
time = null;

if (destroy) {
shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(''));
}
}

function performAction(value) {
var action,
current;

overlay.classList.remove('overlay--visible');
sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
input.value = '';
checkInputWidth();

timedAction(function() {
current = sequence.shift();
action = getAction(current);
value = getValue(current);

switch (action) {
case 'countdown':
value = parseInt(value, 10) || 10;
value = value > 0 ? value : 10;

timedAction(function(index) {
if (index === 0) {
if (sequence.length === 0) {
shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(''));
} else {
performAction(sequence);
}
} else {
shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(index), true);
}
}, 1000, value, true);
break;

case 'rectangle':
value = value && value.split('x');
value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];

shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0], 10)), Math.min(maxShapeSize, parseInt(value[1], 10))));
break;

case 'circle':
value = parseInt(value, 10) || maxShapeSize;
value = Math.min(value, maxShapeSize);
shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.circle(value));
break;

case 'time':
var t = formatTime(new Date());

if (sequence.length > 0) {
shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(t));
} else {
timedAction(function() {
t = formatTime(new Date());
if (t !== time) {
time = t;
shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(time));
}
}, 1000);
}
break;

case 'icon':
shapeShift.ShapeBuilder.imageFile('font-awesome/' + value + '.png', function(obj) {
shapeShift.Shape.switchShape(obj);
});
break;

default:
shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
}
}, 2000, sequence.length);
}

function checkInputWidth() {
if (input.value.length > 18) {
ui.classList.add('ui--wide');
} else {
ui.classList.remove('ui--wide');
}

if (firstAction && input.value.length > 0) {
ui.classList.add('ui--enter');
} else {
ui.classList.remove('ui--enter');
}
}

function bindEvents() {
document.body.addEventListener('keydown', function(e) {
input.focus();

if (e.keyCode === 13) {
firstAction = false;
reset();
performAction(input.value);
}
});

window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
shapeShift.Shape.shuffleIdle();
reset(true);
}, 500);
});

input.addEventListener('input', checkInputWidth);
input.addEventListener('change', checkInputWidth);
input.addEventListener('focus', checkInputWidth);

help.addEventListener('click', function() {
overlay.classList.toggle('overlay--visible');

if (overlay.classList.contains('overlay--visible')) {
reset(true);
}
});

commands.addEventListener('click', function(e) {
var el,
info,
demo,
url;

if (e.target.classList.contains('commands-item')) {
el = e.target;
} else {
el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode;
}

info = el && el.querySelector('.commands-item-info');
demo = el && info.getAttribute('data-demo');
url = el && info.getAttribute('data-url');

if (info) {
overlay.classList.remove('overlay--visible');

if (demo) {
input.value = demo;

if (isTouch) {
reset();
performAction(input.value);
} else {
input.focus();
}
} else if (url) {
window.location = url;
}
}
});

canvas.addEventListener('click', function() {
overlay.classList.remove('overlay--visible');
});
}

return {
init: function() {
bindEvents();
input.focus();

if (isTouch) {
document.body.classList.add('touch');
}

shapeShift.UI.Tabs.init();
},

simulate: function(action) {
performAction(action);
}
};
}());


shapeShift.UI.Tabs = (function() {
var labels = document.querySelector('.tabs-labels'),
triggers = document.querySelectorAll('.tabs-label'),
panels = document.querySelectorAll('.tabs-panel');

function activate(i) {
triggers[i].classList.add('tabs-label--active');
panels[i].classList.add('tabs-panel--active');
}

function bindEvents() {
labels.addEventListener('click', function(e) {
var el = e.target,
index;

if (el.classList.contains('tabs-label')) {
for (var t = 0; t < triggers.length; t++) {
triggers[t].classList.remove('tabs-label--active');
panels[t].classList.remove('tabs-panel--active');

if (el === triggers[t]) {
index = t;
}
}

activate(index);
}
});
}

return {
init: function() {
activate(0);
bindEvents();
}
};
}());


shapeShift.Dot = function(x, y) {
this.p = new shapeShift.Point({
x: x,
y: y,
r: pixelRadius,
a: 1,
h: 0
});

this.e = 0.07;
this.s = true;

this.c = new shapeShift.Color(255, 255, 255, this.p.a);

this.t = this.clone();
this.q = ;
};

shapeShift.Dot.prototype = {
clone: function() {
return new shapeShift.Point({
x: this.x,
y: this.y,
r: this.r,
a: this.a,
h: this.h
});
},

_draw: function() {
this.c.a = this.p.a;
shapeShift.Drawing.drawCircle(this.p, this.c);
},

_moveTowards: function(n) {
var details = this.distanceTo(n, true),
dx = details[0],
dy = details[1],
d = details[2],
e = this.e * d;

if (this.p.h === -1) {
this.p.x = n.x;
this.p.y = n.y;
return true;
}

if (d > 1) {
this.p.x -= ((dx / d) * e);
this.p.y -= ((dy / d) * e);
} else {
if (this.p.h > 0) {
this.p.h--;
} else {
return true;
}
}

return false;
},

_update: function() {
var p,
d;

if (this._moveTowards(this.t)) {
p = this.q.shift();

if (p) {
this.t.x = p.x || this.p.x;
this.t.y = p.y || this.p.y;
this.t.r = p.r || this.p.r;
this.t.a = p.a || this.p.a;
this.p.h = p.h || 0;
} else {
if (this.s) {
this.p.x -= Math.sin(Math.random() * 3.142);
this.p.y -= Math.sin(Math.random() * 3.142);
} else {
this.move(new shapeShift.Point({
x: this.p.x + (Math.random() * 50) - 25,
y: this.p.y + (Math.random() * 50) - 25,
}));
}
}
}

d = this.p.a - this.t.a;
this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
d = this.p.r - this.t.r;
this.p.r = Math.max(1, this.p.r - (d * 0.05));
},

distanceTo: function(n, details) {
var dx = this.p.x - n.x,
dy = this.p.y - n.y,
d = Math.sqrt(dx * dx + dy * dy);

return details ? [dx, dy, d] : d;
},

move: function(p, avoidStatic) {
if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
this.q.push(p);
}
},

render: function() {
this._update();
this._draw();
}
};


shapeShift.ShapeBuilder = (function() {
function fit() {
canvas.width = Math.floor(window.innerWidth / pixelContiner) * pixelContiner;
canvas.height = Math.floor(window.innerHeight / pixelContiner) * pixelContiner;
ctx.fillStyle = 'red';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
}

function processCanvas() {
var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data,
dots = ,
x = 0,
y = 0,
fx = canvas.width,
fy = canvas.height,
w = 0,
h = 0;

for (var p = 0; p < pixels.length; p += (4 * pixelContiner)) {
if (pixels[p + 3] > 0) {
dots.push(new shapeShift.Point({
x: x,
y: y
}));

w = x > w ? x : w;
h = y > h ? y : h;
fx = x < fx ? x : fx;
fy = y < fy ? y : fy;
}

x += pixelContiner;

if (x >= canvas.width) {
x = 0;
y += pixelContiner;
p += pixelContiner * 4 * canvas.width;
}
}

return { dots: dots, w: w + fx, h: h + fy };
}

function setFontSize(s) {
ctx.font = 'bold ' + s + 'px ' + fontFamily;
}

function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}

return {
init: function() {
fit();
window.addEventListener('resize', fit);
},

imageFile: function(url, callback) {
var image = new Image(),
area = shapeShift.Drawing.getArea();

image.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, area.h * 0.6, area.h * 0.6);
callback(processCanvas());
};

image.onerror = function() {
callback(shapeShift.ShapeBuilder.letter('What?'));
};

image.src = url;
},

circle: function(d) {
var r = Math.max(0, d) / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(r * pixelContiner, r * pixelContiner, r * pixelContiner, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();

return processCanvas();
},

letter: function(text) {
var s = 0;

setFontSize(fontSize);
s = Math.min(fontSize,
(canvas.width / ctx.measureText(text).width) * 0.8 * fontSize,
(canvas.height / fontSize) * (isNumber(text) ? 1 : 0.45) * fontSize);
setFontSize(s);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText(text, canvas.width / 2, canvas.height / 2);

return processCanvas();
},

rectangle: function(countW, countH) {
var dots = ,
width = pixelContiner * countW,
height = pixelContiner * countH;

for (var y = 0; y < height; y += pixelContiner) {
for (var x = 0; x < width; x += pixelContiner) {
dots.push(new shapeShift.Point({
x: x,
y: y,
}));
}
}

return { dots: dots, w: width, h: height };
}
};
}());


shapeShift.Shape = (function() {
var dots = ,
width = 0,
height = 0,
cx = 0,
cy = 0;

function compensate() {
var a = shapeShift.Drawing.getArea();

cx = a.w / 2 - width / 2;
cy = a.h / 2 - height / 2;
}

return {
shuffleIdle: function() {
var a = shapeShift.Drawing.getArea();

for (var d = 0; d < dots.length; d++) {
if (!dots[d].s) {
dots[d].move({
x: Math.random() * a.w,
y: Math.random() * a.h
});
}
}
},

switchShape: function(n, fast) {
var size,
a = shapeShift.Drawing.getArea(),
d = 0,
i = 0;

width = n.w;
height = n.h;

compensate();

if (n.dots.length > dots.length) {
size = n.dots.length - dots.length;
for (d = 1; d <= size; d++) {
dots.push(new shapeShift.Dot(a.w / 2, a.h / 2));
}
}

d = 0;

while (n.dots.length > 0) {
i = Math.floor(Math.random() * n.dots.length);
dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);

if (dots[d].s) {
dots[d].move(new shapeShift.Point({
r: Math.random() * 20 + 10,
a: Math.random(),
h: 18
}));
} else {
dots[d].move(new shapeShift.Point({
r: Math.random() * pixelRadius + pixelRadius,
h: fast ? 18 : 30
}));
}

dots[d].s = true;
dots[d].move(new shapeShift.Point({
x: n.dots[i].x + cx,
y: n.dots[i].y + cy,
a: 1,
r: pixelRadius,
h: 0
}));

n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
d++;
}

for (i = d; i < dots.length; i++) {
if (dots[i].s) {
dots[i].move(new shapeShift.Point({
r: Math.random() * 20 + 10,
a: Math.random(),
h: 20
}));

dots[i].s = false;
dots[i].e = 0.04;
dots[i].move(new shapeShift.Point({
x: Math.random() * a.w,
y: Math.random() * a.h,
a: 0.3, //.4
r: Math.random() * 4,
h: 0
}));
}
}
},

render: function() {
for (var d = 0; d < dots.length; d++) {
dots[d].render();
}
}
};
}());
</script>
</body>
</html>[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]


[i]例子特效3:[/i]

代码: 全选

[i][i][i][i][i][i][i][i][i][i][i]<!DOCTYPE html>
<html>
<body>
<canvas id=c></canvas>
<!--
ALGORITHM:

structure:
- gen( x,y,z ):
- create node at x,y,z // blue
- append some children to list:
- within a certain distance to parent
- outside a certain distance from any node
- within a global distance
- if no children
- don't append any
- set as end node // green-ish

- gen( 0,0,0 ) // red
- while list has items
- gen( position of first item )
- remove first item


impulse behaviour:
- pick( node ):
- if node is end node
- pick( original node )
- else
- pick( random node from node children )

- pick( original node)

-->
<script>
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext( '2d' ),

opts = {

range: 180,
baseConnections: 3,
addedConnections: 5,
baseSize: 5,
minSize: 1,
dataToConnectionSize: .4,
sizeMultiplier: .7,
allowedDist: 40,
baseDist: 40,
addedDist: 30,
connectionAttempts: 100,

dataToConnections: 1,
baseSpeed: .04,
addedSpeed: .05,
baseGlowSpeed: .4,
addedGlowSpeed: .4,

rotVelX: .003,
rotVelY: .002,

repaintColor: '#111',
connectionColor: 'hsla(200,60%,light%,alp)',
rootColor: 'hsla(0,60%,light%,alp)',
endColor: 'hsla(160,20%,light%,alp)',
dataColor: 'hsla(40,80%,light%,alp)',

wireframeWidth: .1,
wireframeColor: '#88f',

depth: 250,
focalLength: 250,
vanishPoint: {
x: w / 2,
y: h / 2
}
},

squareRange = opts.range * opts.range,
squareAllowed = opts.allowedDist * opts.allowedDist,
mostDistant = opts.depth + opts.range,
sinX = sinY = 0,
cosX = cosY = 0,

connections = ,
toDevelop = ,
data = ,
all = ,
tick = 0,
totalProb = 0,

animating = false,

Tau = Math.PI * 2;

ctx.fillStyle = '#222';
ctx.fillRect( 0, 0, w, h );
ctx.fillStyle = '#ccc';
ctx.font = '50px Verdana';
ctx.fillText( 'Calculating Nodes', w / 2 - ctx.measureText( 'Calculating Nodes' ).width / 2, h / 2 - 15 );

window.setTimeout( init, 4 ); // to render the loading screen

function init(){

connections.length = 0;
data.length = 0;
all.length = 0;
toDevelop.length = 0;

var connection = new Connection( 0, 0, 0, opts.baseSize );
connection.step = Connection.rootStep;
connections.push( connection );
all.push( connection );
connection.link();

while( toDevelop.length > 0 ){

toDevelop[ 0 ].link();
toDevelop.shift();
}

if( !animating ){
animating = true;
anim();
}
}
function Connection( x, y, z, size ){

this.x = x;
this.y = y;
this.z = z;
this.size = size;

this.screen = {};

this.links = ;
this.probabilities = ;
this.isEnd = false;

this.glowSpeed = opts.baseGlowSpeed + opts.addedGlowSpeed * Math.random();
}
Connection.prototype.link = function(){

if( this.size < opts.minSize )
return this.isEnd = true;

var links = ,
connectionsNum = opts.baseConnections + Math.random() * opts.addedConnections |0,
attempt = opts.connectionAttempts,

alpha, beta, len,
cosA, sinA, cosB, sinB,
pos = {},
passedExisting, passedBuffered;

while( links.length < connectionsNum && --attempt > 0 ){

alpha = Math.random() * Math.PI;
beta = Math.random() * Tau;
len = opts.baseDist + opts.addedDist * Math.random();

cosA = Math.cos( alpha );
sinA = Math.sin( alpha );
cosB = Math.cos( beta );
sinB = Math.sin( beta );

pos.x = this.x + len * cosA * sinB;
pos.y = this.y + len * sinA * sinB;
pos.z = this.z + len * cosB;

if( pos.x*pos.x + pos.y*pos.y + pos.z*pos.z < squareRange ){

passedExisting = true;
passedBuffered = true;
for( var i = 0; i < connections.length; ++i )
if( squareDist( pos, connections[ i ] ) < squareAllowed )
passedExisting = false;

if( passedExisting )
for( var i = 0; i < links.length; ++i )
if( squareDist( pos, links[ i ] ) < squareAllowed )
passedBuffered = false;

if( passedExisting && passedBuffered )
links.push( { x: pos.x, y: pos.y, z: pos.z } );

}

}

if( links.length === 0 )
this.isEnd = true;
else {
for( var i = 0; i < links.length; ++i ){

var pos = links[ i ],
connection = new Connection( pos.x, pos.y, pos.z, this.size * opts.sizeMultiplier );

this.links[ i ] = connection;
all.push( connection );
connections.push( connection );
}
for( var i = 0; i < this.links.length; ++i )
toDevelop.push( this.links[ i ] );
}
}
Connection.prototype.step = function(){

this.setScreen();
this.screen.color = ( this.isEnd ? opts.endColor : opts.connectionColor ).replace( 'light', 30 + ( ( tick * this.glowSpeed ) % 30 ) ).replace( 'alp', .2 + ( 1 - this.screen.z / mostDistant ) * .8 );

for( var i = 0; i < this.links.length; ++i ){
ctx.moveTo( this.screen.x, this.screen.y );
ctx.lineTo( this.links[ i ].screen.x, this.links[ i ].screen.y );
}
}
Connection.rootStep = function(){
this.setScreen();
this.screen.color = opts.rootColor.replace( 'light', 30 + ( ( tick * this.glowSpeed ) % 30 ) ).replace( 'alp', ( 1 - this.screen.z / mostDistant ) * .8 );

for( var i = 0; i < this.links.length; ++i ){
ctx.moveTo( this.screen.x, this.screen.y );
ctx.lineTo( this.links[ i ].screen.x, this.links[ i ].screen.y );
}
}
Connection.prototype.draw = function(){
ctx.fillStyle = this.screen.color;
ctx.beginPath();
ctx.arc( this.screen.x, this.screen.y, this.screen.scale * this.size, 0, Tau );
ctx.fill();
}
function Data( connection ){

this.glowSpeed = opts.baseGlowSpeed + opts.addedGlowSpeed * Math.random();
this.speed = opts.baseSpeed + opts.addedSpeed * Math.random();

this.screen = {};

this.setConnection( connection );
}
Data.prototype.reset = function(){

this.setConnection( connections[ 0 ] );
this.ended = 2;
}
Data.prototype.step = function(){

this.proportion += this.speed;

if( this.proportion < 1 ){
this.x = this.ox + this.dx * this.proportion;
this.y = this.oy + this.dy * this.proportion;
this.z = this.oz + this.dz * this.proportion;
this.size = ( this.os + this.ds * this.proportion ) * opts.dataToConnectionSize;
} else
this.setConnection( this.nextConnection );

this.screen.lastX = this.screen.x;
this.screen.lastY = this.screen.y;
this.setScreen();
this.screen.color = opts.dataColor.replace( 'light', 40 + ( ( tick * this.glowSpeed ) % 50 ) ).replace( 'alp', .2 + ( 1 - this.screen.z / mostDistant ) * .6 );

}
Data.prototype.draw = function(){

if( this.ended )
return --this.ended; // not sre why the thing lasts 2 frames, but it does

ctx.beginPath();
ctx.strokeStyle = this.screen.color;
ctx.lineWidth = this.size * this.screen.scale;
ctx.moveTo( this.screen.lastX, this.screen.lastY );
ctx.lineTo( this.screen.x, this.screen.y );
ctx.stroke();
}
Data.prototype.setConnection = function( connection ){

if( connection.isEnd )
this.reset();

else {

this.connection = connection;
this.nextConnection = connection.links[ connection.links.length * Math.random() |0 ];

this.ox = connection.x; // original coordinates
this.oy = connection.y;
this.oz = connection.z;
this.os = connection.size; // base size

this.nx = this.nextConnection.x; // new
this.ny = this.nextConnection.y;
this.nz = this.nextConnection.z;
this.ns = this.nextConnection.size;

this.dx = this.nx - this.ox; // delta
this.dy = this.ny - this.oy;
this.dz = this.nz - this.oz;
this.ds = this.ns - this.os;

this.proportion = 0;
}
}
Connection.prototype.setScreen = Data.prototype.setScreen = function(){

var x = this.x,
y = this.y,
z = this.z;

// apply rotation on X axis
var Y = y;
y = y * cosX - z * sinX;
z = z * cosX + Y * sinX;

// rot on Y
var Z = z;
z = z * cosY - x * sinY;
x = x * cosY + Z * sinY;

this.screen.z = z;

// translate on Z
z += opts.depth;

this.screen.scale = opts.focalLength / z;
this.screen.x = opts.vanishPoint.x + x * this.screen.scale;
this.screen.y = opts.vanishPoint.y + y * this.screen.scale;

}
function squareDist( a, b ){

var x = b.x - a.x,
y = b.y - a.y,
z = b.z - a.z;

return x*x + y*y + z*z;
}

function anim(){

window.requestAnimationFrame( anim );

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = opts.repaintColor;
ctx.fillRect( 0, 0, w, h );

++tick;

var rotX = tick * opts.rotVelX,
rotY = tick * opts.rotVelY;

cosX = Math.cos( rotX );
sinX = Math.sin( rotX );
cosY = Math.cos( rotY );
sinY = Math.sin( rotY );

if( data.length < connections.length * opts.dataToConnections ){
var datum = new Data( connections[ 0 ] );
data.push( datum );
all.push( datum );
}

ctx.globalCompositeOperation = 'lighter';
ctx.beginPath();
ctx.lineWidth = opts.wireframeWidth;
ctx.strokeStyle = opts.wireframeColor;
all.map( function( item ){ item.step(); } );
ctx.stroke();
ctx.globalCompositeOperation = 'source-over';
all.sort( function( a, b ){ return b.screen.z - a.screen.z } );
all.map( function( item ){ item.draw(); } );

/*ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.arc( opts.vanishPoint.x, opts.vanishPoint.y, opts.range * opts.focalLength / opts.depth, 0, Tau );
ctx.stroke();*/
}

window.addEventListener( 'resize', function(){

opts.vanishPoint.x = ( w = c.width = window.innerWidth ) / 2;
opts.vanishPoint.y = ( h = c.height = window.innerHeight ) / 2;
ctx.fillRect( 0, 0, w, h );
});
window.addEventListener( 'click', init );
</script>
</body>
</html>[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]

[i]
[/i]

标签:
Link:
隐藏链接
显示链接

回复