广告合作
  • 今日头条

    今日头条

  • 百度一下

    百度一下,你就知道

  • 新浪网

    新浪网 - 提供新闻线索,重大新闻爆料

  • 搜狐

    搜狐

  • 豆瓣

    豆瓣

  • 百度贴吧

    百度贴吧——全球领先的中文社区

  • 首页 尚未审核订阅工具 订阅

    iH5初级教程:动画必备,H5+时间轴动画

    来源:网络收集  点击:  时间:2024-03-01
    【导读】:
    下面我们来一起学习一下iH5初级教程的第十一节:动画必备,H5+时间轴动画工具/原料moreiH5方法/步骤1/4分步阅读

    第一种:放缩。

    1、选中舞台,点击工具栏页面工具,添加一个页面。

    2、选中页面,点击工具栏时间轴工具,添加时间轴。

    3、选中时间轴,点击工具栏图片工具,在舞台上拉出一个框,添加图片,

    4、选中图片,点击工具栏轨迹工具,添加轨迹。

    5、把图片缩小,放在舞台左上角,点ADD添加关键帧记录图片的状态。

    6、在时间轴窗口第一个框输入2点回车,放大图片,点ADD添加关键帧。

    7、时间轴属性面板总时长3秒,自动播放循环播放为YES。预览时,图片会从小变大,最后会有一秒的停顿。

    2/4

    第二种:旋转。

    1、选中舞台,点击工具栏页面工具,添加一个页面。

    2、选中页面,点击工具栏滑动时间轴工具,在舞台上画出一个区域,作为滑动区域。

    3、选中滑动时间轴,点击工具栏图片工具,在舞台上画一个区域,添加图片。

    4、选中图片,点击工具栏轨迹工具,添加轨迹,

    5、在轨迹最开始的地方点ADD添加关键帧,

    6、在时间轴窗口第一个框输入2点回车,图片属性面板旋转360度,点ADD添加关键帧。

    7、滑动时间轴属性面板,总时长设为2,滑动放大比例0.2,滑动放大比例越小越稳定,越大动画越快,滑动方向为上,自动跳转控制点为NO,这样就可以手动操控旋转角度,如果自动跳转控制点为YES,滑动一下,就会自动跳转到下一个关键帧。预览时,向上滑动,图片旋转一圈,向下滑动,滑动时间轴反向播放。

    3/4

    第三种:拟合轨迹。

    1、选中舞台,添加图片。选中图片,点击工具栏动效工具,添加动效。动效属性面板时长为5,动效类型旋转,开始前隐藏为NO。

    2、选中舞台,添加页面,选中页面,点击工具栏时间轴工具,添加时间轴,总时长5,把图片剪切黏贴到时间轴下,作为时间轴的子对象。

    3、选中图片,点击工具栏轨迹工具,添加轨迹,点ADD添加第一个关键帧,在时间轴窗口的第一个框输入5,点回车,移动图片位置,再点ADD添加关键帧。预览时,图片会一边移动一边旋转。

    4/4

    放缩:使用时间轴的两个关键帧控制图片放大缩小。

    旋转:使用滑动时间轴的两个关键帧控制图片旋转360度。向上滑动,图片选择。

    拟合轨迹:时间轴下添加素材,素材下添加旋转动效与控制图片移动的轨迹。

    TIPS:

    1、先点击工具栏上的时间轴工具添加时间轴,选中时间轴,点击图片工具添加素材,选中素材,点击工具工具添加轨迹,点击时间轴窗口上的ADD添加关键帧。

    2、如果要修改关键帧里记录的素材的属性,必须选中关键帧为橙色,再移动素材的位置或修改大小透明度等。

    3、在时间轴窗口的第一个框内填入数字1,点回车,则时间轴窗口里的控制关键帧位置的小方块就自动到达1秒的位置,点击ADD添加关键帧,关键帧处于1秒的位置。如果需要准确调整关键帧的位置,可以在第二个框内填入数字,例如2,则关键帧会移动到2秒处。

    本文关键词:

    版权声明:

    1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

    2、本站仅提供信息发布平台,不承担相关法律责任。

    3、若侵犯您的版权或隐私,请联系本站管理员删除。

    4、文章链接:http://www.1haoku.cn/art_186392.html

    相关资讯

    ©2019-2020 http://www.1haoku.cn/ 国ICP备20009186号05-05 00:15:04  耗时:0.027
    0.0274s