自定義日出日落曲線動畫

2021-08-02 18:30:43 字數 2123 閱讀 6741

最近在使用某一款軟體的時候發現了它的乙個日出日落的動畫，感覺還不錯，後面就自己動手擼了乙個原始碼位址。

我們先對這個動畫元素進行分析：

1. 需要一條曲線。

2. 需要乙個沿著曲線運動的小太陽。

3. 需要乙個跟著太陽一起運動的陰影面。

首先我們定義乙個自定義view，然後初始化一些我們上面分析到的元素

//曲線初始化


mpathpaint = new paint(paint.anti_alias_flag);


mpathpaint.setstyle(paint.style.stroke);


mpathpaint.setstrokewidth(2);


mpathpaint.setcolor(color.parsecolor("#ffffff"));


patheffect effects = new dashpatheffect(new


float, 0);


mpathpaint.setpatheffect(effects);


//日出動畫陰影部分初始化


manmationpaint = new paint(paint.anti_alias_flag);


manmationpaint.setstyle(paint.style.fill_and_stroke);


manmationpaint.setcolor(color.parsecolor("#32ffffff"));


//開始座標的xy


mstartpointx = dp2px(9);


mstartpointy = dp2px(80);


//結束座標的xy


mendpointx = dp2px(139);


mendpointy = mstartpointy;


//太陽的移動座標的xy


mmovepointx = mstartpointx;


mmovepointy = mstartpointy;


//圓的半徑


mradius = dp2px(74);


//圓心座標


mcirclepointx = dp2px(74);


mcirclepointy = dp2px(115);


//圓的初始化


mrectf = new rectf(mcirclepointx - mradius, mcirclepointy - mradius, mcirclepointx + mradius, mcirclepointy + mradius);
接下來就是我們繪製的**

if (isneedsun)  else


if (mnotup || mhasdown) else 


} else
最後就是通過我們外部的控制來實現小太陽的動畫

msunbitmap = bitmapfactory.decoderesource(getresources(), r.drawable.daily_deatil_sun);


mbitmapw = msunbitmap.getwidth() / 2;


mbitmaph = msunbitmap.getheight() / 2;


mnotup = false;


isneedsun = true;


mhasdown = false;


valueanimator progressanimator = valueanimator.offloat(210, 330);


progressanimator.setduration(3000);


progressanimator.addupdatelistener(new valueanimator.animatorupdatelistener() else 


}});


progressanimator.setinterpolator(new linearinterpolator());


progressanimator.start();
最後附上原始碼位址和簡單看一下效果圖：

自定義動畫

在製作自定義動畫時，有以下八個樣式可供選擇 animation name 動畫名稱 元素所應用的動畫名稱，必須與規則 keyframes 配合使用，因為動畫名稱由 keyframes 定義。animation duration 動畫時間 設定物件動畫的持續時間 animation timing fu...

CustomAnim自定義動畫

android只提供了4種基本動畫效果，除了可以疊加效果外，我們還可以進行自定義動畫。mainactivity.class不變 package com.customanim.customanim import android.os.bundle import android.view.view pu...

自定義動畫效果

demotitle charset utf 8 src bootstrap js jquery.min.js script div1 style head animateh2 params,speed easing fn p 用於建立自定義動畫的函式。這個函式的關鍵在於指定動畫形式及結果樣式屬性物件...