点击动画 波纹效果 主要用来做引导动画

来源:互联网 发布:五五开这个人 知乎 编辑:程序博客网 时间:2024/06/05 02:42
自定义类
/**
 * Created by guoxinggen on 16/3/14.
 * 点击效果view
 */
public class ClickAnimationView extends FrameLayout {

    private ImageView clickView;
    private ImageView spreadView;
    private ImageView doubleView;


    private boolean isSingle true;
    private float circleWidth;
    private int centreBg;
    private int spreadBg;
    private OnCallBackListener mOnCallBackListener;

    public ClickAnimationView(Context contextAttributeSet attrs) {
        super(contextattrs);

        TypedArray typedArray = context.getTheme().obtainStyledAttributes(
                attrsR.styleable.ClickAnimationView00);
        try {
            //是否是单击
            isSingle = typedArray.getBoolean(R.styleable.ClickAnimationView_singleClick, true);
            //圆圈直径
            circleWidth = typedArray.getDimension(R.styleable.ClickAnimationView_circleWidth120);
            //默认中心图
            centreBg = typedArray.getInteger(R.styleable.ClickAnimationView_centreBgR.drawable.clickview_centre_defalut);
            //默认扩散图  注意 扩散图 中间要是透明的
            spreadBg = typedArray.getInteger(R.styleable.ClickAnimationView_centreBgR.drawable.clickview_spread_defalut);
       finally {
            typedArray.recycle();
        }

        initView();
    }

    public void setOnCallBackListener(OnCallBackListener onCallBackListener) {
        this.mOnCallBackListener = onCallBackListener;
    }

    private void initView() {

        clickView = getImageView();

        clickView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mOnCallBackListener != null) {
                    mOnCallBackListener.onCallBack(null, null);
                }
            }
        });

        spreadView = getImageView();
        doubleView = getImageView();

        clickView.setBackgroundResource(centreBg);
        spreadView.setBackgroundResource(spreadBg);
        doubleView.setBackgroundResource(spreadBg);
        this.addView(clickView);
        this.addView(spreadView);
        this.addView(doubleView);

        performAnimation();
    }

    /**
     * 执行动画
     */
    private void performAnimation() {

        if (isSingle) {
            doubleView.setVisibility(View.GONE);
            performSingleAnimation();
       else {
            doubleView.setVisibility(View.VISIBLE);
            performDoubleAnimation();
        }
    }


    private ImageView getImageView(FrameLayout.LayoutParams params) {
        ImageView mImageView = new ImageView(getContext());
        params.gravity = Gravity.CENTER;
        mImageView.setLayoutParams(params);
        return mImageView;
    }

    private ImageView getImageView() {
        return getImageView(new FrameLayout.LayoutParams((intcircleWidth(intcircleWidth));
    }


    /**
     * 单击动画
     */
    private void performSingleAnimation() {


        if (!isSingle) {
            return;
        }

        clickView.startAnimation(getClickAnimation(0));

        Animation animationSetChild = getSpreadAnimation(1.1f3.0f500100);
        spreadView.startAnimation(animationSetChild);
        animationSetChild.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        performSingleAnimation();
                    }
                }500);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

    }


    /**
     * 双击圆圈扩散动画
     */
    private void performDoubleAnimation() {

        if (isSingle) {
            return;
        }

        clickView.startAnimation(getClickAnimation(1));
        spreadView.startAnimation(getSpreadAnimation(1.1f3.0f500100));

        Animation animationSet = getSpreadAnimation(1.1f3.0f500400);
        doubleView.startAnimation(animationSet);

        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        performDoubleAnimation();
                    }
                }500);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }


    /**
     * 获取圆心点击动画
     *
     * @param repeatCount
     @return
     */
    private Animation getClickAnimation(int repeatCount) {
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation sacleAnimationBig = new ScaleAnimation(1.0f1.05f1.0f1.05f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimationBig.setDuration(200);
        sacleAnimationBig.setInterpolator(new AccelerateInterpolator());
        sacleAnimationBig.setFillAfter(true);
        sacleAnimationBig.setRepeatCount(repeatCount);
        ScaleAnimation sacleAnimationSmall = new ScaleAnimation(1.05f1.0f1.05f1.0f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimationSmall.setDuration(200);
        sacleAnimationSmall.setFillAfter(true);
        sacleAnimationSmall.setInterpolator(new AccelerateInterpolator());
        sacleAnimationSmall.setStartOffset(200);
        sacleAnimationSmall.setRepeatCount(repeatCount);
        animationSet.addAnimation(sacleAnimationBig);
        animationSet.addAnimation(sacleAnimationSmall);

        return animationSet;

    }

    /**
     * 获取扩散动画
     *
     * @param fromMe
     @param multipleMe
     @param duration
     @param startOff
     @return
     */
    private Animation getSpreadAnimation(float fromMe, float multipleMe, long duration, long startOff) {

        AnimationSet animationSetChild = new AnimationSet(true);
        ScaleAnimation sacleAnimationBigChild = new ScaleAnimation(fromMemultipleMefromMemultipleMe,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimationBigChild.setDuration(duration);
        AlphaAnimation alphaAnimationChild = new AlphaAnimation(1.0f0);
        alphaAnimationChild.setDuration(duration);
        animationSetChild.addAnimation(sacleAnimationBigChild);
        animationSetChild.addAnimation(alphaAnimationChild);
        animationSetChild.setInterpolator(new DecelerateInterpolator());
        animationSetChild.setStartOffset(startOff);
        animationSetChild.setFillAfter(true);

        return animationSetChild;
    }

    /**
     * 设置是点击还是双击 </br>true 单击  or  双击
     */
    public void setClickSingleOrDouble(boolean isSingle) {

        if (isSingle == this.isSingle) {
            return;
        }

        this.isSingle = isSingle;
        performAnimation();
    }
}

两个drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">

    <solid android:color="#666666" />
    <stroke
        android:width="3dp"
        android:color="#999999" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <!-- 外圈扩散图,注意中间设为透明,或者画环也行-->
    <solid android:color="@android:color/transparent" />
    <stroke
        android:width="2dp"
        android:color="#999999" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

主布局,一个是用控件歇的,一个是直接添加的布局
<?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2009 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app1="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dip">

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

        <Button
            android:id="@+id/animation_bt_double"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="双击" />

        <Button
            android:id="@+id/animation_bt_single"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="单击" />
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/animation_rl"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true">

        <ImageView
            android:id="@+id/animation_iv_2"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerInParent="true"
            android:background="@drawable/clickview_spread_defalut" />

        <ImageView
            android:id="@+id/animation_iv_3"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerInParent="true"
            android:background="@drawable/clickview_spread_defalut" />

        <ImageView
            android:id="@+id/animation_iv_1"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerInParent="true"
            android:background="@drawable/clickview_centre_defalut" />

    </RelativeLayout>

    <com.example.android.apis.customview.ClickAnimationView
        android:id="@+id/animation_cav"
        android:layout_width="500dp"
        android:layout_height="500dp"
        android:layout_below="@id/animation_rl"
        app1:circleWidth="40dp"
        app1:singleClick="false"></com.example.android.apis.customview.ClickAnimationView>


</RelativeLayout>

public class Animation5 extends Activity {

    private ImageView animationiv1;
    private ImageView animationiv2;
    private ImageView animationiv3;

    private boolean isDouble true;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.animation_5);

        animationiv1 = (ImageView) findViewById(R.id.animation_iv_1);
        animationiv2 = (ImageView) findViewById(R.id.animation_iv_2);
        animationiv3 = (ImageView) findViewById(R.id.animation_iv_3);

        //这个是 控件实现
        final ClickAnimationView animation_cav = (ClickAnimationView) findViewById(R.id.animation_cav);

        animation_cav.setOnCallBackListener(new OnCallBackListener() {
            @Override
            public void onCallBack(String resultObject resultObj) {
                Log.i("Animation5","点击");
            }
        });
        this.findViewById(R.id.animation_bt_double).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                isDouble true;
                initDoubleAnimation();
                animation_cav.setClickSingleOrDouble(false);
            }
        });


        this.findViewById(R.id.animation_bt_single).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                isDouble false;
                initSingleAnimation();
                animation_cav.setClickSingleOrDouble(true);
            }
        });

        initSingleAnimation();
    }

    /**
     * 布局双击圆圈扩散动画
     */
    private void initDoubleAnimation() {

        if(!isDouble){
            return;
        }

        animationiv3.setVisibility(View.VISIBLE);

        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation sacleAnimation = new ScaleAnimation(1.0f1.05f1.0f1.05f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimation.setDuration(200);
        sacleAnimation.setInterpolator(new AccelerateInterpolator());
        sacleAnimation.setFillAfter(true);
        sacleAnimation.setRepeatCount(1);
        ScaleAnimation sacleAnimation3 = new ScaleAnimation(1.05f1.0f1.05f1.0f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimation3.setDuration(200);
        sacleAnimation3.setFillAfter(true);
        sacleAnimation3.setRepeatCount(1);
        sacleAnimation3.setInterpolator(new AccelerateInterpolator());
        sacleAnimation3.setStartOffset(200);
        animationSet.addAnimation(sacleAnimation);
        animationSet.addAnimation(sacleAnimation3);
        animationiv1.startAnimation(animationSet);

        AnimationSet animationSet1 = new AnimationSet(true);
        ScaleAnimation sacleAnimation1 = new ScaleAnimation(1.1f3.0f1.1f3.0f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimation1.setDuration(500);
        AlphaAnimation alphaAnimation1 = new AlphaAnimation(1.0f0);
        alphaAnimation1.setDuration(500);//设置动画持续时间
        animationSet1.addAnimation(sacleAnimation1);
        animationSet1.addAnimation(alphaAnimation1);
        animationSet1.setInterpolator(new DecelerateInterpolator());
        animationSet1.setStartOffset(100);
        animationSet1.setFillAfter(true);
        animationiv2.startAnimation(animationSet1);


        AnimationSet animationSet2 = new AnimationSet(true);
        ScaleAnimation sacleAnimation2 = new ScaleAnimation(1.1f3.0f1.1f3.0f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimation2.setDuration(500);
        AlphaAnimation alphaAnimation2 = new AlphaAnimation(1.0f0);
        alphaAnimation2.setDuration(500);//设置动画持续时间
        animationSet2.addAnimation(sacleAnimation2);
        animationSet2.addAnimation(alphaAnimation2);
        animationSet2.setStartOffset(400);
        animationSet2.setInterpolator(new DecelerateInterpolator());
        animationSet2.setFillAfter(true);
        animationiv3.startAnimation(animationSet2);

        animationSet2.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        initDoubleAnimation();
                    }
                }500);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

    /**
     * 布局单击动画
     */
    private void initSingleAnimation() {

        if(isDouble){
            return;
        }

        animationiv3.setVisibility(View.GONE);

        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation sacleAnimationBig = new ScaleAnimation(1.0f1.05f1.0f1.05f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimationBig.setDuration(200);
        sacleAnimationBig.setInterpolator(new AccelerateInterpolator());
        sacleAnimationBig.setFillAfter(true);
        ScaleAnimation sacleAnimationSmall = new ScaleAnimation(1.05f1.0f1.05f1.0f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimationSmall.setDuration(200);
        sacleAnimationSmall.setFillAfter(true);
        sacleAnimationSmall.setInterpolator(new AccelerateInterpolator());
        sacleAnimationSmall.setStartOffset(200);
        animationSet.addAnimation(sacleAnimationBig);
        animationSet.addAnimation(sacleAnimationSmall);
        animationiv1.startAnimation(animationSet);

        AnimationSet animationSetChild = new AnimationSet(true);
        ScaleAnimation sacleAnimation1 = new ScaleAnimation(1.1f4.0f1.1f4.0f,
                Animation.RELATIVE_TO_SELF0.5fAnimation.RELATIVE_TO_SELF0.5f);
        sacleAnimation1.setDuration(500);
        AlphaAnimation alphaAnimation1 = new AlphaAnimation(1.0f0);
        alphaAnimation1.setDuration(500);//设置动画持续时间
        animationSetChild.addAnimation(sacleAnimation1);
        animationSetChild.addAnimation(alphaAnimation1);
        animationSetChild.setInterpolator(new DecelerateInterpolator());
        animationSetChild.setStartOffset(100);
        animationSetChild.setFillAfter(true);
        animationiv2.startAnimation(animationSetChild);

        animationSetChild.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        initSingleAnimation();
                    }
                }500);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

    }


}



两种实现其实差不多,主要是动画效果的慢慢调
0 0
原创粉丝点击