iOS 動畫解析 支付寶支付動畫 上

2021-07-30 15:55:23 字數 1789 閱讀 5313

平時在用支付寶付款時,會有乙個支付中的動畫和乙個支付完成的動畫。這篇部落格主要分析一下支付中的動畫效果,效果如下:

為了方便觀察,放慢了動畫的速度並新增輔助線:

從圖中可以看出:載入圓弧運動軌跡可分為前半段後半段;並且圓弧的起始角度(startangle)和結束角度(endangle)在做有規律的變化;

前半段:從-0.5π到π,這一段運動中速度較快;startangle不變,始終未-0.5π;endangle在勻速上公升,一直到π;前半段中圓弧不斷變長,最後形成乙個3/4的圓。

後半段:從π到1.5π,這一段運動速度較慢;startangle開始變化,從-0.5π變化到1.5π;endangle從π變化到1.5π,最後startangle和endangle重合於1.5π;後半段中圓弧不斷變長,最後直至消失。

_link = [cadisplaylink displaylinkwithtarget:self

selector:@selector(displaylinkaction)];

[_link addtorunloop:[nsrunloop mainrunloop] formode:nsdefaultrunloopmode];

_link.paused = true;

為了實現前半段後半段的速度區別,定義了乙個速度方法:

-(cgfloat)speed

return

0.8/60.0f;

}

通過cadisplaylink重新整理進度,進度增長的快慢有speed決定:

-(void)displaylinkaction

[self updateanimationlayer];

}

重新整理貝塞爾曲線的startangle和endangle實現曲線的運動:

-(void)updateanimationlayer

cgfloat radius = _animationlayer.bounds

.size

.width/2.0f - linewidth/2.0f;

cgfloat centerx = _animationlayer.bounds

.size

.width/2.0f;

cgfloat centery = _animationlayer.bounds

.size

.height/2.0f;

uibezierpath *path = [uibezierpath bezierpathwitharccenter:cgpointmake(centerx, centery) radius:radius startangle:_startangle endangle:_endangle clockwise:true];

path.linecapstyle = kcglinecapround;

_animationlayer.path = path.cgpath

;}

仿支付寶支付成功動畫

與支付寶支付成功後類似的乙個動畫,本人小白乙隻大神請繞過,畫的菜大家見諒 直接將view拷貝進專案中即可,動畫開關為loadcircle和stop方法,提供了監聽介面ondonecircleanimlistner以便於和外部邏輯銜接 import android.animation.animator...

PathMeasure 仿支付寶支付動畫

在 android 自定義 view 中,path 可能用的比較多,pathmeasure 可能用的比較少,就我而言,以前也沒有使用過 pathmeasure 這個 api,看到別人用 pathmeasure 和 valueanimator 結合在一起完成了很好的動畫效果,於是我也學習下 pathm...

iOS整合支付寶支付

在組裝請求資訊這塊,要求是 tips 這一步應在商戶服務端完成,商戶服務端直接將組裝和簽名後的請求串orderstring傳給客戶端,客戶端直接傳給sdk發起請求。文件和demo是為了示例效果在客戶端實現。大致的組裝邏輯是,通過order物件構建乙個字典,將字典按key排序,將key value拼接...