公司專案中用到的,仿的人家廠子的效果,看起來還是挺高大上的,其實實現起來很簡單,是一種偽3d;用手勢滑動檢視乙個商品的3d展示。
在手機上手指左右滑動可以360°無死角檢視這個商品,有興趣的可以下demo執行看一下,雖然很簡單但還是有一些問題的,就當做乙個記錄吧,有時間再深入優化一下。
下面看一下**實現,先來個投機版的:
一開始你可能會想用滑動手勢去實現,但是這個東西滑動是要求有慣性的,這樣會顯得比較流暢酷炫
所以我想到了scrollview,初始化**很簡單,新增乙個imageview用來顯示,再新增乙個scrollview,並把他的contentsize弄得超大,初識位置放在中間,也就是contentoffset / 2,
去掉滑動條,這樣使用者除非沒完沒了在那滑很久,不然不可能發現原來不是無限滾動的(這麼大的數使用者發現的機率幾乎為0,嫌小還可以再大點)
1 - (void接下來就是scrollview的**方法了:(我的變數名是不是定義的有點隨便了。/3的意思是讓它不要太靈敏,不然轉的會很快))viewdidload
1 - (void)scrollviewdidscroll:(uiscrollview *)scrollview好了,**就是這麼點,基本功能算是實現出來了,不過我用了個偷懶的方法。但是我爸這裡存在的問題說一下,首先用這種方法是不優雅的,所以我試過把10000000000改成maxfloat,但是當把(maxfloat/2)放在contentoffset的時候就不顯示了,還有我把10000000000 / 2 中的「/2」去掉之後也不顯示了,不知道為什麼,猜測可能不能超過乙個過大的值吧,但是它和的顯示又有什麼影響呢?還沒搞懂,暫時記錄下來了。也試過用無限輪播的思路搞一下,試了一下沒搞成,以後有時間再試試。留下這兩個問題,哪位大牛看到其中問題請一定賜教,哈哈。
原理跟上邊差不多但還是有點區別的,就不多說了,直接上**:(80代表的是一共八十張圖,執行看一下demo基本就應該明白了)
1 - (void待續。。。)viewdidload
1718 - (void)scrollviewdidscroll:(uiscrollview *)scrollview
23if (pianyi > 80
) 26 self.imageview.image = [uiimage imagenamed:[nsstring stringwithformat:@"
%@%04d
",@"
toilet
",pianyi]];
27 }
demo:
3D效果 perspective屬性
css3中的transform可以做2d操作,當然也有3d操作。3d效果的顯示在於父元素必須有乙個perspective屬性。例如 perspective屬性可以定義3d視覺的角度,可以使子元素顯示3d特效。perspectice視距,表示視點距離螢幕的長短,視點,用於模擬透視效果時人眼的位置 pe...
iOS實現3D旋轉
最近看到了乙個3d旋轉的動畫,就想著自己去實現以下。那麼,接下來就通過這邊文章記錄以下學習過程,慢慢深入了解以下3d旋轉。一 如何旋轉 每個view都在系統的座標系中,就手機螢幕來說,左上角為 0 0 向右橫向的為x軸正方向,向下縱向的為y軸正方向,垂直於手機螢幕的方向既z軸方向。所以z軸的旋轉屬於...
3d相簿彈出效果02
在3d 相簿基本的布局完成之後,接下來需要完成的是滑鼠拖拽的效果。描述 滑鼠向右移動,整個相簿跟隨滑鼠旋轉,向下移動時,整個相簿的視角向下傾斜。主要涉及到滑鼠按下,移動和抬起三個事件 滑鼠按下事件 document mousedown function e 滑鼠移動事件 this mousemove...