Linux教程網 >> Linux編程 >> Linux編程 >> Android實現炫酷SVG動畫效果

Android實現炫酷SVG動畫效果

日期：2017/3/1 9:25:57 编辑：Linux編程

svg是目前十分流行的圖像文件格式了,svg嚴格來說應該是一種開放標准的矢量圖形語言，使用svg格式我們可以直接用代碼來描繪圖像，可以用任何文字處理工具打開svg圖像，通過改變部分代碼來使圖像具有交互功能，並可以隨時插入到HTML中通過浏覽器(如火狐浏覽器)來觀看。使用svg格式可讓你設計激動人心的、高分辨率的Web圖形頁面。

svg格式具備目前網絡流行的jpg和png等格式無法具備的優勢：可以任意放大圖形顯示，但絕不會以犧牲圖像質量為代價;可在svg圖像中保留可編輯和可搜尋的狀態;平均來講，svg文件比其它格式的圖像文件要小很多，因而下載也很快。

我們先來看幾張Android上使用SVG的效果圖：

從上面的圖片看到，如果我們自己來實現這樣的特效，非常的麻煩，不過接下來給大家介紹一個開源控件，就可以配合SVG實現這些效果。

首先我們來了解SVG文件的格式，舉個例子：

上面的代碼很復雜，如果說它們是代碼的話，但是我們可以注意到，這種書寫方式，有點類似於html，都是使用標簽

使用最多的標簽是path，也就是路徑

有的人也會想到，要實現照片上的動態效果，我們可以使用Android自帶的繪圖類和函數，復雜的曲線路徑，我們可以使用path這個類來制定

那會不會SVG裡面的path，其實也是這樣，那麼我們就可以將SVG中的path，對應到android，然後繪制出來就好了。

SVG裡面還有各種標簽：

包括line直線，circle圓，rect矩形，eliipse橢圓，polygon多邊形，等等

這些只要我們又一個SVG文件，都可以將其轉換成java代碼

作為一個程序員，我們當然不能手動去做這個工作，那就涉及兩個問題，一個是SVG的解析，一個是解析後的繪制

幸運的是，已經有人完成了這個工作，並且在Github上開源 https://github.com/geftimov/android-pathview

這篇文章將作為一個簡單的例子，來使用上面的開源控件

為了解析SVG,我們需要將一個androidsvg.jar包含進我們的lib

下面我們來看這個控件的簡單使用，作為一個自定義控件，我們只需要在布局文件裡面添加

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<com.example.kaiyicky.myapplication.PathView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/pathView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:pathColor="@android:color/white"
app:svg="@raw/ironman_white"
app:pathWidth="5"/>
</LinearLayout>

其實app:svg指定了一個SVG文件，我們可以把這個文章放在raw目錄下面

然後來看Activity裡面：

public class MainActivity extends FragmentActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final PathView pathView = (PathView) findViewById(R.id.pathView);
// final Path path = makeConvexArrow(50, 100);
// pathView.setPath(path);
pathView.setFillAfter(true);
pathView.useNaturalColors();
pathView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
pathView.getPathAnimator().
delay(100).
duration(1500).
interpolator(new AccelerateDecelerateInterpolator()).
start();
}
});
}

private Path makeConvexArrow(float length, float height) {
final Path path = new Path();
path.moveTo(0.0f, 0.0f);
path.lineTo(length / 4f, 0.0f);
path.lineTo(length, height / 2.0f);
path.lineTo(length / 4f, height);
path.lineTo(0.0f, height);
path.lineTo(length * 3f / 4f, height / 2f);
path.lineTo(0.0f, 0.0f);
path.close();
return path;
}

}

看到注釋的部分，調用了makeConvexArraw()方法，如果我們沒有在xml文件裡面指定svg文件，我們也可以在代碼中手動指定繪制的路徑

讓代碼跑起來，點擊屏幕，於是就實現了以下效果：

就是這麼簡單，至於這麼制作SVG文件，大家可以找美工幫忙，使用ps和ai,可以將圖片轉換成SVG

源碼下載地址：

百度網盤下載： http://pan.baidu.com/s/1pJ9pmnL

------------------------------------------分割線------------------------------------------

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2015年資料/8月/20日/Android實現炫酷SVG動畫效果/

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割線------------------------------------------