Hype教程:制作3秒后出现下一步的页面

浏览 15 次 / 0条评论 / 软件分类 [ 在线教学 ]
Hype 4 mac注册版是为苹果电脑用户打造的一款实用HTML5动画制作软件,今天就给大家带来Hype教程——制作3秒后出现下一步的页面" v* p0 K. f  K( h0 O

' U7 \! a. q/ R, VHype 4 Pro for Mac(HTML5动画制作软件)+ W- S8 ?; N9 e2 ?/ h1 D
22.4 MB2022.04.07简体中文
, O( L2 p& d$ SHype 4 mac注册版是为苹果电脑用户打造的一款实用HTML5动画制作软件,无需相应的插件用户就可以上手进行html5的开发操作了,软件提供了人性化的交互操作方式和动画,支持切割边缘象框阴影,反射和3D转换,同时还支持实时预览编辑。( @9 X* [% `; `% d
下载
- d" I0 s( F( C0 a; Y7 p% T& c+ G一、制作不同按钮的动画效果0 _4 Z6 u" ]: q
我们先来看一下之前创建的场景,接下来,分别进行“3s”、“2s”、“1s”按钮倒计时的动画制作。# F; ]7 [$ o' N9 d
9 n% A# z2 c: X$ F& h( [
1、制作“3s”按钮的动画效果- Y/ A' ~  K* D* K. h  I2 Y
“3s”按钮是最早出现的,过了1秒后会消失,继而出现“2s”按钮。按照以上逻辑,我们需要依次进行以下操作:8 Q' p  l; l4 [7 o# T: S
[ol]
  • 开启Hype的自动记录功能
  • 在时间线面板选择3s按钮
  • 在0秒处添加3s按钮的不透明度关键帧
  • 在元素检查器中将3s按钮的不透明度设为100%
    & m. F& u) ^8 ~% I* q# g[/ol]
    ; ?7 V3 k( _- V0 r
  • 选中3s按钮基础上,将时间线的指针移动到1秒处
  • 在1秒处添加3s按钮的不透明度关键帧
  • 在元素检查器中将3s按钮的不透明度设为0
    & x9 B: n5 D- s2 \) ^1 U7 X[/ol]以上就完成了3s按钮动画的制作。
    7 [3 x- U/ J6 W3 K2 @5 D' ]. w" {) w3 M. O# w& Q* M3 z! S
    2、制作“2s”按钮的动画效果
    / [6 W/ P( Y* n1 ~接着,进行2s按钮的动画制作,其制作逻辑是,2s秒最开始是隐藏的,随着3s按钮隐藏后出现,但过了1秒后会再次隐藏。
    ) R" B' x5 g: w! d  U; ?+ x( ~按照以上逻辑,操作如下:% {% u1 J8 e5 @, O
    [ol]
  • 开启Hype的自动记录功能
  • 在时间线面板选择2s按钮
  • 在0秒处添加2s按钮的不透明度关键帧
  • 在元素检查器中将2s按钮的不透明度设为0%
    6 }7 y/ [' Y. R" u( r[/ol]; Q& r3 N4 @' t, D, J5 w
  • 选中2s按钮基础上,将时间线的指针移动到1秒处
  • 在1秒处添加2s按钮的不透明度关键帧
  • 在元素检查器中将2s按钮的不透明度设为100%
    + S* E, O% H+ }, y. W0 D[/ol]
    6 X  X* k  v" F& o, R
  • 选中2s按钮基础上,将时间线的指针移动到2秒处
  • 在2秒处添加2s按钮的不透明度关键帧
  • 在元素检查器中将2s按钮的不透明度设为0%$ K7 P# ^5 H  s# ~" \7 m& B) N
    [/ol]以上就完成了2s按钮动画的制作。
    * x) }  d( J/ P$ M
    6 }' J2 J. A2 z1 m: r) E1 l3、制作“1s”按钮的动画效果+ G! \* h# F: x  E  A. C
    接着,进行1s按钮的动画制作,其制作逻辑是,1s秒在1-2秒是隐藏的,随着2s按钮隐藏后出现,但过了1秒后会再次隐藏。$ S# p9 f  L3 D- {" Y: P% [
    按照以上逻辑,操作如下:7 R1 u4 o( Z+ u5 i/ [; c# ]
    [ol]
  • 开启Hype的自动记录功能
  • 在时间线面板选择1s按钮
  • 在0秒处添加1s按钮的不透明度关键帧
  • 在元素检查器中将1s按钮的不透明度设为0%
    5 k' v) `) q4 J7 B. `" u[/ol]6 x5 Z! {% b4 E+ x) R! }
  • 选中1s按钮基础上,将时间线的指针移动到2秒处
  • 在2秒处添加1s按钮的不透明度关键帧
  • 在元素检查器中将1s按钮的不透明度设为100%* d' R$ Z! h0 I' H/ z/ x# K# {
    [/ol]
    . y* O3 o' w+ l/ h+ y2 ?
  • 选中1s按钮基础上,将时间线的指针移动到3秒处
  • 在3秒处添加1s按钮的不透明度关键帧
  • 在元素检查器中将1s按钮的不透明度设为0%
    % @3 y7 R: o) }9 l! I! {' f[/ol]以上就完成了1s按钮动画的制作。' y+ O1 c- C4 E! t( Y

    " R( p; W7 o- X* I6 x9 p) a4、制作“下一步”按钮的动画效果
    ; R( L. A7 D: \2 [. a最后,制作下一步按钮的动画效果,其制作逻辑是,下一步按钮从1-3秒间都是隐藏的,过了3秒后才会出现。
    . L+ |' O# c4 w- Q( @3 V2 _8 O按照以上逻辑,操作如下:% w, }+ v! T) f! R, Y  ~3 @% h" N5 |, o
    [ol]
  • 开启Hype的自动记录功能
  • 在时间线面板选择下一步按钮
  • 在0秒处添加下一步按钮的不透明度关键帧
  • 在元素检查器中将下一步按钮的不透明度设为0%/ _, K! g' k% A3 X2 K
    [/ol]
    2 c7 G( u# b, U8 G- Q. y
  • 选中下一步按钮基础上,将时间线的指针移动到3秒处
  • 在3秒处添加下一步按钮的不透明度关键帧
  • 在元素检查器中将下一步按钮的不透明度设为100%, Q! Q7 x: E; H) G( P" _
    [/ol]! |5 i8 s7 K7 x. G" ~3 e
    / V3 Q- Q8 i$ s2 J5 q
    二、设置关键帧过渡效果
    & L0 _3 }/ m4 U% W, _0 i8 l  y完成以上操作后,如图所示,选中添加的关键帧,单击关键帧面板右侧的过渡方式选项,在其弹出的选项面板中选择“即时”的过渡方式,让按钮的切换显得更加利落。& k/ b- J3 M) ~

    / h( D( R# Z/ r1 p9 Q9 t2 _三、小结
    # Q( E, a; a3 ?+ V1 ~+ J! }综上所述,通过使用Hype的不透明度关键帧功能,可以设置元素在不同时间点呈现隐藏或可见的状态,该效果适用于场景内同一位置的元素动态变化。
  • 已有 0 个人发表评论

    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册  

    本版积分规则

    加入VIP会员
    快速回复 返回列表 客服中心





    快速回复 返回顶部 返回列表