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;
}
}