内容简介:对于复杂的背景动画,需要建立很多对象属性,我们可以将所有复杂的对象属性降低为单个数组形式。例如,假设我们想绘制一个2D粒子,往往具有以下基本属性:我们可以将它们存储在单个类型的数组中,而不是将这些值存储为对象属性,从而无需创建大量复杂的粒子对象。例如:
对于复杂的背景动画,需要建立很多对象属性,我们可以将所有复杂的对象属性降低为单个数组形式。例如,假设我们想绘制一个2D粒子,往往具有以下基本属性:
- 位置:position (x, y)
- 速度:velocity (x, y)
- 颜色:color
我们可以将它们存储在单个类型的数组中,而不是将这些值存储为对象属性,从而无需创建大量复杂的粒子对象。
例如:
const particleCount = 200;
const propCount = 5; // x, y, vx, vy, hue (hsla color)
const propsLength = particleCount * propCount; // length of the props array
let props;
function createParticles() {
props = new Float32Array(propCount);
// iterate for the length of the props array
// increment by the number of props per particle
for (let i = 0; i < propsLength; i += propCount) {
createParticle(i);
}
}
function createParticle(i) {
let x, y, vx, vy, hue;
// initialize values here, can randomize, use simplex noise or anything really :)
props.set([x, y, vx, vy, hue], i);
}
DEMO1
Demo1使用与旋转演示相同的技术来创建发光效果。为了使方块始终朝向相同的方向,使用了 .translate() 和 .rotate() 函数来旋转每个粒子。
DEMO2
Demo2使用了模糊效果制作出了漩涡旋转发光效果。
以上所述就是小编给大家介绍的《HTML5 Canvas炫酷背景动画特效》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C++数据结构与算法
[美]乔兹德克(Adam Drozdek) / 徐丹、吴伟敏 / 清华大学出版社 / 2014-10-1 / 63.00元
本书全面系统地介绍了数据结构,并以C++语言实现相关的算法。书中主要强调了数据结构和算法之间的联系,使用面向对象的方法介绍数据结构,其内容包括算法的复杂度分析、链表、栈、队列、递归、二叉树、图、排序和散列。书中还清晰地阐述了同类教材中较少提到的内存管理、数据压缩和字符串匹配等主题。书中包含大量的示例分析和图形,便于读者进一步理解和巩固所学的知识。一起来看看 《C++数据结构与算法》 这本书的介绍吧!