iH5高级教程：H5数据应用,实现H5弹幕特效

1、ih5高级教程：h5数据应用，实现h5弹幕 特效步骤:第一步：准备素材1. 选中舞台，点击页面工具,新建一个页面。2. 选中页面，点击屮文字休工具字，添加儿个屮文字体，分别是“推荐阅 读”、“港冏倒计吋”、“和新片”和“泰冏带火了”，并在后面3 个标题下添加3个图标。这个是后面将用作点击跳转外部网站链接用的。3. 选中页面，点击图片工具，添加一张按钮图片，在按钮下添加一个开关, 这是后而将用来控制弹幕显示的开关。第二步：制作背景动画1 选中页面，点击时间轴工具,添加一个时间轴，设置口动播放和循环播放并将其重命名为背景时间轴。选中时间轴，点击图片工具，添加5张背景图。笫一张与最后一张是一样的。2

2、.为前4张背景图添加轨迹。每张图片的轨迹添加两个关键帧，关键帧1的 透明度是100,关键帧2的透明度是0。制作过渡效杲。4钿肯事时就 ml41律«»第三步：添加跳转外链事件在标题1,标题2和标题3下分别添加一个事件。跳转外链的事件的触发条件是轻触，目标对彖是。舞台，目标动作是打开网页，资源位置则是我们耍跳传 的链接，可以门行输入，本案例中跳转一个文章链接。除了触发对象和资源位置 以外，3个事件是一样的。第四步：制作控制弹幕发送输入框和弹幕内容的开关事件1选屮页而1,点击透明按钮工具,在舞台上画一个框，添加透明按钮 作为弹幕容器，并重命名为弹幕容器，然后在弹幕容器卜-添加一个

3、发表框图片, 再选中“弹幕容器“透明按钮，添加淡入和淡出的动效，设置自动播放为no, 让其不会自动播放。2.选中弹幕容器，点击图片工具，上传发表框图片。选中发表框图片， 点击输入框工貝 回，添加一个输入框，将其透明背景设置为yes,这样输入框 的背景就会变成透明。最大长度18 1$透明背景q vu o no i3.选屮输入框，点击事件工具，添加一个事件，触发条件为轻触，目标对彖为输入框1,目标动作为清除文字。然后这里可以先添加一个发送的图片按钮, 即图中发表框的“3”。事件1 触发对象触发条件目标对象轻触手机中y務台页面1 弹驀咨器发表框输入框1 y 匚从亀台或对ft树选择二目标动作蒼除文宇1

4、 y4. 选屮按钮图片，点击计数器工具，添加一个计数器。选屮开关按钮，添加 一个事件，触发条件为手指按f （或轻触），目标对象为计数，器，目标动作是 加1。曲于计数器用來判断弹幕的显示和隐藏，计数器下添加4个事件，当计数 器为奇数吋，开关拨向off,弹幕容器及其子对象隐藏；当计数器为偶数吋，开 关拨向on,弹幕容器及其子对象显示。5.选中计数器，点击事件工具添加4个事件。计数器下事件1的触发条件是为奇数，目标对象是开关图片，目标动作是设置属性，改变计数器的x坐标为75px。计数器下的事件2的触发条件是为偶数，口标对象是开关图片，口 标动作是设置属性，恢复计数器的x处标为19pxo这样当用手指点

5、开关时，计 数器会加1 （即为奇数），开关会拨至off处，再点一次则计数器加1变成偶数,所以开关会拨向on。事件2触发对象触发柔件目标对飲为偶数v聂台页面1按胡开关v从算台或对象树迭择目标动作x坐标设贵属性v1196.计数器下事件3的触发条件是为奇数，口标动作是“弹幕容器”对象淡出 的动效，目标动作是开始。计数器下事件4的触发条件是为偶奇数，目标动作是 “弹幕容器”对彖淡入的动效，目标动作是开始。这样当用手指点开关时，计数 器会加1 （即为奇数），弹幕容器里的所有内容会隐藏，再点一次则计数器加1变成偶数，弹幕容器里所冇内容会显示。第五步：制作弹幕播放效果1选中页面1下的弹幕容器，点击时间轴工具

6、e,添加一个时间轴，重命 名为弹幕吋间轴。在弹幕吋间轴下添加10个文本并设置文本属性的记录文本为 yes,文本内容可以根拯需要输入原始的弹幕内容。 j 弹幕时间紬>回t文和。p叼t文本90t文本8jt姑7卜2t'文本6jt姑5! jt姑4d回t姑3> 0t文本2 但t如记录文字 ns2.10个文本的10个文本实际上就是案例播放时的弹幕，文本内容将会被输 入的最新内容替换。而这些弹幕的移动实际上只是横向的位移，从右到做移动, 制作时我们只需要在两个关键帧中改变文本的x轴坐标即可。 j t?s$3 /"中13j i行般2 吃耐2 w件1/ 耳 tmi 八肿咖 心百竝r

7、転転如如文炖炖fit伽枷申oooosl 2恥*n 5si/ s技配vtna八、奔耐21戶牡t入/亠岌衰b/#r囲t如o t文扔 tetn?te jtwt文拿3 / r»2 如牛讣i.!hdu.0|x坐标-370y坐标357360高120初怕可见q vlt q 9«o i55切dno无背罗濒色背早濒色10 000 s|u 10000 s g文本10 文本9 文本8 文本7 文本6 文本5 文本4 文本3 文本2 文本1煮15台“页面1八s.按忸1计数器1开关 j 4弹幕苔吉/*漬出"入丿乙发劇5-j厂弹藉册间轴文本10 t文本9 t文本8 t文本7 _et文本6al

8、，t文本5，t文本3 ，t文本2e文本1"中文字体7 ":标懸3/u鬲件1 八用读3 j ' 标题2丁2阅读2 八事件1 /.标题1 j背杲时间紬7 24为10个文本添加轨迹，为了设置一个层级效果，我们可以先设置其中5个 文本的关键帧是从0秒开始，英他文本的关键帧1冇一些时间差，如本案例屮的 2.5秒（文本6）、2.7秒（文本7）, 3.75秒（文木8）, 1.9秒（文木9）, 4.6秒 （文本10）。第二个关键帧都在10秒的最后。另外文本6至文本10的勾选可以 去掉，这样关键帧出现前它会隐藏。" 弹慕时间釉t文本io 3t文本9【、elt文本8 iot文

9、本7o e1t文本60 1z1文本5卜回t文本4回t文本3回t文本2d回文本1第六步：制作数据库1选中舞台，点击数据库工具,在舞台下添加一个数据库。2.选中数据库，点击文本字段，添加一个文本字段，字段名称命名为弹幕内 容，绑定对象为页而1的弹幕容器里的输入框。2选中舞台，点击二维变量工具添加一个二维变量，变量名称为a,行 为10,列为1。在数据库捉交后通过输出的事件可以输出最新的10条发送的弹幕。3 将页面1的弹幕时间轴下的10个文本分别绑定二维变量的第一行至第十行。绑定变里舞台2维变星1v5在数据库下添加两个事件。事件1的触发条件是提交完成，冃标对象时数 据库，目标动作是输岀，变量名称选择已

10、经添加在舞台下的二维变量。这个事件 当提交数据库完成通过输出变量，将数据输出到文木里。事件1触发对象数揺库1触发条件目标对象匕升怜已降金1舞台.2维变里17不输出行数7d yes q 20目标动作 筛选寧段1 筛选值1 筛选宝段2 筛选值2 排序字段 排序方法 仅当前用户 从第几行输出 输出至二维变里 输出行数至6.为了让作品再次打开时实时更新，我们可以在舞台下添加一个事件。触发 条件为初始化完成，目标对彖为舞台，目标动作为输岀，变量名称为舞台下的二 维变量。第七步：添加提交事件1选中发表框下的“发弹”对象，在这个发送按钮下添加两个事件，制造点 发送会冇发送的按下去的效果。事件1是的触发条件是

11、手指按下，目标对彖时“3”, 目标动作是设置屈性，将透明度降低。事件2是的触发条件是手指离开，目标对 象时“发弹”，目标动作是设置属性，将透明度恢复到100。2.对象“发弹”下再添加一个提交到数据库的事件，触发条件为手指按下（或轻触），口标对象为数据库，口标动作为提交。触发对象触发条件按下时间目标对象目标动作 徴信红包金额3在对象“3”下再添加一个更新时间轴弹幕的事件，触发条件为手指按下（或轻触），口标对象为弹幕吋间轴，口标动作为才从头播放。先行知识：事件、时间轴、数据库、变量、动效重点控件：文木、事件、透明按钮、吋间轴、轨迹、输入框、数据库、二维变量、动效知识点：1、二维变量：二维变量指在数据库收集完数据后，形成的表单中，读取某行及 某列的数据。2、输出：搜索数据中的数据，可设置条件搜索指定的值，输出到变量中，计数 器和文本可通过绑定变量读取数据库屮任意行列的数值。重点事件:触发对象：发弹图片触发条件：手指按f目标对象:数据库口标动作：提交触发对象：数据库触发条件：提交完成口标对象：数据库目标动作:输出输出至二维变量：2维变量1触发对象:计数器触发条件：为奇数目标对彖：弹幕容器淡出动效目标动作：开始触发对象:计数器触发条件：为偶数目标对彖：弹幕容器淡入动效目标动作：开始tips：1弹幕循环移