;

白小萌】提问: 3.0版,横屏案例要怎么做

因为有些手机,没有打开横屏的旋转,有些iphone手机,打开横屏旋转之后无论怎样都无法正常看案例了,手机横过来,案例也会横过来,要斜着眼看。


3 个回答

问答宝宝

再补充一个常见的场景,横屏的长图,可以左右拖动。

详见以下直播录屏,录屏中制作的案例下载地址: http://www.ih5.cn/editor3/app/workCopy/6352506

泽雨点石

横屏处理思路跟上面一样。页面会因机型而出现不同程度的变扁,这个要不要扁,可以理解下面的说明以后,根据自己的情况进行修改。

image.png

先说一下横置触发的事件,只有一个动作触发触发器。为什么需要这个触发器,因为经过测试舞台的高不能在横置手机这个条件触发的时候立刻取得变化,所以延时一点获取。触发器设置0.2秒间隔,播放次数1。

获取完以后就设置容器1的属性,由于容器1的长宽都是1,所以直接设置比例值,它就会按照这个比例进行放缩。

竖置的设置相对来说就比较的直接了,由于在编辑时是横向编辑的,所以竖置的时候就要旋转90度,同时要向右移动640px(因为旋转的中心是左上角)。

image.png

舞台播放模式选为PC

image.png

案例复制链接:http://www.ih5.cn/editor3/app/workCopy/5910700

may

先贴两张效果图:(后文有案例体验和下载地址)

image.png


案例体验:image.png


我们希望无论用户是否打开了竖屏锁定,当他横置手机的时候,都能看到正常的效果。同时,我们编辑案例的时候最好不要太麻烦。


以下是实现这种效果的方法:

首先,我们新建一个100*100的对象组,并把对象组的“整体放缩属性”打开:image.png。注意,这点非常重要,否则我们的案例是无法正常放缩旋转的。


然后我们就可以在里面制作横屏的案例,在这里,我直接把背景图做成了1040*640,然后x和y分别设为0,0;


image.png

除了背景图,任意要添加的对象,都添加在这个对象组里面,比如时间轴,滑动时间轴,和我们添加在舞台上是一样的。


最后,我们需要在舞台上加手机横置和手机竖置的事件,来调整我们那个100*100的对象组的大小,位置和旋转。由于对象组打开了整体放缩,所以当对象组放缩的时候,里面所有的对象会一起放缩,我们不用去担心内部对象的对齐问题。


事件的设置,这个案例是这样设的:

image.png

如果你要的效果,和本案例一样,可以完全复制这个设置,如果想要在手机横屏的时候,有不一样的自适应方法,直接去调整一下手机横置事件里面对象组的宽、高以及X,Y即可。可以先在舞台上自己测试一下,然后再把属性复制到事件里面去。


事件设置好之后,舞台上我们依然可以用横屏的样式去编辑,不用去理会自适应的问题了。


这个案例的下载地址如下,下载前请先确保登陆了ih5账号,否则会下载失败:

http://www.ih5.cn/editor3/app/workCopy/5525515


学习地图