iOS實現貝塞爾曲線動畫

2022-09-20 09:15:09 字數 1968 閱讀 9683

效果如圖:

仿美人相機,手勢滑動隱藏頂部view。為了方便講解,將螢幕分為幾個區域,如圖:

在拖動過程中:

1、拖動距離小於minmovedistance,貝賽爾曲線發生形變

2、拖動大於minmovedistance,整個view開始下移

在鬆開手時:

1、拖動距離小於minmovedistance,未發生位移,貝塞爾曲線恢復形變

2、拖動大於minmovedistance,小於mindisappeardistance,貝塞爾曲線恢復形變、位移回到初始位置。

3、拖動大於mindisappeardistance,向下移動隱藏view

在拖動時曲線形變、鬆手時曲線恢復形變的時候都需要改變貝塞爾曲線,實際上是改變二階貝塞爾曲線的控制點,因此寫乙個方法,根據傳入的y軸位移量得到新的貝塞爾路徑:

- (cgpathref)getpathwithmovedistance:(cgfloat)distance

初始化的時候,可以根據上一步的方法,傳入位移量0,獲取貝塞爾路徑,並將獲得的路徑賦給cashapelayer:

- (id)initwithframe:(cgrect)frame

return self;

}- (void)setuplayer

新增uipangesturerecognizer拖動手勢,並處理手勢拖動和結束拖動的事件。

拖動時:

1、拖動距離小於minmovedistance,只有貝賽爾曲線發生形變,呼叫步奏一中的方法。

2、拖動距離大於minmovedistance,整個view開始下移

結束拖動時:

呼叫revertformy:方法,傳入當前在y軸上已經發生的位移量

- (void)addgesure

[self addgesturerecognizer:self.gesture];

}- (void)handlepan:(uipangesturerecognizer *)gesture

//拖動過程

if (gesture.state == uigesturerecognizerstatechanged)

//移動大於minmovedistance,整個view下移

else if (distancey > minmovedistance)

}//手勢結束

if (gesture.state == uigesturerecognizerstateended || gesture.state == uigesturerecognizerstatecancelled || gesture.state == uigesturerecognizerstatefailed)

}根據傳入的y軸上的位移量,實現不同的效果:

1、y小於minmovedistance,未發生位移,貝塞爾曲線恢復形變

2、y大於minmovedistance,小於mindisappeardistance,貝塞爾曲線恢復形變、位移回到初始位置。

3、y大於mindisappeardistance,向下移動隱藏view

//手勢結束後恢復或隱藏

-(void)revertformy:(cgfloat)y

//y > 最小位移距離,發生了位移

if(y > minmovedistance)

//向下隱藏view

else

self.frame = cgrectmake(0, endy, screen_width, self.frame.size.height);

}];}

}這個只是為了回到初始狀態,根據實際需求實現。

/www.cppcns.com/恢復到初始位置

- (void)comeback

[uiview animatewithduration:0.3 animations:^ completion:^(bool finished) ];

}完整**

本文標題: ios實現貝塞爾曲線動畫

本文位址:

ios動畫之貝塞爾曲線和PaintCode

專案中遇到幾個動畫效果,需要乙個uiimageview沿著乙個特定的路徑移動,美術的設計是這樣的 通常的實現方法是利用cakeyframeanimation的path屬性,這個屬性接受乙個uibezierpath,可以使得layer沿著path移動,如下 這個不是飛碟的動畫,就是個例子 d uibe...

貝塞爾曲線

1.概述 貝塞爾曲線 b zier curve 又稱 貝茲曲線或貝濟埃曲線,是應用於二維圖形應用程式的數學曲線。一般的向量圖形 軟體通過它來精確畫出曲線,貝茲曲線由 線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。貝塞爾曲線是計算機圖形學...

貝塞爾曲線

由於工作需要,最近在研究乙個類似qq訊息劃掉的效果 很多強迫症患者童鞋對這個簡直是愛不釋手,當然這個也包括我自己 貝塞爾曲線就是這樣的一條曲線,它是依據四個位置任意的點座標繪製出的一條 光滑曲線 在歷史上,研究貝塞爾曲線的人最初是按照已知曲線 引數方程 來確定四個點的思路設計出這種向量曲線繪製法。貝...