整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
用dtns.network德塔世界（开源的智体世界引擎），策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎（内嵌了three.js编辑器的定制版-支持以第一视角游览3D场馆），可以在浏览器和node.js、deno、electron上运行，它是一个跨平台的软件，支持多个操作系统使用！
下面分为几步介绍，如何基于dtns.plugin实现烟花插件的制作。该《烟花插件》采用开源的js-canvas绘制燃放烟花的特效。通过dtns.plugin（基于vue2.x版本构建《烟花插件》），通过npm build lib编译生成index.js，将index.js和index.json配置文件，压缩生成dpkg的类似各类小程序安装包的插件。
基于js原生开发的dtns.plugin插件，拥有移植方便，使用简单，易于传播的特点。并且上手简单，特别容易开发。是除了poplang智体编程之外，极好的插件开发技术栈。可以轻松地在dtns.network智体世界和dtns.connector客户端中，实现各类轻应用（例如dpkg、xverse、xcard等）开发的利器！
这也是构建dtns.os（智体OS）的利器！
注：第一次点击会下载dpkg插件文件（并提示文件保存路径——游览器）；第二次点击会进入“烟花插件”页面（/firework路径，后面会讲到如何配置这个页面路由路径）
注：由于顶部无【返回】按钮，须通过游览器的回退按钮或手机上的返回触摸键返回头榜页面。
注：如上图所示，在dtns.plugin/pkgs/pages/firework/FireWork.vue中查看到template标签，继续向下滑动，可以看到这个是一个典型的vue文件（如下图所示）
注：可以看到vue模板template的name为FireWork（插件名称，后续引入这个component组件，需要用到，并且在dpkg插件的配置文件index.json中也需要声明）
注：须将刚才的Firework.vue组件，导入为FireWork变量，并且存放于components数组中，以便install函数安装（在vue中安装为全局组件，以方便导入dtns.connector后能按组件名称（name）进行加载插件。
注：通过上述的scripts中的指令，可以看到运行npm run lib，即可编译生成index.js库文件（后续改名为index.js插件文件）
在vscode终端中运行npm run lib指令后，生成lib\dtns-plugin.um.min.js库文件（如下图所示）
注：后续步骤，会将这个文件修改为index.js的dpkg插件js文件。
注：打开demo.html，可以看到将./lib/dtns-plugin.um.js库文件导入，并引入了vue.min.js库文件，然后在div-id=”app”的html元素正方，通过fire-work标签引入了名称为FireWork的组件。这是一个典型的vue2.x的web应用。Vue.js开发者应该很快能理解它。
打开刚才的dtns.plugin/demo.html，可以看到如上效果图
注：亦可复制dtns-plugin.um.js文件（但是文件未经压缩，会导致插件dpkg文件变大）
注：只有index.js才能被dtns.connector真正识别并导入插件成功。
注：这是一个[]的数组，里面包含了一个{}json对象
注2：属性name是插件的名称；path代表了插件加载后打开的路径，workPath是代表在ibchat智体IB中输入指令“firework”（“word”属性的值）后路径的路径。
注３：url属性务必为刚才的vue组件名“FIreWork”——写错将导致该插件无法被识别并导入——并且type属性须为“name”，不能为vue或其它值。
注４：其它的title、desc、author、date按照开发者实际情况填写即可。
注：将index.js和index.json直接右键菜单，选择压缩文件为zip。然后将.zip文件后缀修改为.dpkg（注意，有些操作系统会隐藏这个文件格式后缀，将在【文件夹选项-查看文件格式】等方式实现文件后缀的查看和修改为.dpkg。
点击+号后，进入发布头榜页面（如下图所示）
注：将刚才压缩生成的firework-4.dpkg轻应用包，以文件方式上传。并将头榜内容设置为“烟花插件-4”，并点击右上角“确认”按钮，发布插件成功！
进入3D场景编辑器（如下图所示）
注：通过滚动球控制玩家视角正对着“乔布斯传”3D摆件正前方。
注：我们看到，通过$.g_firework_onload实现了对烟花插件的全局函数的调用——以实现在3D纪念馆中燃放烟花。
注2：通过ib3.file.go obj_file* onflag实现了烟花插件的预加载（不须人工点击，实现自动安装烟花插件——后续的dtns.os智体操作系统，亦可通过该指令实现了插件的自动化部署和全局函数的调用）
注：点击屏幕中间，这些烟花特效会关闭（亦是在FireWork.vue中实现了该事件的绑定）
通过上述16步，我们成功完成了“烟花插件”的制作。通过dtns.plugin插件引擎，我们成功的构建了dpkg插件文件，从而直接通过头榜上传和头榜支付购买烟花插件.dpkg文件的方式，为dtns.connector德塔世界连接器融入了烟花插件功能（并实现了3D场馆中调用插件全局函数）。最终实现了3D场馆的摆件点击播放烟花插件动画，完整实现了一个从vue插件构建，上传发布，文件锁售卖插件，在poplang智体编程场景中调用全局函数使用它的完整闭环。
整个dpkg插件的体验非常完整。可以看到，使用dpkg和dtns.plugin插件系统，可轻松构建dtns.connector的轻应用插件生态。插件的开发、部署、上传、体验、销售、购买均非常方便。非常适合构建【插件商店】生态、插件开发者生态、插件开源生态等。
总结而言：dtns.connector德塔世界连接器，拥有了dpkg轻应用生态（融入了vue.js插件开发生态），变得更像是一个基于游览器原生应用的操作系统：可命名为dtns.os操作系统。所有插件和项目均为开源，欢迎体验！
注：dtns.network德塔世界（开源的智体世界引擎）是在github和gitee上开源的项目！
祝建党100周年 祖国 长沙
感恩当下，祝福未来
长沙橘子洲的烟花真好看
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
那给你们也搞个代码做的烟花吧！
在网上转载大神写的, 用谷歌浏览最好
代码里调用 run() 可实现带线的烟花,
点击canvas生成一朵烟花
右击canvas清空一次画布
双击canvans生成一朵带线的随机烟花
代码里我将clear()方法隐藏掉了, 所以不会每一帧都清空画布
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击放烟花, 右击清空</title>
<style>
*{margin:0;padding:0;background-color:black;}
canvas{border:1px solid;}
</style>
<!-- 烟花类 和烟花碎屑类 -->
<script>
// 烟花
function Firework(sx, sy, ex, ey, hue){
this.sx = sx; // 开始x轴
this.sy = sy; // 开始y轴
this.ex = ex; // 结束x轴
this.ey = ey; // 结束y轴
this.x = sx; // 实时x轴
this.y = sy; // 实时y轴
this.old = new Array(); // 之前的旧角度
this.speed = random(50, 100);
this.angle = Math.atan2(ey - sy, ex - sx); // 角度
this.actualDistance = 0; // 实际路径
this.distance = countDistance(sx, sy, ex, ey); // 计算总距离
this.acceleration = 1.05; // 加速
this.friction = 0.95 //摩擦力
this.gravity = 1; //重力
this.hue = hue; // 色调
this.brightness = random(50, 80); //随机明度
this.alpha = 1; //初始透明度
this.decay = random(0.015, 0.03); //碎屑小时的时间
this.color = "black";
// 现将old存储两个xy, 防止画出的时候下标溢出
this.old.push({x:this.x, y:this.y});
this.old.push({x:this.x, y:this.y});
}
// 烟花路径更新
Firework.prototype.update = function(){
this.old.push({x:this.x, y:this.y}); // 储存废旧路径
var x = Math.cos(this.angle) * this.speed;
var y = Math.sin(this.angle) * this.speed;
this.actualDistance = countDistance(this.sx, this.sy, this.x + x, this.y + y);
this.x += x;
this.y += y;
this.old.push({x:this.x, y:this.y});
if(this.distance < this.actualDistance) // 行走路径大于实际路径
return false; // 烟花到目标燃放点
else
return true; // 烟花未到目标燃放点
}
// 爆炸颗粒
function Particle(x, y, hue){
this.x = x;
this.y = y;
this.old = new Array(); // 记录步数
this.angle = random(0, 2 * Math.PI); // 任意角度
this.speed = random(1, 10); //随机速度
this.friction = 0.95 //摩擦力
this.gravity = 1; //重力
this.hue = random(hue - 20, hue + 20); //生成与烟花色彩相近的碎屑
this.brightness = random(50, 80); //随机明度
this.alpha = 1; //初始透明度
this.decay = random(0.015, 0.03); //碎屑存在时间
}
// 爆炸颗粒更新
Particle.prototype.update = function(){
this.old.push({x:this.x, y:this.y});
this.speed *= this.friction; // 添加重力
this.x += Math.cos(this.angle) * this.speed; // 计算下一步x轴
this.y += Math.sin(this.angle) * this.speed + this.gravity; // 计算下一步y轴 + 重力
this.old.push({x:this.x, y:this.y});
this.alpha -= this.decay; // 每走一步消除碎屑透明度
if(this.alpha < this.decay){ // 碎屑透明度轻于碎屑存在时间
return false; // 烟花要消失
}else{
return true; // 烟花在燃放
}
}
// 爆炸颗粒工厂
function ParticleFactory(sx, sy, hue){
var array = new Array();
var size = random(50, 500); // 烟花数量
var scope = random(50, 500); // 烟花范围
for(var i = 0 ; i < size ; i++){
array.push(new Particle(sx, sy, hue));
}
return array;
}
</script>
<!-- 工具类 -->
<script>
// 随机数
function random(min, max) {
return Math.random() * (max - min) + min;
}
// 随机颜色
function randomRgba(min, max) {
var r = random(0, 255);
var g = random(0, 255);
var b = random(0, 255);
var opacity = random(0.1, 1);
var color = "rgba(" + r + ", " + g + ", " + b + ", " + opacity + ")";
return color;
}
// 计算角度
function countDistance(x, y, xx, yy) {
var a = x - xx;
var b = y - yy;
return Math.sqrt(a * a + b * b);
}
// 清空画布
function clear(){
// ctx.clearRect(0, 0, width, height);
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'lighter';
}
// 画线
function draw(obj){
ctx.beginPath();
ctx.moveTo(obj.old[obj.old.length-2].x, obj.old[obj.old.length-2].y);
ctx.lineTo(obj.x, obj.y);
var color = 'hsla(' + obj.hue + ',100%,' + obj.brightness + '%,' + obj.alpha + ')';
ctx.strokeStyle = color;
ctx.stroke();
}
</script>
</head>
<body>
<canvas style="background-color:black;" id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = window.innerWidth - 10, height = window.innerHeight - 10;
var widthBorder = width * 0.1;
var heightBorder = height * 0.1;
var hue = 20;
canvas.width = width;
canvas.height = height;
canvas.onclick = function(){
moveParticle(ParticleFactory(event.x, event.y, hue+=10))
}
canvas.oncontextmenu = function(e){
e.preventDefault();
clear();
}
// 组合
function run(){
var x = width / 2;
var y = height;
var xx = random(widthBorder, width - widthBorder);
var yy = random(heightBorder, height - heightBorder);
var firework = new Firework(x, y, xx, yy, hue);
hue += 10;
moveFirework(firework);
}
// 烟花线
function moveFirework(f){
var id = setInterval(function(){
// 设置不画线
draw(f);
if(!f.update()){
draw(f);
clearInterval(id);
moveParticle(ParticleFactory(f.x, f.y, f.hue));
}
}, 100);
}
// 爆炸屑
function moveParticle(arr){
var id = setInterval(function(){
var i = arr.length;
var o = null;
if(i){
// clear();
}else{
clearInterval(id);
}
while(i--){
o = arr[i];
if(o.update()){
draw(o);
}else{
arr.splice(i, 1);
}
}
}, 70);
}
</script>
</html>
喜欢的一键三连哦！
果果为大家带来了
C/C++的学习基础教程及相关资源
（仅仅是部分截图哦）
女生总是会在被求婚的时候感动的痛哭流涕，作为程序员的你如果提前给自己的女票一个求婚的动画，想象一下她会不会很感动呢？
今天就教大家用CSS3来做一个求婚的动画效果吧，源码已经放在了Github上，感兴趣的可以认真看下源码，地址如下：
https://github.com/zhouxiongking/article-pages/tree/master/articles/wedding
CSS
首先我们来看看实际运行出来的效果，如下图所示。
效果图
在整个效果中，其实是用到了一系列的图片，然后控制图片的出现顺序以及出现和结束的位置。
在这个效果中，主要应用到的是animation属性，如果对这个属性还不是很了解的，可以先去学习一下。接下来我们具体分析整个动态是怎么实现的。
首先，我们看看页面的构成，包括文字，其他的都是图片，包括三个烟花效果，男孩，女孩，男孩手中的花，底部的花。页面HTML代码如下所示。
页面HTML
文字部分主要是有一个平移的效果，所以使用translate属性即可。
文字部分动画
在文字旁边的烟花效果实际是一张图片从中心点向外的扩张，因此可以使用scale属性实现，然后通过时间的不同，来显示出不同的烟花。
烟花效果
图中的女孩实际是站着不动，只是通过改变透明度来显示出动画效果，因此可以使用opacity属性来实现。
女孩效果
图中的男孩实际有一个向女孩移动的效果，因此也是通过translate属性来实现。
男孩效果
男孩手中的鲜花实际上也是一个由中心点向外扩张的效果，并且改变透明度，通过scale和opacity属性实现。
手中鲜花效果
底部的鲜花实际是由两张图片重复显示组成，然后给每张图片增加一个动画效果，从效果图中可以看出是有一个从下到上的平移过程，因此也是使用translate属性实现。
底部鲜花效果
至此所有的动画效果都已经讲解完毕了，虽然每个动画只是用到一两个属性，但是组合之后就可以完成这样一个小巧的求婚动画，是不是很有趣呢?
当然文中的代码并不是全部的实现，文中的代码只包括使用CSS3的动画效果的实现，全部的代码可以去Github上去看。
今天的这篇文章学会了吗？
*请认真填写需求信息，我们会在24小时内与您取得联系。
