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的不透明度关键帧功能，可以设置元素在不同时间点呈现隐藏或可见的状态，该效果适用于场景内同一位置的元素动态变化。 |
|
|手机版|菁菁苹果园
( ICP备10017701号 )|网站地图