养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

木疙瘩教程:如何制作拖动长图类的H5动画

时间:2024-10-21 20:39:37

拖动长图类的H5动画类似于全景图,今天,小编就把拖动长图类的H5动画的方法分享给大家!

工具/原料

木疙瘩平台

步骤1:设置首页

1、如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面

木疙瘩教程:如何制作拖动长图类的H5动画

2、可为每个素材添加预置动画效果

木疙瘩教程:如何制作拖动长图类的H5动画

3、将“点击”图标右键转换为元件,双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。

木疙瘩教程:如何制作拖动长图类的H5动画

步骤2:设置长图元件动画

1、新建图层,在第3帧插入帧,插入关键帧,同时添加进长图背景素材

木疙瘩教程:如何制作拖动长图类的H5动画

2、将背景图片右键转换为元件,进入元件页面。新建图层,分层导入其他图片素材。

木疙瘩教程:如何制作拖动长图类的H5动画

3、为所有素材图层插入关键爷颔帘涝帧动画,分别设置素材的动画效果,例如给人物素材设置放大缩小动画,为“向左滑动”图标设置向左滑动动画效果。

木疙瘩教程:如何制作拖动长图类的H5动画

4、回到舞台,补全所有图层的帧数,为长图元件添加预置动画,如图为“向右移入”

木疙瘩教程:如何制作拖动长图类的H5动画

5、如下图,为“点击”图标添加“点击跳转到尤莘彐幼第3帧并停止”的行为。同时新建图层“行为层”,添加矩形,为其添加一个“出现即暂停”的行为。注意随时保存作品。

木疙瘩教程:如何制作拖动长图类的H5动画

6、选中长图元件,在其属性栏内设置“拖动/旋转”为“水平拖动”

木疙瘩教程:如何制作拖动长图类的H5动画

步骤3:设置点击出现提示效果

1、新建图层“提示层”,在第4帧插入空白关键帧,同时导入原先预备好的提示素材。可为其添加预置动画效果等。

木疙瘩教程:如何制作拖动长图类的H5动画

2、新建两个按钮层,分别在一个图层的第3帧放置“分享”按钮,在另一个图层第4帧提示页面放置一个“返回”按钮。

木疙瘩教程:如何制作拖动长图类的H5动画

3、补全“行为层”及其他图层帧数,为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为

木疙瘩教程:如何制作拖动长图类的H5动画

4、为第4帧的“返回”按钮藜局腑载添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画,同理可为接下来的人物素材设置提示出现消失的动画。

木疙瘩教程:如何制作拖动长图类的H5动画

5、设置分享动画的提示:如下图,新建“分享”图层,添加分享提示的素材,命名为“分享”,将其移至舞台之外。

木疙瘩教程:如何制作拖动长图类的H5动画

步骤4:为“分享”按钮添加“改变元素属性”行为

1、属性控制→改变元素属性→触发条件:点击。设置“参数”元素名缍硫赔笏称:“分享”元素属性:“左”赋值方式:“用设置的值替换现有值”取值:“0”

木疙瘩教程:如何制作拖动长图类的H5动画

木疙瘩教程:如何制作拖动长图类的H5动画

2、同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为,即点击将其移至舞台之外。

木疙瘩教程:如何制作拖动长图类的H5动画

© 一点知识