如何利用Epub360给H5页面添加图片设置动效

我们经常制作H5页面,我们可以给静态的图片添加动画或动效,来增加H5页面的趣味性,这里以意派Epub360为例

东西/原料

  • Epub360 H5编纂器
  • 电脑

方式/步调

  1. 1

    添加图片素材。点击菜单栏的图片组件按钮

  2. 2

    呈现素材库的页面,这两个都是上传素材的按钮,点击图中肆意一个按钮即可

  3. 3

    点击上传素材窗口的灰色区域,在弹出来的窗口上,打开我们已解压素材的第一页的文件夹,选中里面所有的素材,点击打开

  4. 4

    期待素材上传后,点击完当作按钮(上传当作功素材的右上角会呈现绿色的对勾)

  5. 5

    第一页的图片素材就已上传到我们的素材库里了,把鼠标放到素材上,呈现两个按钮,点击右侧的按钮插入图片

  6. 6

    图片素材已经插入到了画布上

  7. 7

    结构调整。拖动图片素材,使布景图片与白色画布完全重合

  8. 8

    按照布景图片的插入体例,我们再把第一页的其他图片素材插入,并拖动到合适的位置上

  9. 9

    添加动效。选中图片素材,在右侧的设置面板中选择呈现动效,在倒三角状的下拉菜单里找到放大动效,点击选中

  10. 10

    同样的,我们依次给别的两张图片添加“标的目的右下扭转进入”和“X轴标的目的内翻转”动效

  11. 11

    调整动效播放次序。我们想让题目、地图、文字依次按挨次呈现,所以设置题目动效延迟0秒,地图动效延迟1秒,文字动效延迟2秒

  12. 12

    预览,这时辰我们就可以点击编纂器的左上角“预览”按钮预览结果啦

    END

注重事项

  • 利用谷歌浏览器编纂建造
  • 图片不宜过大,最好在200kb以内

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 186 文章
  2. 汤依妹儿 97 文章
  3. luogf229 40 文章
  4. 小凡 34 文章
  5. 鹿豹座 33 文章
  6. Daisy萌 32 文章
  7. 华志健 23 文章
  8. 橘子的猫 21 文章