HTML5鼠标控制树镜动画特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

98 388 130



特效描述:HTML5 鼠标控制 树镜动画。HTML5鼠标控制树镜动画特效代码下载

代码结构

1. HTML代码

<canvas class="canvas canvas-pattern js-canvas" width="500" height="500"></canvas>
<canvas class="canvas js-duplicate" width="500" height="500"></canvas>
<script type="text/javascript">
const canvas = document.querySelector('.js-canvas');
const ctx = canvas.getContext('2d');
const canvas2 = document.querySelector('.js-duplicate');
const ctx2 = canvas2.getContext('2d');
const dim = Math.min(window.innerWidth, window.innerHeight) * 0.95;
const w = dim;
const h = dim;
const midX = w >> 1;
const midY = h >> 1;
const PI = Math.PI;
const TO_RADIAN = PI / 180;
const maxDepth = 5;
const maxSpread = 90 * TO_RADIAN;
let autoAnimate = true;
let divergeAt = 0.5;
let spread = 45 * TO_RADIAN;
let tick = 0;
let autoSpeed = 0.004;
let autoTick = 0;
canvas.width = canvas2.width = w;
canvas.height = canvas2.height = h;
class Branch {
  constructor(position = {x : 0, y: 0}, length = 100, divergeAt = 0.5, angle = 0, depth = 0, spread = 45 * TO_RADIAN) {
    this.position = position;
    this.length = length;
    this.divergeAt = divergeAt;
    this.angle = angle;
    this.depth = depth;
    this.color = '#000';
    this.spread = spread;
    this.branches = [];
    this.grow();
  }
  grow() {
    if (!this.canBranch) {
      return;
    }
    this.branches = [];
    const nextLength = this.length * 0.75;
    const nextDepth = this.depth + 1;
    this.branches.push(
      new Branch(
        this.growPosition,
        nextLength,
        this.divergeAt,
        this.angle + this.spread,
        nextDepth,
        this.spread
      ),
      new Branch(
        this.growPosition,
        nextLength,
        this.divergeAt,
        this.angle - this.spread,
        nextDepth,
        this.spread
      )
    );
  }
  update(spread, divergeAt) {
    this.spread = spread;
    this.divergeAt = divergeAt;
    this.grow();
  }
  get growPosition() {
    const dl = this.length * this.divergeAt;
    return {
      x: this.position.x + (Math.cos(this.angle) * dl),
      y: this.position.y + (Math.sin(this.angle) * dl),
    };
  }
  get canBranch() {
    return this.depth < maxDepth;
  }
}
const rootBranch = new Branch(
  { x: midX, y: midY },
  midY * 0.5,
  divergeAt,
  -90 * TO_RADIAN,
  0,
  spread
);
const drawBranch = (branch, phase) => {
  const h = ~~(200 + (160 * phase));
  const l = 50 + ~~(((branch.depth / (maxDepth + 1))) * 50);
  const endX = branch.length;
  const endY = 0;
  const r = 2;
  ctx.save();
  ctx.strokeStyle = `hsl(${h}, 100%, ${l}%)`;
  ctx.translate(branch.position.x, branch.position.y);
  ctx.rotate(branch.angle);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(endX, endY);
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.fillStyle = `hsl(${h}, 100%, 50%)`;
  ctx.arc(endX, endY, r, 0, PI * 2, false);
  ctx.fill();
  ctx.closePath();
  ctx.restore();
  branch.branches.forEach((b) => {
    drawBranch(b, phase);
  });
};
const map = (value, start1, stop1, start2, stop2) => ((value - start1) / (stop1 - start1)) * (stop2 - start2) + start2;
const clear = () => {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
};
const loop = () => {
  let phase = rootBranch.spread / maxSpread;
  clear(phase);
  if (autoAnimate) {
    phase = map(Math.sin(autoTick), -1, 1, 0, 1);
    spread = phase * maxSpread;
    divergeAt = map(Math.sin(autoTick), -1, 1, 0, 0.5);
    autoTick += autoSpeed;
  }
  rootBranch.update(spread, divergeAt);
  drawBranch(rootBranch, phase);
  const numSegments = 12;
  const angleInc = PI * 2 / numSegments;
  let angle = tick;
  for (let i = 0; i < numSegments; i++) {
    ctx2.save();
    ctx2.translate(midX, midY);
    ctx2.rotate(angle);
    ctx2.drawImage(canvas, -w / 2, -h / 2);
    ctx2.restore();
    angle += angleInc;
  }
  tick += 0.002;
  requestAnimationFrame(loop);
};
const onPointerMove = (e) => {
  if (autoAnimate) {
    return;
  }
  const target = (e.touches && e.touches.length) ? e.touches[0] : e;
  const { clientX: x, clientY: y } = target;
  const width = window.innerWidth;
  const height = window.innerHeight;
  spread = (x / width) * maxSpread;
  divergeAt = y / height;
};
document.body.addEventListener('mousemove', onPointerMove);
document.body.addEventListener('touchmove', onPointerMove);
document.addEventListener('mouseenter', () => {
  autoAnimate = false;
});
document.addEventListener('mouseleave', () => {
  autoAnimate = true;
});
loop();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到