使用Path有段时间了,之前在微博中说要写一个demo原型,最近正好有时间将其效果实现了。如下图:
由于是动画效果,这里的截图不能体现,具体需要下载代码放到真机中查看。
说一下思路:
整体布局是FrameLayout,所有原型图标叠在一起,红色按钮和白色加号按钮在最上边,代码如下:
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true">
<ImageView android:id="@+id/picture_tiankong"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="@drawable/composer_camera"
android:layout_gravity="bottom" /><ImageView android:id="@+id/music" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/composer_music"
android:layout_gravity="bottom" /><ImageView android:id="@+id/place" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/composer_place"
android:layout_gravity="bottom" /><ImageView android:id="@+id/sleep" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/composer_sleep" android:layout_gravity="bottom"/><ImageView android:id="@+id/thought" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/composer_thought" android:layout_gravity="bottom"/><ImageView android:id="@+id/with" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/composer_with" android:layout_gravity="bottom"/><FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:clickable="true"
android:onClick="myanimation" android:layout_gravity="bottom"><ImageView android:id="@+id/friends" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/composer_button" /><ImageView android:id="@+id/myplus" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/composer_icn_plus"
android:layout_gravity="center" />
</FrameLayout>
</FrameLayout>
动画分为两部分,中间的加号图片做旋转动画(RotateAnimation,具体实现参见:Android实现简单旋转动画),其他图片所过场动画(TranslateAnimation,具体实现参见:Android实现简单移动动画)。
注意在每个动画中要设置插补动画值为:
translateAnimation.setInterpolator(new OvershootInterpolator());
还有涉及到一个简单算法,就是半圆形,每个图片最终的移动位置坐标。我这里只是错略写了几个值,没有经过严格计算。
源代码见:http://bigcateasymorse.googlecode.com/svn/trunk/path_translate_animation_demo/