从零开始学_javascript_系列——dojo(基础,动画移动,重力模拟,动画合并,添加标签)

qq20004604      2022-02-16     702

关键词:

dojo学习

 

1)加载

①首先,先设置

  <script>

     //替代使用data-dojo-config,我们创建一个dojoConfig对象(是个设置)在我们调用dojo.js之前,他们功能相同

     //这比通过一大堆设置来说,更易阅读

        var dojoConfig = {

            async: true,

            //这个代码注册了demo包的正确位置,于是我们可以调用dojo从CDN,并且同时还能加载本地模块

            packages: [{

                name: "demo",

                location: location.pathname.replace(//[^/]*$/, ‘‘) + ‘/demo‘

            }]

        };

    </script>

 

 

②要加载dojo.js文件:

<script src="dojo/dojo.js"></script>

 

 

③最后,另开一个script,加载自己需要的插件,加载方式为使用:

require ( [插件], 回调函数);

 

插件的值用单引号包括,用逗号分隔不同插件,都放在方括号里;

回调函数可以直接输入函数function(参数),参数填写插件名,如果多个插件,用逗号分隔。

 

如例:

    <script>

      require([ //这行表示要加载东西了,用哪个加载哪个||这些直接映射到文件名,如果你下载的Dojo源分布 ,并期待在dojo目录,你会看到dom.js和dom-construct.js文件,这些文件定义这些模块。

    ‘dojo/dom‘, //加载dojo文件夹下的dom插件(应该)

    ‘dojo/fx‘, //加载fx插件,这个插件包括一个滑动动画(slideTo),还有其他

    ‘dojo/domReady!‘ //这个插件大概作用是,保证加载完毕后才执行,以免执行一个没加载好的。

], //这行已经加载结束了

function (dom,fx) { //这是一个回调函数(即加载完才执行的),参数有dom和fx(这个应该指的是插件)

    var greeting = dom.byId(‘greeting‘); //得到id为greeting的元素,赋值给greeting这个变量

    greeting.innerHTML += ‘ from Dojo!‘; //这个元素加入文本(+=)

    

    //动画部分,

    fx.slideTo({

        node: greeting, //不懂

        top: 100,

        left: 500,

   

    }).play();

} //这行是函数完

); //到这部分是require完

</script>

 

关于插件的加载:

回调函数中的顺序,是按照插件的顺序填写的。否则就很可能会插件加载出错!!而且这个bug莫名其妙!!!!!!!

 

 

 

 

2)移动动画

    //动画部分,

    fx.slideTo({

        node: greeting, //不懂

        top: 100,

        left: 500,

    }).play();

第一个参数是移动后的情况。但node:greeting指对idgreeting的元素进行操纵

 

这是一个动画部分,他是回调函数内容的一部分,但显然,单独拿出来也是可以用的。

如:

    <script>

      require([ //这行表示要加载东西了,用哪个加载哪个||这些直接映射到文件名,如果你下载的Dojo源分布 ,并期待在dojo目录,你会看到dom.js和dom-construct.js文件,这些文件定义这些模块。

    ‘dojo/dom‘, //加载dojo文件夹下的dom插件(应该)

    ‘dojo/fx‘, //加载fx插件,这个插件包括一个滑动动画(slideTo),还有其他

    ‘dojo/domReady!‘ //这个插件大概作用是,保证加载完毕后才执行,以免执行一个没加载好的。

], //这行已经加载结束了

function (dom,fx) { //这是一个回调函数(即加载完才执行的),参数有dom和fx(这个应该指的是插件)

   ST(dom,fx);} //调用ST函数,ST函数在下面定义

); //到这部分是require完

    </script>

    <script>

    function ST(dom,fx){

    var greeting = dom.byId("greeting"); //得到id为greeting的元素,赋值给greeting这个变量

    greeting.innerHTML += " from Dojo!"; //这个元素加入文本(+=)

    //动画部分,

    fx.slideTo({

     node: greeting, //不懂

     top: 100,

     left: 500,

   }).play();

} //这行是ST函数完

    </script>

 

 

3)变宽变窄动画

原型:(但需要在之前使用animateProperty=dom.byId("animateproperty");

baseFx.animateProperty({

node: dom.byId("anim8target"),

    properties: { borderWidth: 100 }

   }).play();

});

 

效果是获得idanim8target的东西为目标(node应该是操作目标的意思),

然后properties是把他变成什么样子(borderWidth应该是外边框),

.play() 应该是动画的意思。

 

代码:

    <script>

require([ //第一个参数,加载插件

"dojo/_base/fx",

"dojo/on",

"dojo/dom",

"dojo/domReady!"

],

function(baseFx,on,dom) { //第二个参数,回调函数

    var startButton1=dom.byId("startButton"), //得到id为startButton的元素

    reverseButton1=dom.byId("reverseButton"), //得到reverseButton的元素

    animateProperty=dom.byId("animateproperty"); //得到animaterproperty的元素(应该是动画函数吧?),实测证明,这行如果被删除(并且上一行改成冒号),依然可以被运行    //这行如果前面的变量名被修改(下面不被修改),依然可以正常运行(不明白为什么)

   

    on(startButton1,"click",function(){ //on应该是当...的时候,比如放这里,应该是某元素(上面赋值的变量)当被按下的时候,调用函数后面的,但evt参数不知道有什么用(不加也没影响效果)

    baseFx.animateProperty({ //这行应该是说baseFx插件的animateProperty函数(动画函数),然后{}内应该是变化后的状态,其中node指操纵的对象,properties指变成什么样子

    node:anim8target, //这里的是操纵对象

    properties:{borderWidth:100} //properties操纵的是css属性

    }).play(); //操纵速度不在play

    });

   

    on(reverseButton1,"click",function(){

    baseFx.animateProperty({

    node:anim8target,

    properties:{borderWidth:1}

    }).play();

    });

});

 

    </script>

 

注:

borderWidth是外边框;如果是width则是宽度,height是高度(不会导致内部字体变形)

②操纵的目标是:

<button id="startButton">变大</button>

<button id="reverseButton">变小</button>

 

<div id="anim8target" class="box" style="border-style:outset">

    <div class="innerBox">A box</div>

</div>

 

修饰这个目标有css属性(不然外形会是默认外形,很大),可以认为是初始属性

<style type="text/css"> /*设置盒子的样式*/

.innerBox {

     margin: 5%;

    padding: 5px;

     background-color: white;

}

.box {

     position: absolute;

    height: 200px; /*这里必须加px*/

    width: 200px; /*这两个是外框的高和宽*/

    background-color: #ddd;

     border: 1px #eee;

        border-top-width: 1px;

        border-right-width: 1px;

        border-bottom-width: 1px;

        border-left-width: 1px;

        border-top-color: rgb(238, 238, 238);

        border-right-color: rgb(238, 238, 238);

        border-bottom-color: rgb(238, 238, 238);

        border-left-color: rgb(238, 238, 238);

        -moz-border-top-colors: none;

        -moz-border-right-colors: none;

        -moz-border-bottom-colors: none;

        -moz-border-left-colors: none;

        border-image-source: none;

        border-image-slice: 100% 100% 100% 100%;

        border-image-width: 1 1 1 1;

        border-image-outset: 0 0 0 0;

        border-image-repeat: stretch stretch;

    padding: 5px;

        padding-top: 5px; /*这里的边距指外框到内框的,上边距*/

        padding-right: 5px; /*右边距*/

        padding-bottom: 5px;/*下边距*/

        padding-left: 5px;/*左边距*/

}

</style>

事实上应该不用这么多

 

④效果是外框左上是淡灰色,右下是深灰色。

 

 

 

4)设置动画的开始和结束情况:

如代码:

<script>

    on(startButton1, "click", function () { //on应该是当...的时候,比如放这里,应该是某元素(上面赋值的变量)当被按下的时候,调用函数后面的,但evt参数不知道有什么用(不加也没影响效果)

        baseFx.animateProperty({ //这行应该是说baseFx插件的animateProperty函数(动画函数),然后{}内应该是变化后的状态,其中node指操纵的对象,properties指变成什么样子

            node: anim8target, //这里的是操纵对象

            properties: {

                height: { end: 400, start: 100 }, //高度变化,初始是100(不受之前情况影响),结束是400

                width: { end: 400, start: 100 }

            }

            //width:{end:400,start:100}//properties操纵的是css属性

        }).play(); //感觉play应该能操纵速率,但不知道怎么用

    });

</script>

注:

①这个还可以用该对颜色进行变化。

 

 

 

5)透明度与动画速度

如代码:

    on(startButton1, "click", function () { //on应该是当...的时候,比如放这里,应该是某元素(上面赋值的变量)当被按下的时候,调用函数后面的,但evt参数不知道有什么用(不加也没影响效果)

        baseFx.animateProperty({ //这行应该是说baseFx插件的animateProperty函数(动画函数),然后{}内应该是变化后的状态,其中node指操纵的对象,properties指变成什么样子

            node: anim8target, //这里的是操纵对象

            properties: {

                height: { end: 400, start: 100 }, //高度变化,初始是100(不受之前情况影响),结束是400

                width: { end: 400, start: 100 },

                opacity: { start: 1, end: 0.3 } //opacity是透明度,最大1(不透明),最小0(透明)

            },

            duration: 3000 //这个是动画速度

        }).play(); //感觉play应该能操纵速率,但不知道怎么用

    });

 

 

透明度opacity

速度(变化所用时间)properties函数的第二个参数(第一个参数是设置动画变换后的属性)

 

 

6)动画过程的更多种形式

简单来说,除了点到点的动画之外,还有更多的可能。

而这些更多的可能,其位于插件dojo/fx/easing之中

 

插件需要:

dojo/fx/easing

dojo/_base/fx

 

例如模拟球体掉落,需要使用插件dojo/fx/easing,类型为(在animateProperty的第一个参数中放置):easing: easing.bounceOut

如:

<script>

    require(["dojo/_base/fx",

        "dojo/dom",

"dojo/fx/easing", //这个插件用于加载更多的动画过程

"dojo/window", //一个新的插件,应该是跟窗口相关的

"dojo/on",

"dojo/domReady!"], function (baseFx, dom, easing, win, on) { //5个参数(5个插件)

    var startButton = dom.byId("startButton"), //开始按钮

                reverseButton = dom.byId("reverseButton"), //另一个按钮

                anim8target = dom.byId("anim8target"); //操作对象

    // 设置一对按钮用于处理事件

    on(startButton, "click", function (evt) { //开始按钮在点击后触发

        // 得到我们窗口的尺寸

        var viewport = win.getBox(win.doc); //变量被用于存储窗口的信息

        baseFx.animateProperty({

            easing: easing.bounceOut, //动画,向下加速,会触底4次后停止(类似球体从空中掉落的动画形式)

            duration: 3500,

            node: anim8target,

            properties: {

                // calculate the ‘floor‘计算地板

                // 然后减去东西的高度

                top: { start: 0, end: viewport.h - anim8target.offsetHeight } //top(距离上面的距离为0,

                //结束时,距离上面的距离是窗口高度(viewport.h)减去当前块的高度( .offsetHeight)

            }

        }).play();

    });

    on(reverseButton, "click", function (evt) {

        baseFx.animateProperty({

            node: anim8target,

            easing: easing.bounceOut,

            properties: { top: 0 }, //飞到最高

            duration: 2000

        }).play();

    });

});

</script>

 

效果是:

①按钮1:摔下去,弹3次,第4次碰到地面(通过top设定)时停止。

②按钮2:飞上去,弹3才,第4次碰到时停止;

注:

①也可以斜着移动然后弹(弹往来的方向)

②也可以对字体大小(fontSize)之类的有效(例如从小变大,会反弹几下再变成指定大小)

③对颜色有效:backgroundColor:{start:"#0F0",end:"#F0F"}

④对透明度有效opacity

⑤注意:需要使用baseFx.animateProperty({

easing:easing.bounceOut,

node:目标,

其他修饰(比如要抵达的状态),

})

使用插件baseFx和插件easing

 

 

 

7)关于各种图像的各种:

如图

 

 技术分享

 

offsetWidth的父为body

圖解offsetLeftoffsetTopoffsetWidthoffsetHeight

http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight

 

 

基本来说,最里面是text(文本区);

文本区有底纹,称为填充区(padding);

填充区外面有边框(border),边框比填充区大;

边框是元素的最外围了(应该),再外围是body标签范围。

 

 

 

 

 

8)如何在style里设置初始的topleft

办法是,例如:style=”position:absolute;left:100px”

即,必须先有:position:absolute或者是fixed或者是其他(但我不知道这有什么用)

 

后面的设置才是有用的,否则是无用的。

 

 

 

 

 

9)读取当前的属性

需要插件:dojo/dom-style

函数需要传递参数:domStyle

使用命令:No_one_top = parseInt(domStyle.get(No_one, "top"));

①第一个No_one_top表示存储这个值的变量;

parseInt() 函数应该是要将值转换为数字;

domStyle.get(No_one,”top”)这个函数,表示读取No_one这个的top属性;

 

关于第一个参数的解释:

①假如有:No_one1 = dom.byId("No_one"); //对象1在之前

No_oneid,加不加引号都能读取这个id(无论有没有①的存在);

③不加引号,可以变更为No_one1(有①的情况下),但加了引号的情况下,则不能读取;

④疑问:假如有两个ID,分别为No_oneNo_two

然后,变量No_two= dom.byId("No_one"); No_one= dom.byId("No_two")

那么调用No_one作为domStyle.get的第一个参数时,调用的是IDNo_one还是No_two的?

 

 

 

 

10)将两个动画合在一起

需要插件:dojo/fx

如代码:

var mm=fx.chain([动画1, 动画2]);

①里面需要明确是调用哪个参数(对哪个单位进行操作);

②可以直接把动画函数写里面;

mm为自定义变量名,调用时,使用mm.play()即可。

 

 

 

 

11)设置初始颜色

需要插件:dojo/dom-style

格式:

domStyle.set(目标对象, 修改的属性, 目标值);

如:

domStyle.set(container, "backgroundColor", "#eee");

 

效果是:设置idcontainer,将其背景颜色(backgroundColor)设置为颜色(#eee

 

 

 

 

 

 

12)在动画开始之前

需要使用插件:dojo/aspect

①假设有动画mm是正常执行的,假设有动画nn是预计要执行的。

②动画调用之前,使用aspect.before(mm, “beforeBegin”, nn);

③效果是,在mm动画调用前,将执行nn动画/函数,此时,相当于mmnn一起执行(只不过其执行所需的时间可能不同);

④但并非先执行完nn,才会执行mm

 

 

 

 

13)在动画结束之后

需要插件:dojo/on

格式为:

on(对象, “End”, 回调函数)

 

例如:

on(anim, "End", function(n1, n2){

var mm =

baseFx.animateProperty({

easing:easing.bounceOut,

duration:7000,

properties:{

backgroundColor:{start:"#FFF",end:"#000"},

},

node:container,

}); //mm定义完

mm.play();

}); // {是回调函数完,)on

 

 

 

14)分拆动画和执行动作

分拆前:

baseFx.animateProperty({

easing:easing.bounceOut,

duration:7000,

properties:{

backgroundColor:{start:"#FFF",end:"#000"},

},

node:container,

}).play();

 

 

 

分拆后:

var mm =

baseFx.animateProperty({

easing:easing.bounceOut,

duration:7000,

properties:{

backgroundColor:{start:"#FFF",end:"#000"},

},

node:container,

}); //mm定义完

mm.play();

 

精简后;

 

baseFx.animateProperty({

执行的动作,比如达到的状态等

}).play();

 

在分拆后得到:

var mm = baseFx.animateProperty({

执行的动作,比如达到的状态等

});

mm.play();

即可。

 

理论上,对其他的也可行。实际上,也是可行的。

 

 

 

 

15)常见错误:

①在baseFx.animateProperty({})函数的“}”结束处加分号;

②在properties:()的后面没有加逗号;

③在properties:()内部的属性,例如top:100后面加了px(正常是不能加的);

④样式表名在不同地方不一样。例如:

背景颜色在css里是background-color,但在dojo里面是backgroundColor

⑤查看有没有多一个括号,少一个逗号、分号之类的错误

 

 

 

16dojo/dom插件

①首先需要加载插件:dojo/dom

②其次需要在回调函数中使用:dom作为参数

③功能有:var mm=dom.byId(“某id”)

其效果类似document.getElementById(“某id”)

将其赋值给mm(自定义变量名),于是mm就可以替代这一长串的文字了。

 

功能有(假如声明了上面的):

mm.innnerHTML,效果相当于document.getElementById(“某id”).innerHTML

替换文字

如函数:

function settext(node,text)//效果是给第一个参数的位置,用第二个参数的文字替代

{

node = dom.byId(node);

node.innerHTML = text;

}

 

settext(no1,"aaaaaa");

idno1的地方,将文字更改为text

 

 

17)添加新标签

①使用插件:dom/dom-construct

②参数:domConstruct

③格式为:

domConsrtuct.create (“标签名”, 样式, 父标签);

如:

box = dom.byId("box");

no2 = dom.byId("no2");

domConstruct.create("div", //domConstruct.create开头,第一个div为标签

{ //第二个参数规定插入的各种东西

innerHTML:"six" //插入的文本内容

,box); //第三个参数为插入在哪个父标签下

domConstruct.create("div",

{

innerHTML:"seven",

className:"seven", //规定了插入的类型为seven,也可以是现有类型

style:{fontWeight:"bold"} //规定了style,这里字体宽度为bold

},box);

domConstruct.create("div",

{

innerHTML:"Three and a half",

className:"smallerbox2",

style:{backgroundColor:"#fff"}

},no1,"after"); //no1标签之后,最好用after,不太明白这个机制,特别是使用了偏移后的坐标时。

 

 

 

18)常用功能(dojo用,与其他的语法可能不一样):

功能

格式

字体宽度

fontWeight

字体大小

fontSize

背景颜色

backgroundColor

类名

className

 

 

 

 

 

19)移动标签

标红,搞定grid后回来补充

 

 

 

 

 

20)发送请求

插件:dojo/request

参数:request

语法:

request.get (“链接”, { handleAs: “json” }).then ( 回调函数 );

 

 

2017从零开始学可视化数据分析师就业课程_数据分析师课程

2017从零开始学可视化数据分析师就业课程学习地址:http://www.xuetuwuyou.com/course/182课程出自学途无忧网:http://www.xuetuwuyou.com本课程由风舞烟老师团队出品。分9个课程,26章,共计324课时! 第一阶段、数据分析理论工具基础篇... 查看详情

从零开始学架构:开篇-文章大纲

...架构系列,开始《一步一步学架构系列》(目前改名为:从零开始学架构系列)3)个人感悟:1、做技术就是做架构;2、做工作就是做管理;这两句不详细解释,大家慢慢品味。  & 查看详情

[从零开始学fpga编程-4]:快速入门篇-常见可编程器件promplapalgalcpldfpga

作者主页(文火冰糖的硅基工坊):文火冰糖(王文兵)的博客_文火冰糖的硅基工坊_CSDN博客本文网址:https://blog.csdn.net/HiWangWenBing/article/details/124721279目录第1章什么是可编程器件1.1 逻辑器件分类 查看详情

睡前一小时数学系列之从零开始的快速乘法。

睡前一小时数学系列之从零开始的快速乘法。当我们遇到大数相乘的时候情不自禁可以想到高精度。但是如果遇到形如a*b%c的运算的时候。数也就是longlong级别(2^61-1)但是没有办法的是这样数如果相乘会超longlong级,再一模,hhhh肯... 查看详情

从零开始学java(异常)

_异常  异常机制已经成为判断一门编程语言是否成熟的标准,除了传统的像C语言没有提供异常机制之外,目前主流的编程语言中如;JavaC#RubyPython都是提供了比较完善的异常处理机制。 java的异常处理机制主要依赖于try、c... 查看详情

数据导入整数从零开始

】数据导入整数从零开始【英文标题】:Dataimportintegerstartwithzero【发布时间】:2019-07-1109:21:09【问题描述】:我是第一次使用clickhouse,当我像这样进行导入时:cat/home/data/_XDR_IMPORT_1001_20001010_000001_.tsv|clickhouse-client--password=123--quer... 查看详情

从零开始学kotlin-操作符

从零开始学Kotlin基础篇系列文章冒号操作符":"和"::":操作符用来定义变量、类的继承等varname:String//定义变量classMainActivity:AppCompatActivity()//继承类::可以用来得到类的Class对象startActivity(Intent([email protected],SecondActivity::class.java))// 查看详情

从零开始学kotlin-使用接口

从零开始学Kotlin基础篇系列文章定义接口使用关键字interface定义接口interfaceInterfaceDemo7{}类或对象可以实现一个或者多个接口classdemo7:InterfaceDemo7{}classdemo:InterfaceDemo71,InterfaceDemo72{}接口中定义属性接口中的属性只能是抽象的,不允... 查看详情

从零开始学kotlin-控制语句

从零开始学Kotlin基础篇系列文章条件控制-ifvara=10varb=20if(a>b)print(a)if(a>b){print(a)}else{print(b)}valmax=if(a>b)aelsebif(ain1..10){print("a在1到10区间内")}条件控制-whenvalx=3when(x){1->print("x是1")2->print(" 查看详情

从零开始学kotlin-类和对象

从零开始学Kotlin基础篇系列文章定义一个类定义一个类,使用关键字class声明,后面跟类名(不使用new)classdemo5{//定义一个类,使用关键字class声明,后面跟类名funtest(){//类中定义方法}classempty//定义一个空类}定义类的属性类的... 查看详情

从零开始学kotlin-枚举

从零开始学Kotlin基础篇系列文章枚举的定义一个类的对象是有限且固定的,这种实例有限且固定的类称为枚举类;枚举常量用逗号分隔,每个枚举常量都是一个对象;enumclassEnumDemo9{RED,BLUE,BLACK,WHITE}枚举初始化每一个枚举都是枚举类... 查看详情

[从零开始学习fpga编程-6]:快速入门篇-国内外fpga主要厂家及其主要产品系列开发工具

作者主页(文火冰糖的硅基工坊):文火冰糖(王文兵)的博客_文火冰糖的硅基工坊_CSDN博客本文网址:https://blog.csdn.net/HiWangWenBing/article/details/124799385目录前言:第1章FPGA主要国外厂家 查看详情

javascript系列----面向对象的javascript

出处:http://www.cnblogs.com/renlong0602/p/4387588.html本文中心:  这篇文章比较难懂,所以读起来比较晦涩。所以,我简单列一下提纲: 在第一部分,从函数原型开始谈起,目的是想搞明白,这个属性是什么,为什么存在,... 查看详情

从零开始学习mysql系列--索引视图导入和导出

前言上篇文章我们学习了数据库和数据表操作语句,今天我们学习下数据库索引,视图,导入和导出的知识。作为基础篇,不会涉及到关于索引和视图的高级应用和核心概念,但是基本操作大家会了解,尤其是关于索引的内容,... 查看详情

从零开始学web之css3边框图片,过渡

大家好,这里是「从零开始学Web系列教程」,并在下列地址同步更新......github:https://github.com/Daotin/Web微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/CSDN:https://blog.csdn.net/lvonve/在这里我会从Web前端零基础开始,一步步... 查看详情

从零开始学mysql--数据库和数据表操作

阅读本文大概需要7 分钟前言上篇文章我们学习了SELECT语句,今天我们学习下核心的内容,学习并实践如何对数据库表和表中的内容做修改,删除,重命名等操作。(想看看周末还有多少爱学习的小伙伴,你们在哪里呀,O(∩... 查看详情

从零开始学csrf

为什么要拿CSRF来当“攻击手法系列”的开头篇呢?因为CSRF/XSRF我个人喜爱他的程度已经超过XSS了。如果说XSS是一个老虎,那么CSRF就是隐藏在暗处的蛇。相信现在很多人不明白CSRF是怎么运作,他和XSS的不同是在哪里。我这里就逐... 查看详情

从零开始实现一个深度学习框架|激活函数,损失函数与卷积层(代码片段)

往期回顾super(Sigmoid,self).__init__()x=/(+np.exp(-x))xp=self.forward(self.storage[gradient=p*(-p)accumulated_gradient*gradientsuper(Tanh,self).__init__()x=/(+np.exp(*x))-xp=self.forward(self.storage[grad 查看详情