彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 前端技术 2019-12-07 08:08 的文章
当前位置: 彩世界开奖app官网 > 前端技术 > 正文

iOS开发 - 720度全景展示 & 序列帧动画【彩世界平

]()

什么叫全景展示?序列帧动画又是什么鬼?

1、全景展示就是利用一张球型的全景图片亦或6张不同方向的图片,组成一个球型或正方体
2、序列帧动画就相对简单了,无非就是控制很多很多张图片跑起来所展现出来的动画当然这些动画都是专业人员用模型渲染出来的图片

(ps: 这是我的第一篇博文,还不太会操作)17:24:12

定位热点方法

本人愚昧,真心不知道别人的热点是怎么找出来的,所以在咨询过网友后,得知可以使用Windows下的Pano2VR软件进行热点定位可能图片的方向不同,我这里定位出来的热点应用热点要把x,y值交换。代码如下:

//Pano2VR 灯定位(-95.90, 36.84)
PLHotspot *hotspot = [PLHotspot hotspotWithId:1 texture:hotspotTexture atv:36.84 ath:95.90 width:0.05 height:0.05]; 
[panorama addHotspot:hotspot];
//Pano2VR 大门定位(-74.51, 2.33) 
PLHotspot *hotspot2 = [PLHotspot hotspotWithId:2 texture:hotspotTexture atv:2.33 ath:74.51 width:0.05 height:0.05];
[panorama addHotspot:hotspot2]; 
//Pano2VR枕头定位(-126.77, -13.21) 
PLHotspot *hotspot3 = [PLHotspot hotspotWithId:3 texture:hotspotTexture atv:-13.21 ath:126.77 width:0.05 height:0.05]; 
[panorama addHotspot:hotspot3]; 
//Pano2VR 窗帘定位(86.62, 17.55) 
PLHotspot *hotspot4 = [PLHotspot hotspotWithId:4 texture:hotspotTexture atv:17.55 ath:-86.62 width:0.05 height:0.05]; 
[panorama addHotspot:hotspot4];

定位方式:将6方图(也可以是单张全景图)导入Pano2VR软件后,进行热点定位定位拿到平移与仰视的坐标,
如:(-95, 36.84) ==> (36.84, 95.)在PanoramaGL 框架中应用时将xy坐标反置,并且x取反,如(x, y)==> (y, -x)
热点定位效果如图所示:

彩世界平台官方网址 1

Pano2VR软件热点坐标

彩世界平台官方网址 2

框架内实际应用效果

GitHub地址:https://github.com/90candy/Panoramic-Sequence.git

彩世界平台官方网址 3

图片地址:图片下载

这里我的全景展示所用到的框架就是很古老的PanoramaGL框架了,该框架使用的是手动内存管理,我也是到处扒文才搞好的,由于项目是iPad项目,没有适配手机版,所以这里也只展示iPad版本的代码。

1、PanoramaGL 这个框架呢由于是使用的手动管理内存,而我们平时做项目基本上都是自动管理内存
2、所以当把这个框架导入我们工程的时候往往是有很多的报错的,所以这个时候我们就要给它添加 “-fno-objc-arc”
3、添加方法也很简单,就是在 Build Phasesv 中的 Compile Sources 挨个给PanoramaGL 框架文件添加“-fno-objc-arc”
4、具体如图所示:

彩世界平台官方网址 4

[添加-fno-objc-arc示例]

 之后我也在网上找了一些案例,我把文件放在这里,有兴趣的朋友可以看看

先来看看效果图吧:

彩世界平台官方网址 5

Panorama效果演示

彩世界平台官方网址 6

序列帧效果演示

这里说明一点,请大神勿喷,使用了网上扒来的资源,网上也有更好的框架,可惜人家挂淘宝卖,我们穷人买不起
我也不知道为什么一旦使用预编译文件就会报错,最后我的项目也不得不在基类去导入要使用的各种框架,请知道原因的发个说明给我,谢谢!
测试Demo所涉及资源均来自网上,所以请勿将图片素材资源商用,谢谢

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>序列帧动画练习一</title>
    <!--如果图片是单行排列   那他的每帧百分比可以不细分-->
    <style type="text/css">
        .girl {
                background: url('hotspot.png');/*图片的宽高为128 3200px*/
                 /*  务必设置box的宽度,这样其他不在box中就不会显示*/
                background-size: 128px 3200px;/*表示在图片标签中显示的宽高  一般是序列帧图片的宽高或者他的倍数    3200px / 128px  == 25 */
                -webkit-animation: demo 2s steps(25) infinite; /*steps(25)表示设置25步完成动画*/
                width: 128px;
                height: 128px;
            }
            @-webkit-keyframes demo {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: 0px -3200px;
                } /*设置背景图的位置从0 到-3200px  -表示图片向上移*/
            }
    </style>
</head>
<body bgcolor="gray">
    <div  class="girl" style="top: 38%;left: 36%;position: absolute;">
</body>
</html>

 

最近有个客户想要做一个热点图片,但我对动画没有太多的接触,经过这几天的研究和上网查找资料,终于作了出序列帧动画。

[序列帧动画下载

代码如下:

第一个是自己写的案例 , 第二三个是在网上找别人的但是原网我忘了(日后找到了我会将原网地址放上)。

彩世界平台官方网址 7

本文由彩世界开奖app官网发布于前端技术,转载请注明出处:iOS开发 - 720度全景展示 & 序列帧动画【彩世界平

关键词: IOS开发笔记