Canvas 基于GSAP的膨胀动画实验

不断膨胀的物体

inflate

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// --------------------------

var width, height, prevTime;
var canvas = document.getElementById('c');
var ctx    = canvas.getContext('2d');

width = window.innerWidth;
height = window.innerHeight;

canvas.width  = width;
canvas.height = height;

// ================

var xNum = 15;
var yNum = 7;
var halfXNum = 8;
var halfYNum = 4;

var kankaku = 20;

var xPosArr = [];
var yPosArr = [];

init();
loop();

var curRad = 20;

function init(){

var halfWidth = width/2;
    var halfHeight = height/2;

for(var xx = 0; xx < xNum; xx++){
        xPosArr[xx] = [];
        yPosArr[xx] = [];
        for(var yy = 0; yy < yNum; yy++){
            var xPos = halfWidth  + (xx - halfXNum) * kankaku;
            var yPos = halfHeight + (yy - halfYNum) * kankaku;

xPosArr[xx][yy] = xPos;
            yPosArr[xx][yy] = yPos;

}
    }

prevTime = +new Date;

timer()
}

function timer(){
    var rad =  curRad + 20;
    if(rad > 300) rad = 20;

TweenLite.to(this,.5, { curRad: rad});

setTimeout(timer, 600);
}

function loop(){
    var curTime = +new Date;
    var duration = (curTime - prevTime)/1000;
    prevTime = curTime;

ctx.globalCompositeOperation  = 'source-over';

ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, width, height);

for(var xx = 0; xx < xNum; xx++) {
        for (var yy = 0; yy < yNum; yy++) {
            //xPosArr[xx][yy] += Math.random() - .5;
            //yPosArr[xx][yy] += Math.random() - .5;

ctx.globalCompositeOperation = 'xor';

ctx.beginPath();
            ctx.fillStyle = "#000000";
            ctx.arc(xPosArr[xx][yy], yPosArr[xx][yy], curRad, 0, 2*Math.PI, false);
            ctx.fill();
            ctx.closePath();
        }
    }

requestAnimationFrame(loop);
}

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

编译

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

body {
  overflow: hidden; }

canvas {
  width: 100%;
  height: 100%; }

HTML

不断膨胀的物体

inflate

编辑器支持Emmet

快捷键

不断膨胀的物体

inflate

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：