实现炫酷的点赞动画

来源：互联网发布：淘宝网小女孩连衣裙编辑：程序博客网时间：2024/06/05 02:41

先上图

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_height="wrap_content"    android:background="@drawable/orval"    android:layout_width="40dp"    android:orientation="vertical">    <ImageView        android:id="@+id/like"        android:layout_width="wrap_content"        android:layout_height="40dp"        android:background="@drawable/like_10" />    <View        android:id="@+id/bottomView"        android:layout_width="match_parent"        android:layout_height="0dp" /></LinearLayout>

其实就是一个ImageView设置笑脸把shape背景给LinearLayout，然后valueAnimator调整下方view的下边距把笑脸顶上去

看代码

package com.example.fanday.ipc;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.drawable.AnimationDrawable;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import android.widget.FrameLayout;import android.widget.ImageView;/** * Created by fanday on 2017/8/9. */public class LikeView extends FrameLayout implements View.OnClickListener {    public LikeView(Context context) {        this(context,null,0);    }    public LikeView(Context context, @Nullable AttributeSet attrs) {        this(context, attrs,0);    }    public LikeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    View bottomView;    ImageView like;    private void init() {        View view = View.inflate(getContext(), R.layout.like_layout, null);        this.addView(view);        bottomView = view.findViewById(R.id.bottomView);        like = (ImageView) view.findViewById(R.id.like);        like.setOnClickListener(this);    }    @Override    public void onClick(View v) {        final MarginLayoutParams lp = (MarginLayoutParams) bottomView.getLayoutParams();        final ValueAnimator va = ValueAnimator.ofInt(0,100);        va.setDuration(1000);        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                int value = (int) animation.getAnimatedValue();                lp.bottomMargin = value;                bottomView.requestLayout();                if(value == 100)                    go2Like();            }        });        va.start();    }    private void go2Like() {            like.setBackgroundResource(R.drawable.likeanim);            final AnimationDrawable anim = (AnimationDrawable) like.getBackground();            anim.start();            like.postDelayed(new Runnable() {                @Override                public void run() {                    MarginLayoutParams lp = (MarginLayoutParams) bottomView.getLayoutParams();                    lp.bottomMargin = 0;                    bottomView.requestLayout();                    anim.stop();                }            },650);    }}

在动画结束后，播放帧动画让笑脸笑起来，然后把底部view下边距设置回0，就ok了

shape文件

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <solid android:color="@color/colorAccent"/>    <corners android:radius="20dp"/></shape>

帧动画的图片可以找类似的就行主要为了达到效果

阅读全文

1 0