养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

ih5渐变动画如何设置

时间:2024-10-20 03:15:07

在ih5中在2个关键帧之间,也是可以设置渐变动画的,那下面就使用渐变来做一个飞机慢慢消失的动画,来演示如何设置动画的渐变效果。

工具/原料

联网的PC

ih5账号

一张飞机图片

方法/步骤

1、1.跗柿椁焚如图所示,我们选择这个“消失飞机”的页面,然后点击箭头所指的图片按钮,为这个页面添加一张飞机的图片,来演示飞机慢慢消失的效果。

ih5渐变动画如何设置

2、2.如图所示,我们画一个放置这张图片的区域,让这个图片就放在箭头所指的区域。

ih5渐变动画如何设置

3、3.如图愕漓淤说所示,我们刚画完图片放置区域之后,鼠标点击一下就可以确定图片区域大小和位置了,并且同时会弹出一个文件对话框,我们在此选择我们需要的战机图片,并且点击“打开”按钮进行图片的上传。

ih5渐变动画如何设置

4、4.如图所示,我们选择在这个战机的图片上,然后点击箭头所指的轨迹按钮,为这个战机的图片添加一个轨迹。

ih5渐变动画如何设置

5、5.如图所示,我们选择在这个“轨迹”上面,之后点击轨迹属性面板中的“动画渐变效果”按钮,就可以选择要渐变的是那种渐变了。

ih5渐变动画如何设置

6、6.如图所示,螅岔出礤在点击完“动画渐变效果”按钮之后,会弹出一个菜单,我们只需要勾选箭头所指的“模糊”这项,就可以做出飞机消失的效果啦!

ih5渐变动画如何设置

7、7.如图所示,我们为这个飞机的轨迹设置第一个关键帧,在这个轨迹的第一秒,点击箭头所指的黄色按钮,就可以设置第一秒的关键帧了。

ih5渐变动画如何设置

8、8.如图所示,我们訇咀喃谆将这个帧拖到第5秒,之后点击箭头所指的黄色按钮,为第5帧设置关键帧,这样我们就可以为关键帧设置不同的模糊了。

ih5渐变动画如何设置

9、9.如图所示,我们选择在飞机轨迹的第5帧设置其模糊为30px,这样看起来飞机已经模糊的消失了。

ih5渐变动画如何设置

10、10.如图所示,我们点击在这个轨迹上,之后点击勾选“自动播放”,这样轨迹就可以自动进行播放了,便于一打开这个网页直接观看。

ih5渐变动画如何设置

11、11.如图所示,我们点击“预览”按钮,对这个案例进行预览。

ih5渐变动画如何设置

12、12.如图所示,在代码编译完成之后,会弹出这个编译完成的对话框,我们点击“确定”按钮就可以预览啦!

ih5渐变动画如何设置

13、13.如图所示,我们看到飞机在由清晰逐渐变得消失了,这是在动画过程中截取的2张图片来演示飞机消失。

ih5渐变动画如何设置

ih5渐变动画如何设置

© 一点知识