热门关键字:
jquery > jquery教程 > jquery教程 > ih5语言叫html5,iH5最专业的H5制作工具

ih5语言叫html5,iH5最专业的H5制作工具

340
作者:管理员
发布时间:2021/7/28 19:22:38
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5170
  1.什么是快闪H5?


  大概是在iPhone7发布时出了快闪视频的那段时间,突然兴起了快闪类型的H5。常见的形式是信息的快速轮播夹杂一些图片或者动效。


  2.快闪H5常用动画效果有哪些?


  适用于突出主要的信息的:比如logo,标题之类,以文字为主


  色差:黑底白字 + 白底黑字


  字号:大大大小 + 大大小大


  屏闪:闪白 and 闪黑,适用于突出形容词或者大量同类词语的


  弹幕:叽里呱啦一堆随便出现


  加速:加速闪动,从1秒闪3个逐渐变成1秒7个或者更多


  用于图片素材的:透明 and 半透明、不模糊 and 半模糊


  还有一些类似于打字机效果、位移、XY轴的变换。这一类的最好要做出缓冲效果,像位移,如果从头到尾都是一个速度会感觉很怪异,所以位移的过程中要有缓冲的动作。


  3.做一个快闪H5需要准备哪些素材?


  音乐、文案、图片(可选)


  最完美的是先找好音乐,梳理音乐的结构,最好是有一个基本节奏,中间再穿插一些爆发,或者渐进什么的,有急有缓的音乐,这样就相当于框架有了,再往里面填文案或者配图,也会比较简单一些。


  或者是先做快闪,然后再来配音乐,这样配音乐比较难搭,而且图文配合上没有那么完美,不过比较方便,看着行就行呗。


  4.做快闪H5有几种方案?


  其实快闪的可实现性有很多种,常用的就是视频,用iH5做的话就是时间轴,如果不嫌麻烦的话用动效,或者幻灯片都可以。


  视频的话,AE啊,或者一些视频软件都可以做,好处就是比较容易同步,效果会更炫酷一些,当然成本也会比较高,而且安卓和ios端对于视频的处理也不一样。另外我常用的就是时间轴了,相对而言操作比较简单,而且后期方便改动,不太完美的就是可能音乐和素材的加载速度不同会影响一些效果.。


  5.做一个快闪H5一般需要多久?


  一天左右。


  下面示范用时间轴做一个简单的快闪H5


  进入“我的工作台”,新建手机案例。把舞台按比例缩小到50%。因为快闪是整体效果非常重要的一种案例,所以保持看到整个舞台的状态很重要。


  接下来,动手。


  1


  先建一个“足够长”的时间轴。至于怎样是足够长呢?算一下你需要多少素材,每个素材出现平均时长基本不超过0.5秒(担心太短的话你可以按1秒算),所以有多少素材你就可以估计整个时间轴有多长。


  2


  第二步,我们来添加素材。


  先在工具栏里选中“中文字体”。然后拖到舞台画出中文字体的范围(画多大,放哪里都行,反正可以在属性里再调)。


  在弹出来的输入框里输入文字,顺手的话可以把对象树里的名称也改了,方便辨认。然后设置字体,大小等属性。


  接下来可以把调好的这个中文字体复制再粘贴在时间轴下,粘贴多个,然后逐个修改文字和重命名。


  小技巧:修改文字时可以让其他文字都隐藏(不勾选),这样就不会造成视觉上的影响。


  3


  全都是白底黑字就很无聊了,我们来加入一点黑底白字做对比。这时候就要用到透明按钮做背景。


  在工具栏选中透明按钮,到舞台上画出大小和位置。再设置透明按钮的属性如图。


  再把透明移到对象树对应的位置,然后把想要黑底白字显示的中文字体剪切再粘贴到透明按钮下,成为透明按钮的子对象。记得要把中文字体的颜色改成白色哦。


  4


  好啦,素材部分已经基本了,接下来我们来加动画。


  在第一个中文字体下添加一个轨迹。


  轨迹属性修改,记得将“开始显示”和“结束显示”都选为no。然后在大约0.4s的位置添加第一个关键帧。


  再在约0.8s的位置添加第二个关键帧(时间可以根据各人喜好自行决定)。


  这时候播放一下你的时间轴,你会发现“小伍”的字样一闪而过。


  没错,接下来又是复制粘贴的事了,把你刚做好的轨迹复制到各个素材下吧(如果是透明按钮就只加到透明按钮下就可以了)。


  然后把各个素材的关键帧按顺序往后挪,只要保证前一个素材消失后后一个素材才出现就可以了,这时候你的时间轴是这样的。


  到这里,前半段的动画效果都完成了。


  5


  不过只有这么简单动画怎么能满足你们呢?所以,小伍又加了一个简单的弹幕效果。


  大概就是这样一张简单的图。我们只需要让上面的文字像弹幕一样动起来。


  怎么做呢?先看对象树。


  然后全部加轨迹。


  可以看出,每句话的轨迹都只有两个关键帧,也就是说,只是从一个状态变到了另一个状态。我们来看其中一句话的属性变化。


  所以每句话的效果都是在舞台上从左往右的飞过。只是我们要控制让他们的轨迹长度不一样,这样他们飞过的时间和速度都会有差异,就有“弹幕”的感觉啦。


  6


  最后,我们来看时间轴的设置。


  可以看出,他们是在同一时间开始,只是结束时间不一样。这里的结束时间是小伍随机调的,就不给数据了,你们看着办,调到满意为止吧。


  这里有点要注意的是,透明按钮作为父对象,一旦透明按钮的轨迹结束(不显示),以下子对象的动画会全都不显示,所以无论下面的子对象轨迹时间设置了多长,透明按钮的轨迹长度决定了这段动画的时长。


  到这里,主要的两个部分已经完成啦,更多的细节大家可以按自己喜好去补充哈。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐