ih5动画案例参考文件

iH5中级教程：多机型自适应篇，制作手机横屏H5苹果与安卓横屏适应不一样，苹果把屏幕横放，会把案例变扁，所以我们要制作两种方案。

第一种：1、对象树的页面，点右键，跨案例复制，到另一个作品里，跨案例黏贴。

2、对象树中的舞台，点右键，选择旋转-90度。

3、每一页都有一个横屏容器透明按钮，它的x坐标-200，y坐标200，宽1040，高640，旋转90度。

在横屏容器下添加中文字体，中文字体是正常横屏的显示。

舞台只是提供了一个视角，实际播放时，看到的是舞台旋转为0的状态。

横屏容器不是必须的，但如果没有这个容器，直接添加对象编辑，对象的操作会由于舞台旋转而变得怪异。

4、如果横屏容器旋转-90度，那么舞台就要旋转90度。

才能正常横屏观看。

第二种：苹果把屏幕横放，会把案例旋转90度，即变扁了。

1、选中舞台，在工具栏下点击透明按钮工具，添加一个透明按钮，透明按钮下添加一句提示的话，透明按钮隐藏。

2、选中舞台，点击工具栏下的事件工具，舞台下添加两个事件，当横置手机时，透明按钮显示，当竖直手机时，透明按钮隐藏。

制作完成之后预览效果如下：重点工具：页面、透明按钮、事件知识点：：1.横屏事件只有当事件添加在舞台下时，触发条件才会有横置手机的选项，而横置手机的触发条件是当手机的屏幕锁定没有打开时横屏才会触发目标动作。

2.竖置事件只有当事件添加在舞台下时，触发条件才会有竖置手机的选项，这个事件当手机竖置的时候就被触发，即横屏提示不会显示。

如果用户观看案例时，打开了横屏锁定之后，系统会默认一直手机处于竖置状态，所以即便此时横屏观看，横屏提示的对象也不会显示。

重点事件：事件1触发对象：舞台触发条件：横置手机目标对象：舞台·透明按钮目标动作：显示事件2触发对象：舞台触发条件：竖置手机目标对象：舞台·透明按钮目标动作：隐藏Tips：1.在编辑横屏作品时，可以通过选中右边对象树，点击鼠标右键打开快捷菜单，设置舞台旋转，方便编辑。

ih5公益类模板
你是想找ih5公益类模板吗？ih5是一款基于H5技术的互动网页制作工具，可以制作包含图片、文字、音乐、视频等多种元素的互动页面或小游戏。

下面为你推荐几款ih5公益类模板：
1. [免费]ih5模板-世界读书日公益宣传：这是一个用于世界读书日公益宣传的ih5模板，具有翻书效果和粒子动画，视觉效果较为出色。

2. [免费]ih5模板-海洋公益：这是一个呼吁保护海洋的ih5模板，以蓝色为主色调，界面简洁清爽。

3. [免费]ih5模板-地球一小时：这是一个关于地球一小时公益活动的ih5模板，以黑色为主色调，界面设计极具科技感。

4. [付费]ih5模板-野生动物公益：这是一个关于野生动物保护的ih5模板，以绿色为主色调，界面设计较为生动有趣。

以上是为你推荐的ih5公益类模板，你可以根据自己的需求选择合适的模板进行使用。

iH5高级教程：H5创意展示，360度物体展示手指左右滑动，就有人工旋转手表的操作体验，对产品展示来说是非常好的展示效果。

步骤：第一步：添加静态对象1、选中舞台，点击中文字体工具，添加文字，点击直线工具，添加箭头。

可根据自己的实际需要来添加。

第二步：制作手表的旋转效果1、选中舞台，点击滑动时间轴工具，在舞台上画一个区域，添加一个滑动时间轴，2、选中滑动时间轴，点击图片工具添加图片，添加手表360度不同方向定格的展示图片，本案例有37张。

大家也可以加几张或者十几张图，也可以达到类似的效果。

为每张图片添加轨迹，所有的控制点都是依次排，列的。

每一个时刻只要求显示一张图片，每张图片都有两个控制点，属性是完全一致的。

在轨迹中设置属性，开始显示与结束显示设为NO，即每一张图片的第一个控制点之前与第二个控制点之后，都是不显示的，只有在两个控制点直接才显示，以此规定每张图片显示的时间段。

第一张图第一个关键帧：第一张图第二个关键帧：第二张图第一个关键帧：第二张图第二个关键帧：第三步：手表的滑动时间轴设置手表的滑动时间轴，滑动方向设置为左，这样图片的排列方式才会让人觉得是手在翻转物品。

滑动放大比例设为1，当用户的手指在滑动时间轴的左边到右边，即整个滑动时间轴完成时间是1。

如果比例调大，滑动一点点，图片就会飞快地转动。

建议不要调得太大，否则在慢一点的手机里会显得有点卡。

先行知识：滑动时间轴、轨迹、重点控件：滑动时间轴、轨迹、滑动放大比例、开始显示、结束显示知识点：1、开始显示：开始显示是指可以设置素材在第一个关键帧之前的显示情况，yes为第一个关键帧之前显示，no为不显示。

2、结束显示：结束显示是指可以设置素材在最后一个关键帧之后的显示情况，yes为最后一个关键帧之前显示，no为不显示。

3、滑动放大比例：使用此参数来设定手指滑动的距离对滑动时间轴轴播放进度的控制，默认值为1，即手指按设定方向划过滑动时间轴整个范围时，滑动时间轴会从起点播放到终点。

h5动画效果案例H5动画效果案例H5动画是指运用HTML5技术创建的动画效果，通过使用canvas、css3、javascript等技术，可以实现各种各样的动画效果。

下面将介绍一个H5动画效果案例。

案例名称：炫彩粒子动画案例描述：该案例通过使用HTML5技术创建了一个炫彩粒子动画效果。

整个动画效果呈现出多个不规则的粒子从屏幕中心飞散，随机变换颜色并以较快的速度旋转。

同时，利用鼠标移动的事件，可以改变粒子的运动方向和速度，增加了互动性和趣味性。

案例实现步骤：1. 创建一个HTML文件，设置文档类型为HTML5。

在文档中引入必要的CSS和JavaScript文件。

2. 创建一个canvas元素，并设置其宽度和高度，以及背景颜色。

3. 在JavaScript文件中编写动画效果的逻辑代码：- 创建一个粒子类，包含粒子坐标、颜色、速度等属性，并定义粒子的绘制方法；- 创建一个粒子数组，用来存储所有粒子的实例；- 在动画循环中，对每个粒子进行更新和绘制操作，实现粒子的飞散效果；- 添加鼠标移动事件监听，根据鼠标移动的位置改变粒子的运动方向和速度。

4. 在初始化函数中，创建指定数量的粒子实例，并随机生成其初始位置、颜色和速度。

5. 在HTML文件中添加一个容器元素，并将canvas元素添加到容器中。

6. 在浏览器中打开HTML文件，即可看到炫彩粒子动画效果。

案例效果展示：炫彩粒子在屏幕中心飞散，随机变换颜色并以较快的速度旋转。

当鼠标移动时，粒子的运动方向和速度会随之改变，增加了动画的趣味性和互动性。

案例优点：该案例通过使用HTML5技术创建了一个炫彩粒子动画效果，具有较强的视觉冲击力和趣味性。

动画效果流畅，响应速度快，体验良好。

案例应用场景：该动画效果可以应用于网页设计、广告宣传等领域，用来吸引用户的注意力，增加网页的艺术感和交互性。

同时也可以用来展示产品和服务，提升用户对品牌的认知和关注度。

总结：通过使用HTML5技术创建动画效果，可以实现各种各样的动画效果，为网页设计和广告宣传提供了新的可能性。

h5动画效果案例H5动画效果案例。

在当今数字化时代，H5动画已经成为吸引用户注意力和提升用户体验的重要手段之一。

通过H5动画，可以生动展现产品特点、提升用户互动性、增加用户粘性，从而达到更好的营销效果。

下面，我们将介绍一些H5动画效果的案例，希望能给你带来一些灵感和启发。

案例一，产品介绍动画。

某公司推出了一款新的智能手表，为了吸引用户关注和展示产品的功能，他们在产品官网上设计了一款H5动画。

当用户进入官网页面时，首先会看到一个立体的手表模型，随着鼠标的移动，手表会展示不同的功能，比如心率监测、运动记录、消息提醒等。

用户可以通过交互式操作，自由切换不同功能的展示，从而更直观地了解产品的特点和优势。

这种H5动画不仅吸引了用户的注意力，还提升了用户对产品的了解和兴趣，为产品的推广起到了很好的效果。

案例二，品牌故事动画。

一家知名餐饮连锁品牌想要通过H5动画向用户展示品牌的发展历程和文化内涵，他们设计了一款交互式的品牌故事动画。

在动画中，用户可以通过点击不同的时间节点，了解品牌从创立至今的发展历程，以及品牌文化所代表的价值观念。

同时，动画中穿插了一些趣味互动，比如答题闯关、抽奖互动等，让用户在了解品牌故事的同时，也能享受到一定的娱乐性。

这种H5动画不仅让用户更加深入地了解品牌，还增加了用户参与度和互动性，为品牌形象的塑造起到了积极作用。

案例三，活动宣传动画。

一家电商平台为了宣传即将举办的大型促销活动，设计了一款H5动画作为活动预热。

在动画中，他们通过生动的角色设计和精彩的场景刻画，展示了活动的主题、时间、参与方式以及丰厚的奖品福利。

同时，用户可以通过动画参与一些小游戏，比如摇奖、拼图等，获得一些小礼品或者优惠券。

这种H5动画不仅吸引了用户的眼球，还让用户在参与活动前就产生了一定的期待和兴奋感，提升了活动的预热效果。

总结：通过以上案例的介绍，我们可以看到，H5动画在产品介绍、品牌故事、活动宣传等方面都发挥了重要作用。

iH5高级教程：H5交互菜单,3D时间轴特效iH5高级教程：H5交互菜单，3D时间轴特效在时间轴上的素材呈现3D的效果，手指在屏幕上滑动的过程中，图片以3D翻转的形式运动，超过屏幕或没有运动到屏幕中间的图片都是折叠的形式。

下面我们讲述一下在案例中的3D时间轴动画。

第一步：1、选中舞台，点击工具栏下的页面工具，添加一个页面。

2、选中页面，点击工具栏下的滑动时间轴工具，在舞台上画一个框，添加一个与舞台一样大的滑动时间轴。

滑动时间轴的总时长设置为10秒，滑动方向为上3、选中滑动时间轴，点击工具栏的下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为容器。

4、选中容器透明按钮，点击工具栏下的图片工具，在舞台里画出一个矩形，添加一张高度为3425的时间线图片，右击图片对象，命名为背景一线。

5、选中容器透明按钮，点击工具栏下的轨迹工具，添加一个轨迹，右击轨迹对象，命名为辅助轨迹。

6、选中背景一线图片对象，点击工具栏下的轨迹工具，添加一个轨迹。

7、选中背景一线图片对象，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张八月的图片。

8、选中八月的图片，点击工具栏下的文本工具，在舞台中画出一个矩形，添加两个文本对象。

第二步：1、选中八月的图片，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为3D旋转父对象。

2、选中八月的图片，点击工具栏下的轨迹工具，添加一个轨迹。

3、选中3D旋转父对象透明按钮，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为3D对象。

设置的X轴旋转角度为-454、选中3D对象透明按钮，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张图片。

5、选中3D对象透明按钮，点击工具栏下的轨迹工具，添加一个轨迹。

6、选中图1，点击工具栏下的事件工具，添加一个事件。

事件的属性是通过点击相应的图片跳转到相应的介绍页面。

iH5中级教程：微场景H5必备，下拉画轴效果向下拉动画轴，跟随着画轴的展开，会出现一幅图，里面的小船还会移动。

利用IH5工具，你也可以很快地制作这样的一个交互效果！第一步：舞台下添加一张背景图和上下卷轴，下卷轴设置拖动类型为垂直。

1、 选中舞台，点击图片工具添加图片。

2、卷轴属性面板处设置卷轴类型为垂直。

第二步:1、 选中下卷轴，点击时间轴工具，添加一个时间轴2、 选中时间轴，点击透明按钮工具，添加一个透明按钮，右键重命名为旋转父对象。

3、选中透明按钮，添加轨迹，做一个左右摆动的轨迹4、透明按钮下加一个中国结的子对象，透明按钮的轨迹是五个控制点，旋转度数分别是，0，15，0，-15，0。

5、时间轴的自动播放和循环播放都设为YES。

这样中国结就像黏透明按钮上左右摆动。

第三步：添加下拉画轴的提示1、选中舞台，点击透明按钮工具，添加一个透明按钮。

右键重命名为点击提示。

2、选中透明按钮，点击时间轴工具，添加一个时间轴。

3、选中时间轴，点击中文字体工具，添加“下拉画轴展开”的文字，点击图片工具，添加手的图片。

4、选中手的图片，点击轨迹工具，添加一个上下移动的轨迹，提示用户下拉画轴观看效果5、第一个控制点手在上方，第二个控制点手在下方，第三个控制点位置与第二个关键帧一样。

第四步：添加画，轴里的画1、选中舞台，点击工具栏滑动时间轴工具，在舞台上拉出一个与展开的画一样大的框，滑动时间轴属性面板设置绑定对象下卷轴这张图片素材。

（不绑定对象的话，滑动时间轴整个区域都可以滑动，就没有拉开下卷轴看到里面的画的效果了）3、滑动方向是下，滑动时间轴放大比例1.3，（与国画展开的速度一致）。

4、选中滑动时间轴，点击透明按钮工具，画一个区域，选中透明按钮，点击图片工具，添加一张黄色的宣纸。

5、宣纸的属性面板，剪切设为YES，（这样的话，国画就不会超出透明按钮的范围）。

5、选中宣纸，点击图片工具，添加一幅画。

6、选中透明按钮，点击轨迹工具，添加轨迹。

ih5课程设计一、课程目标知识目标：1. 学生能理解IH5的基本概念，掌握IH5的基本操作。

2. 学生能运用IH5制作出符合课程要求的互动式网页。

3. 学生了解IH5在不同领域的应用，如教育、广告、新闻报道等。

技能目标：1. 学生能够熟练使用IH5软件，进行页面布局、动画设计、交互设计等操作。

2. 学生能够独立完成一个完整的IH5项目，具备一定的解决问题的能力。

3. 学生能够通过IH5制作出具有创意的互动作品，提高创新思维和动手能力。

情感态度价值观目标：1. 学生对IH5产生兴趣，激发学习热情，培养主动学习的习惯。

2. 学生在团队协作中学会相互尊重、沟通与协作，培养团队精神。

3. 学生通过IH5创作，学会关注社会热点，提高社会责任感。

本课程针对五年级学生，结合学科特点和教学要求，以实用性为导向，让学生在掌握IH5基本技能的同时，提高创新思维、动手能力和团队协作能力。

课程目标具体、可衡量，有助于学生和教师在教学过程中明确预期成果，为后续的教学设计和评估提供依据。

二、教学内容1. IH5基础知识- IH5简介：发展历程、应用场景- IH5软件界面及功能介绍：工具栏、属性面板、舞台区等2. IH5基本操作- 页面布局：页面结构、布局方式、页面切换动画- 动画设计：动画类型、动画效果、关键帧设置- 交互设计：触发条件、交互效果、事件处理3. IH5实战应用- 项目策划：选题、目标用户、内容架构- 设计制作：页面设计、素材选择、交互实现- 项目调试：兼容性测试、性能优化、用户体验4. IH5案例分析与创作- 分析优秀IH5案例：设计思路、技术应用、创新点- 学生创作实践：分组进行项目实践，运用所学知识完成作品教学内容根据课程目标，结合课本章节，进行科学、系统地组织。

教学大纲明确教学内容、安排和进度，注重理论与实践相结合，让学生在掌握IH5基本知识的同时，提高实际操作能力。

教学内容涵盖了IH5的基础知识、基本操作、实战应用和案例分析，有助于学生全面了解和掌握IH5技术。

iH5高级‎教程：H5交互进‎阶，打字机效果‎第一步：添加素材1、选中舞台，点击音乐工‎具，添加背景音‎乐素材，音乐属性设‎为自动播放‎Y E S，同样添加打‎字机声音的‎音乐素材，音乐属性设‎为自动播放‎N O（因为只有在‎打字机动的‎时候才有声‎音）。

选中舞台，点击图片工‎具，添加打字机‎图片。

选中打字机‎图片，添加两个音‎乐按钮图片‎。

按钮灰在按‎钮红的上面‎，即打开作品‎首先显示按‎钮灰。

选中按钮灰‎，点击事件工‎具，添加2个事‎件。

手指按下，音乐暂停，并且让按钮‎红盖住按钮‎灰。

选中按钮红‎，点击事件工‎具，添加2个事‎件。

手指按下，音乐继续播‎放，并且让按钮‎灰盖住按钮‎红。

选中舞台，点击时间轴‎工具，添加时间轴‎1（根据这个案‎例的需要，将时间轴的‎自动播放和‎循环播放属‎性设置为N‎O，时间轴时长‎设为65s‎），在时间轴下‎添加1、2、3、4、5图片素材‎，即打字机中‎出现的图片‎，让这些图片‎成为时间轴‎1的子对象‎。

同样的方法‎添加时间轴‎2，并在它下面‎添加打字机‎的G IF图‎片。

时间轴1重‎命名为24‎气节，时间轴2重‎命名为打字‎。

第二步：设置打字出‎现的效果选中时间轴‎1下的每张‎图片，点击工具栏‎中的轨迹按‎钮，为每张图片‎添加轨迹。

然后在轨迹‎上添加图片‎运动的关键‎帧。

例如，选中图片1‎的轨迹添加‎关键帧，控制图片1‎的运动。

在这个案例‎中，这些图片是‎从下到上出‎现的，所以只需要‎选中关键帧‎，修改图片的‎Y坐标就可‎以达到向上‎运动的效果‎。

比如在图片‎1轨迹1中‎，0秒关键帧‎时，图片1的坐‎标为（0, 950），在11秒的‎地方，添加另一个‎关键帧，并设置图片‎1的坐标为‎（0, -602），这样图片1‎就在11秒‎的时间内从‎Y坐标为9‎50的位置‎向上移动到‎了-602的位‎置，即视觉上打‎字机中的图‎片向上慢慢‎出现了。

第三步：添加打字机‎动画选中打字时‎间轴，添加打字G‎I F，选中打字G‎IF，点击轨迹，使打字GI‎F有左右移‎动的效果。

ih5第二课-动画效果制作一、案例1：汽车碰撞动画1、工具集：（1）音频工具（2）图形绘制工具（3）图片工具（4）事件（5）轨迹动画/运动动画/时间轴（6）画布/物理世界/物体2、素材结构图3、开发流程：（1）在舞台下添加背景图片和“画布”，在“画布”下添加“物理世界”，在“物理世界”下加入“棒球人”、“地面”、“汽车”图片；调整尺寸和位置。

（2）在“棒球人”下添加物体，将其属性修改为质量1，“固定旋转角度”按钮打开；用矩形工具绘制“地面”，设置其宽为1200，高与图片相适应，物体质量为0，关闭填充颜色；在“汽车”下添加物体，将其属性修改为质量30，添加运动动画，将其属性修改为移动速度150，移动方向180，加速度50，加速度方向180。

（3）打开“物理世界”属性面板，关闭四面墙，调大碰撞弹力，调小摩擦力。

（4）舞台上导入“撞车声、“喇叭声”、“游戏主题音乐”音效。

（5）在“汽车”上添加事件，将其设置为与“棒球人”碰撞时播放“撞车声”，“喇叭声”暂停；在“汽车”下的“运动”上添加事件，设置为结束时“喇叭声”暂停。

（6）舞台上添加一个时间轴，关闭自动播放按钮；在舞台上绘制上下方的黑色影幕，给上下影幕各添加一个轨迹，完成幕布关闭动画；给时间轴添加事件，设置为结束时“游戏主题音乐”暂停。

（7）在舞台上导入“左箭头”、“右箭头”、“上箭头”并调整位置，各添加一个事件并设置如下图（物体1指“棒球人”）：（8）预览二、案例2：遮罩动画+物理世界1、工具集：（1）音频工具（2）图形绘制工具（3）图片工具（4）事件（5）路径动画/时间轴（6）画布/物理世界/物体2、结构图：2、开发流程：（1）在舞台上导入“皮球碰撞声音”和“恐怖场景”音效，“皮球碰撞声音”设置为非自动播放，“恐怖场景”设置为自动播放和循环播放。

（2）在舞台下添加“画布”，在“画布”下添加“物理世界”，在“物理世界”下添加“时间轴”；关闭“物理世界”自动播放按钮，“时间轴”设置为自动播放。

iH5高级教程：H5创意展示，背景移动特效通过移动大的背景图来进行内容的浏览，小窗口的局部展示。

时间轴控制背景整体的移动，透明按钮触发背景的局部移动。

下面，我们一步步地实现移动背景的具体步骤。

第一步：1、新建一个页面。

选中舞台，点击工具栏下的页面工具，添加一个页面12、在页面1下添加一个时间轴，选中页面1，点击工具栏下的时间轴工具，新建一个时间轴13、在时间轴下添加一个背景图片，选中时间轴，点击工具栏下的图片工具，在舞台里画出一个矩形，添加一个背景图。

因为背景需要移动，所以需要比舞台还要大的背景图。

案例里面选择的背景图是宽4504高2100的4、在背景图下添加一个轨迹。

选中背景图，点击工具栏下的轨迹工具，为设置关键帧做准备。

5、接下来是在背景图的各个位置上，添加需要的信息，例如案例里的个人信息，专业技能，教育经历等的信息。

（1）个人信息”为例，在案例下添加了透明按钮，事件，图片，中文字体等的工具。

（2）在专业技能按钮下添加一个事件，选中专业技能按钮，点击工具栏下的事件工具，这是一个控制时间轴播放的事件。

（3）专业技能模块有以下几要素选中背景图，点击工具栏下的透明按钮工具，添加一个专业技能透明按钮对象（4）在教育经历透明按钮下添加一个事件，选中教育经历透明按钮，点击工具栏下的事件工具，添加一个控制时间轴继续播放的事件。

（5）时间轴下包含了9张图片，控制这几张图片的运动轨迹，图片从四周往中间聚集的形式出现（6）教育经历选中背景图，点击工具栏下的中文字体工具，添加一个教育经历对象。

（7）在工作经验透明按钮下添加一个事件，选中工作经验透明按钮，点击工具栏下的事件工具，添加一个控制时间轴播放的事件。

（8）工作经验，选中背景图，点击工具栏下的中文字体工具，添加一个工作经验中文字体对象（9）在作品展示透明按钮下添加一个事件，选中作品展示透明按钮，点击工具栏下的事件工具，添加一个控制时间轴继续播放的事件。

（10）作品展示选中背景图片，点击工具栏下的透明按钮，添加一个作品展示的透明按钮。

iH5高级教程：H5创意展示，视差滑动照片视差滑动，通过手指在屏幕上进行滑动，以左右分割的形式把多张图片进行切换，剪切，滑动，再重组。

接下来，我们来一起实现它。

第一步：1、在舞台下添加一个页面，选中舞台，点击工具栏下的页面工具2、首先来为页面添加一个可移动的背景。

选中页面，在页面下添加一个时间轴工具，点击工具栏下的时间轴工具，添加一个时间轴，命名为背景移动时间3、选中时间轴，在时间轴下添加一张背景图片，点击工具栏的图片工具，在舞台中画出一个矩形，上传需要作为背景的图片，案例里命名为绿色背景图。

4、为了让背景图片可以自发地左右移动，选中背景图片，在下面为图片添加一个轨迹，来设置图片的运动。

点击工具栏的轨迹工具，设定时间轴的时间长度为20秒，自动播放和循环播放都是YES5、背景图片在舞台上来回移动，我们可以在时间轴上设置三个关键帧，来控制背景图片的移动路线。

第0秒，第一帧设定图片的XY轴坐标为（-2,0），第10秒，第二帧的XY轴为（-461,0），第20秒，第三帧的XY轴为（0,0），这样设置坐标参数是为了时间轴循环播放的时候可以保持连贯性，背景图片的透明度始终设置为半透明（40%-50%）左右第二步：1、在页面下添加一个滑动时间轴，选中页面，在工具栏里点击滑动时间轴工具，添加一个滑动时间轴12、选中滑动时间轴1 ，点击工具栏的图片工具，添加一个空白的图片对象，把这个图片对象重命名为滑动图片容器。

在案例里，滑动图片容器下，添加了12个对象组。

选中滑动图片容器，点击工具栏下的对象组工具，添加对象组3、在这里对对象组1和对象组2进行举例说明。

先是对象组1，在对象组1下面，添加两个透明按钮，用来存放相应的图片。

选中对象组1，在工具栏里点击透明按钮工具，添加两个透明按钮，分别改名为容器1和容器2，而两个透明按钮在舞台里的位置分别是（0,0）和（300,0），根据图片的大小调节位置4、在容器1和容器2下，分别添加一个轨迹，选中容器1对象，点击工具栏下的轨迹工具，选中容器2对象，点击工具栏下的轨迹工具，添加轨迹是为了可以让图片按照设置的方向滑动。

iH5高级教程：H5创意展示，3D日历特效步骤：第一步：上传音乐并添加滑动时间轴1、选中舞台，点击工具栏里的“音乐”图标，上传你要播放的音乐。

2、选中舞台，点击工具栏里的“滑动时间轴”图标，在舞台上画出一个框，然后点击滑动时间轴设置滑动时间轴的宽高和舞台的宽高一样。

第二步：添加图片和时间轴1、添加背景图片。

选中舞台，点击工具栏里的“图片”图标，在舞台上画出一个框，图片大小设置与舞台大小一样。

2、选中背景，点击时间轴工具，添加一个时间轴，时间轴下添加一张图片并添加轨迹做一个上下移动的效果，3、选中背景，点击透明按钮工具，在舞台底部画一个框，在透明按钮下添加时间轴，时间轴下添加向上箭头的图片，通过时间轴让他做一个上下的小提示动画第三步：设置滑动时间轴1、选中滑动时间轴，点击透明按钮工具，在舞台上画一个框，作为3D旋转的父对象，父对象的设置只是为了图片旋转设置视距，视距越大3D旋转的效果越不明显,父对象下添加一张静态的图片作日历的环扣。

2、选中3D旋转父对象，添加24个透明按钮，两个按钮是一对的，分别代表日历的正反面，12对透明按钮分别代表12个月的日历，每个按钮下添加一张白色图片，在白色图片下添加日历，可以认为白色图片和日历是一体的，透明按钮设置个颜色通过观察透明按钮和图片的轴就可以发现我们的图片刚好在透明按钮的X轴上，这是因为我们的旋转是以透明按钮的X轴来旋转的，这样设置就可以保证我们是以图片的边缘旋转。

第一个关键帧：第二个关键帧：3、上一小步骤中的透明按钮是第一对按钮中的第一个按钮，它的X轴从0度运动到90度消失，第二个按钮下的是日历的背面设置方法和第一个按钮一样，只是日历被换成了LOGO，而且X轴坐标是从90度到270度。

第一个关键帧：第二个关键帧：4、将正面的轨迹，结束显示设置为否；背面的轨迹，开始显示和结束显示设置为否。

5、选中滑动时间轴，添加一个透明按钮作为辅助轨迹，将所有页面的自动播完属性设置为YES，只有辅助轨迹的自动播完属性设置为NO用辅助轨迹来控制也页面的停的控制点。

颠覆性的H5新技术！iH5可视化工具实现3D动画上面这个有点萌的3D小怪物就是用iH5工具做滴，而且整个H5只有100K不到。

虽然用H5做3D动画不是很新鲜的事，但重点是，用可视化工具就能构建3D图形，这是一件具备革新意义的事情。

1.制作一个可控制移动的立方体接下来要教大家制作基于CSS3 3D的H5动画，任何人都能学会，只要你能认真看完本文。

（当然Canvas和WebGL也可以做，但是需要较强的编程基础，如果要讲的话，还得从基础的JavaScript语言说起，以后有机会再跟大家分享。

）以下教学中的重要知识点会用中括号“【】”标识，这些地方务必认真阅读。

本文用到的工具是iH5，电脑端用谷歌浏览器访问，用我的高级账号登录：账户名：whales@密码：xianrenyige当然，你也可以自己注册一个，或者用原来自己的。

不过用我的账号是顶级账号，可以随便用一些高级功能，而且我做的现成案例也可以帮助你学习。

另，请大家文明使用账号，新建作品的标题统一命名为【个人昵称】+作品名称。

还有，不要删掉别人的作品。

【温馨提示】：你可以用手机看这篇教学，并且同时打开电脑操作。

1.1 新建案例，并构造一个立方体。

进入首页，点击右下角新建案例“+”进入编辑页面，界面如下图：中间那块白色的地方叫做舞台，相当于手机屏幕，所有的元素都在这个区域显示。

工具栏：点击工具栏上的按钮可以添加各种元素，文字、图片、时间、动效等。

对象树：添加的各种元素会以树状的机构显示在这里，方便查找和编辑。

对象属性：选中任意元素，它的属性就会出现在这里，可以设置元素的大小、坐标、颜色等。

再着重介绍一下对象树。

如下图所示，点击工具栏中的透明按钮（第三行第一个），在舞台下添加透明按钮1 并设置为黄色。

鼠标选中透明按钮1，添加透明按钮2，此时，透明按钮2 在对象树中会显示为透明按钮1的子对象。

如图所示：【重要知识点】：父对象移动会带动子对象移动，子对象移动不影响父对象，在H5动画中会经常用到。

iH5高级教程:Ｈ5交互进阶，拖动物品效果通过长按物体对象,再移动物体对象,在与其他物体对象发生碰撞时，产生事先设置的效果。

下面来解析一下案例的拖动物品作品。

第一步：１、选中舞台,点击工具栏下的页面工具,在舞台下添加一个页面。

2、选中页面1，点击工具栏下的图片工具，在舞台上画出一个矩形，在页面１下添加一个背景图片。

3、选中页面１,点击工具栏下的图片工具,在舞台上画出一个矩形,在页面1下添加一个哭的动画图片,右击图片对象,重命名为哭。

选中哭,点击透明按钮工具,在舞台上画一个区域。

重命名为定位。

４、选中页面１,点击工具栏下的图片工具,在舞台上画出一个矩形，在页面1下添加一张箭头图片,右击图片对象,重命名为轨迹。

５、选中页面1,点击工具栏下的图片工具,在舞台上画出一个矩形,在页面1下添加一张笑脸图片,右击图片对象,重命名为笑。

由于此图片的显示需要事件的触发才能显示,所以一开始需要把图片对象前面的钩去掉。

6、选中页面１，点击工具栏下的图片工具，在舞台上画出一个矩形，在页面1下添加一张糖果图片，右击图片对象,重命名为糖。

属性面板拖动方向为任何方向。

第二步:1、选中糖图片对象,点击工具栏下的动效工具，为糖图片对象添加一个动效。

动效的属性设置,时长为1，动效类型为心跳，自动播放为YES,触发后延时为0，开始前隐藏为ＮO，播放次数为1次，循环播放为YES。

2、选中糖图片对象，点击工具栏下的事件组工具，在糖图片对象下添加一个事件组。

3、选中事件组对象,点击工具栏下的事件工具，在事件组对象下添加四个事件。

分别右击每个事件对象，事件1重命名为删除哭,事件2重命名为删除轨迹，事件３重命名为显示笑，事件４重命名为删除糖。

删除哭事件：目标对象是哭图片对象，目标动作是删除。

删除轨迹事件:目标对象是轨迹图片对象,目标动作是删除。

显示笑事件：目标对象是笑图片对象，目标动作是显示。

删除糖事件:目标对象是糖图片对象，目标动作是删除4、选中笑图片对象，点击工具栏下的动效工具，添加一个动效。