木疙瘩教程：如何制作拖动长图类的H5动画？
拖动长图类的H5动画类似于全景图，今天，小编就把拖动长图类的H5动画的方法分享给大家！
步骤1：设置首页
- 01
如下图，点击“导入Photoshopshop(PSD)素材”按钮，将PSD格式内的图片素材原位置“分层导入”编辑页面
- 02
可为每个素材添加预置动画效果
- 03
将“点击”图标右键转换为元件，双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。
步骤2：设置长图元件动画
- 01
新建图层，在第3帧插入帧，插入关键帧，同时添加进长图背景素材
- 02
将背景图片右键转换为元件，进入元件页面。新建图层，分层导入其他图片素材。
- 03
为所有素材图层插入关键帧动画，分别设置素材的动画效果，例如给人物素材设置放大缩小动画，为“向左滑动”图标设置向左滑动动画效果。
- 04
回到舞台，补全所有图层的帧数，为长图元件添加预置动画，如图为“向右移入”
- 05
如下图，为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”，添加矩形，为其添加一个“出现即暂停”的行为。注意随时保存作品。
- 06
选中长图元件，在其属性栏内设置“拖动/旋转”为“水平拖动”
步骤3：设置点击出现提示效果
- 01
新建图层“提示层”，在第4帧插入空白关键帧，同时导入原先预备好的提示素材。可为其添加预置动画效果等。
- 02
新建两个按钮层，分别在一个图层的第3帧放置“分享”按钮，在另一个图层第4帧提示页面放置一个“返回”按钮。
- 03
补全“行为层”及其他图层帧数，为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为
- 04
为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画，同理可为接下来的人物素材设置提示出现消失的动画。
- 05
设置分享动画的提示：如下图，新建“分享”图层，添加分享提示的素材，命名为“分享”，将其移至舞台之外。
步骤4：为“分享”按钮添加“改变元素属性”行为
- 01
属性控制→改变元素属性→触发条件：点击。 设置“参数” 元素名称：“分享” 元素属性：“左” 赋值方式：“用设置的值替换现有值” 取值：“0”
- 02
同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为，即点击将其移至舞台之外。