仿网易云音乐收藏的小动画

怼烎@ 2024-02-17 21:23 65阅读 0赞

> 最近在写一个新的项目，新项目中有一个收藏的功能，相信现在的很多app都有收藏和取消收藏的功能。单纯的收藏和取消收藏，如果只是使用setSelect或者setImageResource方式更换已收藏和取消收藏的图片未免显得生硬了些，所以想到了添加一个添加收藏和取消收藏的动画，这样看起来好多了，把部分代码贴出来供大家参考。欢迎大家指正！

### 先上一张效果图 ###

![这里写图片描述][SouthEast]

1.**布局文件很简单，相对布局包裹一个ImageView**

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.ekeguan.collectanimationdemo.MainActivity">
    
        <ImageView
            android:id="@+id/iv_collect"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerVertical="true"
            android:layout_centerInParent="true"
            android:src="@drawable/collect_no"
            android:background="?attr/selectableItemBackgroundBorderless"/>
    
    </RelativeLayout>

2.**在MainActivity调用ImageView的点击事件，触发收藏和取消收藏的操作**

package com.ekeguan.collectanimationdemo;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.Toast;
    
    import com.ekeguan.collectanimationdemo.utils.ScaleAnimatorUtils;
    
    import butterknife.BindView;
    import butterknife.ButterKnife;
    
    public class MainActivity extends AppCompatActivity implements View.OnClickListener {
        
    
        @BindView(R.id.iv_collect)
        ImageView ivCollect;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ButterKnife.bind(this);
    
            initView();
            initData();
            initEventListener();
        }
    
        private void initView() {
            ivCollect.setSelected(false);
        }
    
        private void initData() {}
    
        private void initEventListener() {
            ivCollect.setOnClickListener(this);
        }
    
        @Override
        public void onClick(View view) {
            switch (view.getId()){
                case R.id.iv_collect:
                    if (ivCollect.isSelected()==false){
                        ivCollect.setImageResource(R.drawable.collect_yes);
                        ivCollect.setSelected(true);
                        ScaleAnimatorUtils.setScalse(ivCollect);
                        Toast.makeText(this,"收藏成功",Toast.LENGTH_SHORT).show();
                    }else{
                        ivCollect.setImageResource(R.drawable.collect_no);
                        ivCollect.setSelected(false);
                        ScaleAnimatorUtils.setScalse(ivCollect);
                        Toast.makeText(this,"取消收藏",Toast.LENGTH_SHORT).show();
                    }
                    break;
            }
        }
    }

3.**其中用到了一个ScaleAnimatorUtils类，这个类即是实现添加收藏和取消收藏的动画工具类**

public class ScaleAnimatorUtils {
        /**
         * 设置缩放动画
         *
         * @param view
         */
        public static void setScalse(View view) {
            AnimatorSet set = new AnimatorSet();
            ObjectAnimator animator_x = ObjectAnimator.ofFloat(view, "scaleX", 1.5f, 1.2f, 1f, 0.5f, 0.7f,1f);
            ObjectAnimator animator_y = ObjectAnimator.ofFloat(view, "scaleY", 1.5f, 1.2f, 1f, 0.5f, 0.7f,1f);
            set.play(animator_x).with(animator_y);
            set.setDuration(500);
            set.start();
        }
    }

**项目GitHub地址：[https://github.com/xinyitiandi/CollectAnimationDemo.git][https_github.com_xinyitiandi_CollectAnimationDemo.git]**

[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/823c3676fbfb4fee8d6d6da4bfb276e3.png
[https_github.com_xinyitiandi_CollectAnimationDemo.git]: https://github.com/xinyitiandi/CollectAnimationDemo.git