實現widget時鐘翻頁效果，類似墨跡天氣：

比較簡單的方法是 幀動畫方式實現，但需要很多的圖片資源，每次切換都需要三張圖，放棄此種方法。

墨跡天氣的實現方法：

通過基本的圖片每次在時間切換時動態生成圖片:

?

?

[DEMO ?widget生成圖] ?每次切換時 從上往下翻。

?

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="@integer/pageturning_layout_weight_top"android:orientation="vertical" ><FrameLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:id="@+id/topoldnum_m"android:layout_width="fill_parent"android:layout_height="fill_parent" ><ImageViewandroid:id="@+id/topoldhalf_m"android:layout_width="fill_parent"android:layout_height="fill_parent"android:scaleType="fitXY" /></LinearLayout><LinearLayoutandroid:id="@+id/topnewnum_m"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layoutAnimation="@anim/la_pageturning_top" ><ImageViewandroid:id="@+id/topnewhalf_m"android:layout_width="fill_parent"android:layout_height="fill_parent"android:scaleType="fitXY" /></LinearLayout></FrameLayout></LinearLayout><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="@integer/pageturning_layout_weight_bottom"android:orientation="vertical" ><FrameLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:id="@+id/bottomoldnum_m"android:layout_width="fill_parent"android:layout_height="fill_parent" ><ImageViewandroid:id="@+id/bottomoldhalf_m"android:layout_width="fill_parent"android:layout_height="fill_parent"android:scaleType="fitXY" /></LinearLayout><LinearLayoutandroid:id="@+id/bottomnewnum_m"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layoutAnimation="@anim/la_pageturning_bottom" ><ImageViewandroid:id="@+id/bottomnewhalf_m"android:layout_width="fill_parent"android:layout_height="fill_parent"android:scaleType="fitXY" /></LinearLayout></FrameLayout></LinearLayout></LinearLayout>

?

上為分鐘部分 所用的xml布局文件。

?

總體分為上下兩部分： 上下兩部分各有動畫效果，實現翻頁的效果。

每部分又有兩張圖需要動態生成【表現為ImageView】，如?topoldhalf_m 和?topnewnum_m, topoldhalf_m代表 上一分鐘的時間的上半部分 如 23，topnewnum_m為下一分鐘的時間的上半部分 如 24。

?

同理下半部分依然，上下兩部分拼接在一起就是我們看到的時鐘數字了。

廢話不多說，上Demo。

PageAnimation.rar

?

總結

以上是生活随笔為你收集整理的似墨迹天气 widget翻页时钟实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。