android 点击效果动画增强

android 点击效果动画增强

1.使用开源库制作view 的放大+透明度的动画

animate(v).scaleX(factor).scaleY(factor).alpha(0);

2. 设计回调接口

    public interface ClickAnimation {
        public void onClick(View v);
    }

3. 在view 的onclick 的处理中增加动画的调用，并把以前的onclick事件处理 作为回调加入到animation中，在动画完成后回调处理函数。在动画结束时将view的状态恢复到原始状态

    private void animateClickView(final View v, final ClickAnimation callback) {
        float factor = 2;
        animate(v).scaleX(factor).scaleY(factor).alpha(0).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                ViewHelper.setScaleX(v, 1);
                ViewHelper.setScaleY(v, 1);
                ViewHelper.setAlpha(v, 1);
                if (callback != null) {
                    callback.onClick(v);
                }
                super.onAnimationEnd(animation);
            }
        });
    }

4. TODO：可以依据这个结构，添加更多动画效果。比如摇摆/震动等

实现效果参见youku视频：

http://v.youku.com/v_show/id_XNjYzOTI4NzMy.html

具体实现参加代码：

java文件

package com.buptfarmer.devapp;

import static com.nineoldandroids.view.ViewPropertyAnimator.animate;

import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.AnimatorListenerAdapter;
import com.nineoldandroids.view.ViewHelper;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class ClickAnimationExample extends Activity implements OnClickListener {

    private Button aaaBtn;
    private Button bbbBtn;
    private ImageView bbbImg;
    private Button cccBtn;
    private TextView aaaText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.click_animation_example);
        initView();
    }

    private void initView() {

        aaaBtn = (Button) findViewById(R.id.aaa_btn);
        aaaBtn.setOnClickListener(this);
        aaaText = (TextView) findViewById(R.id.aaa_text);
        aaaText.setOnClickListener(this);
        bbbBtn = (Button) findViewById(R.id.bbb_btn);
        bbbBtn.setOnClickListener(this);
        bbbImg = (ImageView) findViewById(R.id.bbb_img);
        bbbImg.setOnClickListener(this);
    }

    private void animateClickView(final View v, final ClickAnimation callback) {
        float factor = 2;
        animate(v).scaleX(factor).scaleY(factor).alpha(0).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                ViewHelper.setScaleX(v, 1);
                ViewHelper.setScaleY(v, 1);
                ViewHelper.setAlpha(v, 1);
                if (callback != null) {
                    callback.onClick(v);
                }
                super.onAnimationEnd(animation);
            }
        });
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        animateClickView(v, new ClickAnimation() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if (v == aaaBtn) {
                    Toast.makeText(getApplicationContext(), "aaaBtn has been clicked", Toast.LENGTH_SHORT)
                            .show();
                } else if (v == aaaText) {
                    Toast.makeText(getApplicationContext(), "aaaText has been clicked", Toast.LENGTH_SHORT)
                            .show();
                } else if (v == bbbBtn) {
                    Toast.makeText(getApplicationContext(), "bbbBtn has been clicked", Toast.LENGTH_SHORT)
                            .show();
                } else if (v == bbbImg) {
                    Toast.makeText(getApplicationContext(), "bbbImg has been clicked", Toast.LENGTH_SHORT)
                            .show();
                }
            }
        });
    }

    public interface ClickAnimation {
        public void onClick(View v);
    }
}

layout 布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ImageView
        android:id="@+id/bbb_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="bbb_img"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/aaa_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaa" />

        <TextView
            android:id="@+id/aaa_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaa_text" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/bbb_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bbb" />
    </LinearLayout>

    <Button
        android:id="@+id/ccc_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ccc" />


</LinearLayout>