制作交互式3D排版效果

IT资讯 2018-08-04 105 次浏览 0 条评论

了解如何为您的网站创建令人兴奋的文字效果。

交互式3D排版
排版一直在任何设计师的工具库中扮演重要角色,因为他们选择了正确的字体,可以增强信息并为正在传达的内容提供正确的背景。在过去的八年中,网页设计师已经能够将自定义字体(如动力学排版)引入其设计中,并具有与印刷设计师所享有的相似的印刷控制。

看看许多屡获殊荣或获得“当日网站”标题的网站,您很快就会注意到他们对排版的使用成为设计的核心,使他们能够超越竞争对手。这可以是动画字母形式,反应性运动到用户交互,也可以是大胆使用类型形式的中心舞台。

3D字体:9种顶级提示
在本教程中,类型效果将使用字母的形状作为掩模,以便快速,自由流动的粒子轨迹将动态旋转并在字母中移动。不仅会有这个漂亮的动画,而且会将其渲染到HTML5画布元素上,这将在3D中进行转换,以便在屏幕上移动时朝向鼠标旋转。这非常适合网站标题,或者只是当您需要吸引用户的注意力来执行号召性用语时。

在此处下载教程文件

01.开始这个过程

从代码IDE中的项目文件中打开“start”文件夹。该项目将从创建粒子对象类开始。这将用于在项目的文本中创建流动图像。打开'sketch.js'文件并添加以下变量以开始创建基础粒子。

function Particle(){
this.pos = createVector(random(width),random((height - 100)));
this.vel = createVector(0,0);
this.acc = createVector(0,0);
this.maxspeed = maxSpeed;
this.prevPos = this.pos.copy();
交互式3D排版

p5.j​​s库广泛地帮助了正在创建的效果,该库允许大量帮助程序绘制到HTML5 canvas元素

02.更新粒子

为了移动粒子,每帧都会运行一个更新函数,这将计算出粒子的速度和加速度。速度最终将受到全局变量的限制,该变量将在以后添加。速度被添加到单个粒子的位置。通过创建一个粒子,任何时候都可以在屏幕上创建数千个粒子。

this.update = function(){
this.vel.add(this.acc);
this.vel.limit(this.maxspeed);
this.pos.add(this.vel);
this.acc.mult(0);
}
03.顺其自然

为了使粒子流动,将跟随由噪声产生的流场。这里创建的函数可以传入流向量,然后跟随它,因此该函数的名称。矢量方向的力将应用于粒子。

this.follow = function(vectors){
var x = floor(this.pos.x / scl);
var y = floor(this.pos.y / scl);
var index = x + y * cols;
var force = vectors [index];
this.applyForce(力);
}
04.跟随但不要太紧密

为了阻止所有颗粒聚集在一起,这种移动很容易发生,颗粒将在其位置上添加非常少量的随机性。这将导致轻微的散射。

this.scatter = function(vectors){
this.pos.x + = random(-0.9,0.9);
this.pos.y + = random(-0.9,0.9);
}
this.applyForce = function(force){
this.acc.add(力);
}
交互式3D排版

提前创建了基本的HTML5布局和CSS设计,以便您可以专注于JavaScript中文本效果的流畅线条的集成
05.显示粒子

此处的show函数显示粒子。它首先要做的是添加浅灰色的一个像素笔划来创建线条。该线从其当前位置绘制到前一帧的最后位置。先前的位置将通过循环存储下次。

this.show = function(){
行程(180);
strokeWeight,用于(1);
line(this.pos.x,this.pos.y,this.prevPos.x,this.prevPos.y);
this.updatePrev();
}
this.updatePrev = function(){
this.prevPos.x = this.pos.x;
this.prevPos.y = this.pos.y;
}
06.环绕

如果粒子到达屏幕的边缘,则边缘函数可以工作,如果是,则将其包裹在另一侧。此部分处理x位置,以便检测它是否大​​于屏幕的宽度,然后将其发送到左边缘,反之亦然。

this.edges = function(){
if(this.pos.x> width){
this.pos.x = 0;
this.updatePrev();
}
if(this.pos.x <0){
this.pos.x =宽度;
this.updatePrev();
}
07. Wrapper的喜悦

此代码是边缘检测的剩余部分,它检测屏幕顶部和底部的y轴上的粒子。这里的括号包含整个粒子类。这意味着通过使用此类可以创建许多粒子。


if(this.pos.y> height){
this.pos.y = 0;
this.updatePrev();
}
if(this.pos.y <0){
this.pos.y =身高;
this.updatePrev();
}
}
}
08.制造许多颗粒

现在,当粒子被创建时,是时候考虑制作许多粒子了。为此,我们所有的代码都可以超越Particle函数类。这里声明了许多全局变量以使系统能够运行。它们将在代码期间的不同时间被调用,因此可以对它们进行探索。

var inc = 0.1;
var scl = 100,zoff = 0;
var cols,rows,movement = 0;
var particles = [];
变流场;
var img;
var maxSpeed;
var t,calcX = 0,calcY = 0,currX = 0,currY = 0,targetX = 0,targetY = 0;
09.全力以赴

此处声明的设置功能设置屏幕在开始时的显示方式。第一次检测是看屏幕的宽度。如果它相对较大,则会加载一个大图像,创建画布并通过CSS缩放以适合显示。

function setup(){
if(windowWidth> 1200){
img = loadImage(“assets / studio.png”);
var canvas = createCanvas(1920,630);
maxSpeed = 10.5;
}
交互式3D排版

创建粒子对象类后,会向页面添加许多粒子。在没有添加文本效果的情况下可以看到流畅的线条

10.其他屏幕

if语句的其余部分检查不同的屏幕分辨率并加载最适合该屏幕大小的图像。类似地,创建了不同大小的画布元素。这主要是为了阻止移动设备处理比它更多的像素。

else if(windowWidth> 900){
img = loadImage(“assets / studio-tablet-wide.png”);
var canvas = createCanvas(1200,394);
scl = 60;
maxSpeed = 7;
} else {
img = loadImage(“assets / studio-tablet-tall.png”);
var canvas = createCanvas(700,230);
scl = 40;
maxSpeed = 5;
}
11.制作一个网格

一旦计算出屏幕尺寸,画布就会放在index.html页面中的标题div标签内。根据宽度和高度计算出许多列和行;它有点像一个看不见的网格。最后,为流场设置一个数组。

canvas.parent( '报头');
cols = floor(width / scl);
rows = floor(height / scl);
flowfield = new Array(cols);
12.制作粒子

根据屏幕的宽度设置粒子数 - 如果屏幕宽度为1920像素,则将创建2500个粒子并从那里向下移动。 for循环创建新粒子。屏幕的背景颜色设置为几乎全白。

var numParticles = Math.floor((2500/119)* width);
for(var i = 0; i <numParticles; i ++){
particles [i] = new Particle();
}
背景(245);
}
13.画出画面

所有计算的结果都在绘图函数的每一帧上绘制在屏幕上。首先,具有非常低不透明度的浅灰色矩形填充屏幕以淡化先前绘制的内容。在绘制之后,填充被关闭,因为粒子将由笔划而不是填充。

function draw(){
noStroke();
填充(245,10);
rect(0,0,width,height);
NOFILL();
var yoff = 0;
14.创建流动效果

为了获得流动效果,有两个'for'循环在行和列中移动以更新噪声值。然后将这些角度从准备好的噪声值改变为角度,以更新屏幕上每个位置的粒子。

for(var y = 0; y <rows; y ++){
var xoff = 0;
for(var x = 0; x <cols; x ++){
var index =(x + y * cols);
var angle = noise(xoff,yoff,zoff)* TWO_PI * 4;
var v = p5.Vector.fromAngle(angle);
15.更新阵列

使用角度更新流量数组,并增加值,以便每次上升时每个位置的偏移量都会增加。这可能看起来很复杂,但它实际上只是为了在屏幕上跟随粒子创建随机流动运动。

v.setMag(1);
流场[index] = v;
xoff + = inc;
}
yoff + = inc;
zoff + = 0.001;
}
交互式3D排版

文本现在存在,可以看到流畅的线条,在设计文本中旋转

16.更新粒子

现在粒子都在它们的数组中循环。每个单独的粒子被告知遵循流场,更新,检查屏幕边缘,稍微散射,最后使用show函数在屏幕上绘制。保存文件并测试'index.html'以查看粒子在移动。

for(var i = 0; i <particles.length; i ++){
颗粒[I]。遵循(流场);
颗粒[I] .update();
颗粒[I] .edges();
颗粒[I] .scatter();
颗粒[I] .show();
}
}
17.添加文字

文字是放在顶部的面具。为此,将正确的图像放在粒子的顶部。在绘制函数的右括号之前添加此代码。保存并检查浏览器以查看现在使用文本的效果。

image(img,0,0);
交互式3D排版

如果在较小尺寸的屏幕上加载设计,则由于屏幕较少,颗粒数量会减少

18.检测鼠标位置

引用鼠标位置,并将x和y值映射到可移动的角度角度。在y轴上,对于x轴,这将是-25到25,反之亦然。在绘制函数结束之前,应在添加最后一个代码之后放置剩余代码。

targetY = Math.round(map(mouseX,0,width,-25,25));
targetX = Math.round(map(mouseY,0,height,25,-25));
19.易于到位

现在给予目标位置一点缓和,以使度数慢慢达到目标。这是使用经典的缓动算法创建的,该算法从目的地取下当前位置并乘以低数字。

var vx =(targetX - currX)* 0.05;
var vy =(targetY - currY)* 0.05;
calcX + = vx;
calcY + = vy;
20.编写CSS

这里的't'变量采用计算出的值,并使用rotateX和rotateY的变换值将它们放入CSS字符串中。当前位置是根据画布当前旋转的位置计算的。

t ='rotateX('+ calcX +'deg)rotateY('+ calcY +'deg)';
currX = calcX;
currY = calcY;
交互式3D排版

代码的最后一部分采用鼠标位置并将CSS变换应用于canvas元素。这会将画布在3D空间中朝向鼠标旋转

21.结束

现在CSS已应用于此代码中的canvas元素。保存页面并在浏览器中预览。现在,鼠标完全更新画布的旋转,以便在鼠标移动时转动。当然,该空间中的所有粒子都随着它在屏幕上移动。

canvas.style.WebkitTransform = t;
canvas.style.msTransform = t;
canvas.style.transform = t;

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论