0419 cocos2d 畫中畫效果

cocos2d 畫中畫效果

目錄 [隱藏]

• 1.效果圖
• 2.如何實現理論
• 3.實現的難點

1.效果圖

2.如何實現理論

  

我們以2張圖作為實例。最外面的大圖，還有就是紅色框框中的圖。 這兩張圖的尺寸是一樣的。

準備工作我們就做2件事情：

1.把第二張圖縮小，向右旋轉添加到第一張圖中，看起來還是第一張圖

2.把第一張圖的錨點設置為紫色的那個點（非常重要，這樣縮放才有較好的效果）

用戶手指滑動的時候，我們做的事情：

1.第一張圖同時run 3個action，放大，向左旋轉，位移

移動的位置比較講究，結果是要把紫色的點移動到屏幕中間。（這個點就比較難計算）

3.實現的難點

1.已知一個精靈中的點，求它對應錨點？

比如一張圖片它的寬度是500，高度400. 那麼p(200，300）這個點對應的錨點是多少？

?

1 2	float anchorPointX = 200 / width;           float anchorPointY = 300 / height;

就是當前位置的x,y分別除以這個圖片的寬，高度。

2.一個精靈本來是在屏幕中心的，現在有一個點p(200,300), 如何移動這個精靈使得，結果是p(200,300)這個點居於屏幕中心？

?

1 2	Vec2 worldPosition = smallSprite->convertToNodeSpace(Vec2(WIN_WIDTH/2, WIN_HEIGHT /2));         Vec2 pos = worldPosition - Vec2(smallSprite->getContentSize().width * 0.5, smallSprite->getContentSize().height * 0.5);

2張圖慢慢搞，還是可以成功。那麼5，6張圖呢？

我嘗試過按照2張圖那樣搞，一次全部添加，縮放會有問題，因為倍數太大了，導致了模糊。所以只能弄成一個組

0，1

1，2

2，3

3，4

4，5

每次都是顯示2組，剛開始顯示 3，4 ，4，5  這兩組，3，4隱藏，顯示4，5，在4繼續往左滑動就隱藏4，5，顯示3，4。一旦用戶在3這個狀態繼續往左滑動，就變成 2，3，3，4這2組。

邏輯是這樣，實現起來還是需要費點時間。就這樣吧。真正實現出來有成就感。