android 炸裂动画

340 阅读1分钟

我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!

github上有一个比较有趣的view动画开源项目ExplosionField,当点击该view时候,产生如图所示效果: image.png

  • 思路

主要获取点击事件所在的图标范围,然后通过不同的加速器实现不同的效果,比如线性加速器等等,然后获得不同的数值,你通过点击中心计算一下周围的圆圈的坐标,然后不同的修改坐标,去根据加速器的速度去绘制界面就可以得到一个动画的效果,因为我们的图片加载到屏幕上也是一个个像素点组成的,我们只不过让这些像素点按照我们需要的加素点和不规则的路径去不停的改变它们的xy坐标,就可以达到这样的效果,接下来看相关使用代码。

犹如天女散花一样,爆炸散列,比较有趣。 Android ExplosionField在github上的项目主页是:github.com/tyrantgit/E… Android ExplosionField使用简单,几乎可以针对任意的view制造出上图所示效果。 ExplosionField使用之前先需要到其github上的主页将其拖下来,导入作为lib使用。 现给出一个简单的代码例子说明,测试的主activity MainActivity.java:


public class MainActivity extends Activity {
 
	private ExplosionField mExplosionField;
	private ImageView image;
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
 
		// 先初始化载入ExplosionField
		mExplosionField = ExplosionField.attach2Window(this);
 
		image = (ImageView) findViewById(R.id.image);
		image.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				// 开始执行动画...
				mExplosionField.explode(v);
 
				// ExplosionField.explode后,父布局中虽看不到ImageView,但ImageView所占据的位置还会响应事件.
				// 如果想屏蔽此ImageView出现,则:
				image.setVisibility(View.GONE);
			}
		});
	}
}

MainActivity.java需要的布局文件activiy_main.xml,很简单的一个ImageView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dip" >
 
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#c62828"
        android:src="@drawable/ic_launcher" />
 
</LinearLayout>