簡單彩虹動畫的效果實現
我們先看下最後的效果圖
1、首先我們使用uibezierpath類畫乙個圓弧，使用方法
+ (instancetype)bezierpathwitharccenter:(cgpoint)center radius:(cgfloat)radius startangle:(cgfloat)startangle endangle:(cgfloat)endangle clockwise:(bool)clockwise;
center 圓弧的位置
radius 圓弧的弧度
startangle 開始的地方
endangle 結束的地方
2、使用cashapelayer類給圓弧乙個基礎層
_progresslayer = [cashapelayer layer];//建立
_progresslayer.frame = self
.bounds;//位置
_progresslayer.fillcolor = [[uicolor clearcolor] cgcolor];//填充顏色
_progresslayer.strokecolor=[uicolor redcolor].cgcolor;//弧形顏色
_progresslayer.linecap = kcalinecapround;
_progresslayer.linewidth = progress_line_width;
cagradientlayer *gradient = [cagradientlayer layer];//建立物件
gradient.frame = _progresslayer.frame;
[gradient setcolors:[nsarray arraywithobjects:(id)[[uicolor redcolor] cgcolor],(id)[[uicolor yellowcolor] cgcolor],(id)[[uicolor redcolor] cgcolor],(id)[[uicolor yellowcolor] cgcolor],(id)[[uicolor bluecolor] cgcolor],(id)[[uicolor redcolor] cgcolor], nil]];//設定顏色
[gradient setlocations:@[@0,@0.3,@0.5,@0.6,@0.8,@1]];//每種顏色最後的位置
[gradient setstartpoint:cgpointmake(0, 0)];//起始點
[gradient setendpoint:cgpointmake(1, 0)];//結束點
[gradient setmask:_progresslayer];//擷取圓弧
[self
.layer addsublayer:gradient];//新增
再做乙個動畫的效果吧
4、動畫我使用的是cabasicanimation類
cabasicanimation *animation=[cabasicanimation animationwithkeypath:@"strokeend"];
animation.duration = 2
; animation.timingfunction=[camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout];
animation.fromvalue=[nsnumber numberwithfloat:0.0f];
animation.tovalue=[nsnumber numberwithfloat:1.0f];
animation.autoreverses=no;
_progresslayer.path=path.cgpath
; [_progresslayer addanimation:animation forkey:@"strokeendanimation"];
寫得不好的地方希望大神指點。
ListView之簡單動畫效果實現
下面是布局檔案中乙個listview控制項 其中引用了乙個list layout animation檔案，下面我們在res anim 下面建立這樣乙個檔案,其內容如下 其中，android animation表示每個item出現時使用的動畫，它引用了item animation檔案，該檔案中具體描述...
前端動畫效果實現的簡單比較
合適的動畫不僅更能吸引人們的眼球，也能讓你的應用體驗更為流暢，而將動畫的效果做到極致，才能讓使用者感到使用你的應用是一種享受，而不是覺得生硬和枯燥。本文旨在 各種前端動畫效果實現方式的異同，具體應用中如何實現，以及實現的效果還得根據自身的情況進行考量。因為沒有其它可用的實現方式，最初的前端動畫都是j...
vue動畫過渡效果實現
1.首先在父路由中新增transition標籤 並給其新增動態的 name屬性 然後用transition標籤包裹router view標籤 然後在data中return出來動態 name 在style中寫 name enter,name enter to,name enter active的樣式 ...