Web前端笔记-two.js图形旋转动画的2种实现方式

这里有两种方式！
第一种是使用setInterval：

代码如下：

  let time = setInterval(function(){
 
    if(sun.sun.rotation >= TWO_PI - 0.0625){
 
      sun.sun.rotation = 0;
    }
    sun.sun.rotation += (TWO_PI - sun.sun.rotation) * 0.0625;
 
  }, 300);

运行截图如下：

第二种是使用two.bind('update', function(frameCount){})

代码如下：

  two.bind('update', function (frameCount){
 
 
    if(sun.sun.rotation >= TWO_PI - 0.0625){
 
      sun.sun.rotation = 0;
      console.log("Hello");
    }
    sun.sun.rotation += (TWO_PI - sun.sun.rotation) * 0.0625;
 
  }).play();

运行截图如下：

第2种方式效果比第1种方式要好。

项目代码draw.js

import {SunElement} from "JS/elements/sun";
 
;
 
import * as Two from "JS/two";
import * as $ from "JS/jquery";
 
let two;
let mouse;
let isPressed = false;
let originalPositionX = 0;
let originalPositionY = 0;
let map = new Map();
let rect;
let TWO_PI = Math.PI * 2;
let sunArry;
 
export function drawGraphic(){
 
  let elem = document.getElementById("draw-shapes");
  let params = {
 
    type: Two.Types['webgl'],
    fullscreen: true,
    autostart: true
  };
 
  two = new Two(params).appendTo(elem);
  mouse = new Two.ZUI(two.scene);
  mouse.addLimits(0.1, 10);
 
  let $stage = $(two.renderer.domElement);
  $stage.bind('mousewheel wheel', function(event){
 
    let e = event.originalEvent;
    e.stopPropagation();
    e.preventDefault();
 
    let dy = (e.wheelDeltaY || -e.deltaY) / 1000;
    mouse.zoomBy(dy, e.clientX, e.clientY);
  });
 
  $stage.bind('mouseup', function(event){
 
    isPressed = false;
  });
  $stage.bind('mouseout', function(event){
 
    isPressed = false;
  });
 
  $stage.bind('mousedown', function(event){
 
    isPressed = true;
    originalPositionX = event.clientX;
    originalPositionY = event.clientY;
 
    let x = event.clientX;
    let y = event.clientY;
 
    for(let value of map){
 
      let xOffset = value[0]._width / 2;
      let yOffset = value[0]._height / 2;
 
      let letX = ((value[0]._translation._x - xOffset) * (two.scene._matrix.elements[0]) + two.scene._matrix.elements[2]);
      let letY = ((value[0]._translation._y - yOffset) * (two.scene._matrix.elements[4]) + two.scene._matrix.elements[5]);
      let letWidth = value[0]._width * two.scene._matrix.elements[0];
      let letHeight = value[0]._height * two.scene._matrix.elements[4];
 
      if(x > letX &&
        y > letY &&
        x < letX + letWidth &&
        y < letY + letHeight
      ){
 
        let r = Math.round(Math.random() * 255);
        let g = Math.round(Math.random() * 255);
        let b = Math.round(Math.random() * 255);
 
        let rgbStr = "rgb(" + r + "," + g + "," + b + ")";
        value[0].fill = rgbStr;
        break;
      }
    }
 
  });
 
  $stage.bind('mousemove', function(event){
 
    if(isPressed){
 
      let boolX = event.clientX - originalPositionX;
      let boolY = event.clientY - originalPositionY;
      // console.log(boolX + " " + boolY);
      mouse.graphicMove(boolX, boolY);
      originalPositionX = event.clientX;
      originalPositionY = event.clientY;
    }
  });
 
  createBtn(1001, 200, 200, 500, "red");
  createBtn(1002, 400, 400, 500, "green");
  createBtn(1003, 600, 600, 500, "blue");
  createBtn(1004, 800, 800, 500, "black");
  createBtn(1005, 1000, 1000, 500, "yellow");
  createBtn(1006, 400, 800, 500, "purple");
 
  let value = {
    two: two,
    x: 800,
    y: 200,
    len: 100
  };
  let sun = new SunElement(value);
 
 
  two.bind('update', function (frameCount){
 
 
    if(sun.sun.rotation >= TWO_PI - 0.0625){
 
      sun.sun.rotation = 0;
      console.log("Hello");
    }
    sun.sun.rotation += (TWO_PI - sun.sun.rotation) * 0.0625;
 
  }).play();
 
  // let time = setInterval(function(){
  //
  //   if(sun.sun.rotation >= TWO_PI - 0.0625){
  //
  //     sun.sun.rotation = 0;
  //   }
  //   sun.sun.rotation += (TWO_PI - sun.sun.rotation) * 0.0625;
  //
  // }, 300);
 
}
 
function createBtn(id, x, y, weight, color) {
 
  rect = two.makeRectangle(x, y, 200, 200);
  rect.noStroke();
  rect.fill = color;
  rect.myId = id;
 
  map.set(rect, weight);
}
 
//计算当前屏幕圆心 对应的 图形坐标
function getScreenOriginal(){
 
  let original = {
    x: 0,
    y: 0
  };
 
  original.x = two.width / 2;
  original.y = two.height / 2;
 
  // console.log(two.scene._matrix.elements)
 
  //获取水平位移及垂直位移
  //将浏览器上界面坐标转换为two.js的场景坐标,也就是 cirX和cirY为当前界面中点的场景坐标
  let cirX = (original.x - two.scene._matrix.elements[2]) / two.scene._matrix.elements[0];
  let cirY = (original.y - two.scene._matrix.elements[5]) / two.scene._matrix.elements[4];
 
  console.log("当前圆心 cirX:" + cirX + "  cirY:" + cirY);
 
  original.x = cirX;
  original.y = cirY;
 
  return original;
}
 
export function flyToPosition(x, y){
 
  //当前屏幕中点 对应的 场景坐标
  let dot = getScreenOriginal();
  // console.log(dot);
 
  let c = two.makeCircle(x, y, 10);
  c.fill = "red";
 
  let differenceValueX = (dot.x - x) * two.scene._matrix.elements[0];
  let differenceValueY = (dot.y - y) * two.scene._matrix.elements[4];
  console.log(two.scene._matrix.elements);
  console.log("差值："+ differenceValueX + "  " + differenceValueY);
 
 
  //飞到对应x,y坐标点，这个x, y将会变成新的屏幕中心点
  mouse.graphicMove(differenceValueX, differenceValueY);
  originalPositionX = differenceValueX;
  originalPositionY = differenceValueY;
 
}

图中那个太阳相关代码：

;
 
 
export class SunElement{
 
  constructor({two, x, y, len}){
 
    this.x = x;
    this.y = y;
    this.two = two;
    this.len = len;
    this.render();
  }
 
  render() {
 
    let color = "rgba(255, 128, 0, 0.66)";
    let sun = this.two.makeGroup();
    let radius = this.len;
    let gutter = this.len / 5;
 
    let core = this.two.makeCircle(this.x, this.y, radius);
    core.noStroke();
    core.fill = color;
    sun.core = core;
    let coronas = [];
    let corona_amount = 16;
    for(let i = 0; i < corona_amount; i++){
 
      let pct = (i + 1) / corona_amount;
      let theta = pct * Math.PI * 2;
      let x = (radius + gutter) * Math.cos(theta);
      let y = (radius + gutter) * Math.sin(theta);
      console.log("x:" + x + "  Math.cos(theta):" + Math.cos(theta) + "  theta:" + theta);
 
      let corona = this.makeTriangle(gutter);
      corona.noStroke();
      corona.fill = color;
      corona.translation.set(x, y);
      corona.rotation = Math.atan2(-y , -x) + Math.PI / 2;
      coronas.push(corona);
    }
 
    sun.add(coronas);
    this.sun = sun;
    sun.translation.set(this.x, this.y)
    return sun;
  }
 
  makeTriangle(size){
 
    let tri = this.two.makePath(-size / 2, 0, size / 2, 0, 0, size);
    return tri;
  }
}