TweenMax实现二维动物卡通头组成的三维圆球旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax实现二维动物卡通头组成的三维圆球旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; overflow: hidden; } canvas { width: 100vw; height: 100vh; } </style> </head> <body > <canvas id="scene"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script > console.clear(); // Get the canvas element from the DOM const canvas = document.getElementById('scene'); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; // Store the 2D context const ctx = canvas.getContext('2d'); if (window.devicePixelRatio > 1) { canvas.width = canvas.clientWidth * 2; canvas.height = canvas.clientHeight * 2; ctx.scale(2, 2); } function getTexture(emoji) { const tempCanvas = document.createElement("canvas"); const tempCtx = tempCanvas.getContext("2d"); tempCanvas.width = 60; tempCanvas.height = 60; tempCtx.textAlign = 'center'; tempCtx.textBaseline = 'middle'; tempCtx.font = '54px serif'; tempCtx.fillText(emoji, 30, 35); return tempCanvas; } const textures = [getTexture('🦊'), getTexture('🦓'), getTexture('🐹'), getTexture('🐨')]; /* ====================== */ /* ====== VARIABLES ===== */ /* ====================== */ let width = canvas.offsetWidth; // Width of the canvas let height = canvas.offsetHeight; // Height of the canvas const dots = []; // Every dots in an array /* ====================== */ /* ====== CONSTANTS ===== */ /* ====================== */ /* Some of those constants may change if the user resizes their screen but I still strongly believe they belong to the Constants part of the variables */ let DOTS_AMOUNT = Math.min(width, height); // Amount of dots on the screen const DOT_RADIUS = 20; // Radius of the dots let PROJECTION_CENTER_X = width / 2; // X center of the canvas HTML let PROJECTION_CENTER_Y = height / 2; // Y center of the canvas HTML let PERSPECTIVE = width * 0.8; let GLOBE_RADIUS = Math.min(width, height) * 0.4; class Dot { constructor() { this.theta = Math.random() * 2 * Math.PI; // Random value between [0, 2Pi] this.phi = Math.acos((Math.random() * 2) - 1); // Random value between [0, Pi] this.texture = textures[Math.floor(Math.random() * textures.length)]; // Calculate the [x, y, z] coordinates of the dot along the globe this.x = 0; this.y = 0; this.z = 0; this.radius = Math.random() * (GLOBE_RADIUS * 0.2) + (GLOBE_RADIUS * 0.8); this.xProjected = 0; this.yProj.........完整代码请登录后点击上方下载按钮下载查看
网友评论0