ih5渐变动画如何设置

 时间:2024-10-14 10:19:51

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置

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

ih5渐变动画如何设置
ih5渐变动画如何设置
  • ih5怎样给场景添加图片
  • ih5怎样设置场景页面的大小
  • ih5时间轴如何使用
  • iH5中级教程:微场景H5必备,视差滑动效果
  • ih5如何设置物体运动
  • 热门搜索
    有关汉字的手抄报 庆六一手抄报内容 植树节手抄报资料 有关春节的手抄报 绿色环保手抄报内容 关于梦想的手抄报 党的生日手抄报 关于母亲的手抄报 小学生植树节手抄报 网络安全手抄报简单漂亮