科迅教育老师直接接听

400-029-09** 400-029-0997 转 23498
查看完整号码
扫码拨号
微信扫码拨号

HTML5 Canvas千纸鹤动画特效

内容介绍

今天我们来分享一款很好看的千纸鹤飞翔效果，如图所示：

主要是使用到Canvas这个额技术。先看html5的代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HTML5 Canvas千纸鹤动画特效</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div id="controls"></div>

<script src='js/p5.min.js'></script>

<script src="js/index.js"></script>

</body>

</html>

然后是样式的效果：

* {

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

overflow: hidden;

background: black;

}

canvas {

display: block;

}

#controls {

z-index: 2;

margin: 20px;

position: absolute;

top: 0;

left: 0;

color: white;

}

接下来是脚本：

birds = [];

let numBirds = 50;

 

class Bird{

  constructor(){

    this.pos = [random(width), random(height)];

    this.size = pow(random(), 2)*80 + 40;

    this.angle = random(PI/16) + PI/8;

    this.speed = this.size/600;

    this.hue = random();

    

    let p = [

      [0, 0],

      [random(.00, .10), random(.1, .4)], //beak

      [random(.10, .50), -random(.1, .2)], //head

      [random(.50, .80), random(.1, .3)], //body

      [random(.80, 1.0), -random(.2, .4)], //tail

      [1, 0],

      [random(.30, .40), 0], //wing base 1

      [random(.80, .90), 0], //wing base 2

      [random(.50, .65), -random(.4, .6)], //wing tip 1

      [random(.65, .70), -random(.4, .6)], //wing tip 2

    ];

    

    this.triangles = [

      // idx, idx, idx, color , isWing

      [...p[0], ...p[1], ...p[2], randColor(this.hue), false], //head

      [...p[3], ...p[4], ...p[5], randColor(this.hue), false], //tail

      [...p[6], ...p[7], ...p[8], randColor(this.hue), true ], //back wing

      [...p[0], ...p[2], ...p[3], randColor(this.hue), false], //body 1

      [...p[2], ...p[3], ...p[5], randColor(this.hue), false], //body 2

      [...p[6], ...p[7], ...p[9], randColor(this.hue), true ], //front wing

    ]

  }

  render(){

    push();

    let p = this.pos;

    translate(...p);

    scale(this.size);

    strokeWeight(1/this.size);

    

    p[0] += cos(this.angle+PI)*this.speed*20;

    p[1] += sin(this.angle+PI)*this.speed*20;

    if (p[0] < -this.size ) p[0] += width +this.size;

    if (p[1] < -this.size/2) p[1] += height+this.size/2;

    

    let s = cos(frameCount*this.speed)

    rotate(this.angle);

    this.triangles.map(t => {

      fill(...(t[6]))

      if (t[7]) triangle(...t.slice(0, 5), t[5]*s);

      else triangle(...t);

    })

    

    pop();

  }

}

 

function randColor(base = 0, amt=.2){

  return [(base+random(amt)-amt/2)%1, .2 + random(amt), .8 + random(amt)];

}

 

function setup (){

  pixelDensity(1);

  createCanvas();

  colorMode(HSB, 1, 1, 1);

  windowResized();

}

 

function init(){

  birds = [];

  for (let i = 0; i < numBirds; i++) birds.push(new Bird());

  birds = birds.sort((a,b) => a.size - b.size);

}

 

function draw(){

  background(0, .5);

  birds.map(b => b.render());

}

 

function mousePressed(){windowResized();}

function windowResized(){

  resizeCanvas(windowWidth, windowHeight);

  init();

}

这期就到这里，下期见。

添加微信咨询
黄老师 @南通科迅教育

获取课程资料+免费试听，体验强师课程！

微信号：ntk******88

立即咨询

“南通科迅教育”是南通科迅教育信息咨询有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：4.0师资：4.0服务：4.0效果：4.0

公示信息

店铺名称：南通科迅教育

单位名称：南通科迅教育信息咨询有限公司

账号名称：ntkxjy（136******78）

所属城市：江苏南通

入驻时长：18年

在线客服：在线聊

相关课程

微信咨询

返回顶部