首先表明一下哈，我这个人呢，平时特别喜欢斗图，不管是微信还是QQ还是我的相册，都会有大量的表情包，其中有一个呢让我产生了用代码实现它的想法，没错，就是这个——绿帽子！（其实当时是想把里面做成某个小伙伴，然后整蛊他一把[手动滑稽]）
绿帽子表情包.jpg
纳尼？为什么不用PS去做一个，因为我不会PS啊，天啦噜~~~
OK,既然要用代码去做一个这样的表情包（gif格式的哟），那么就要思考思路是怎样的以及整体上如何实现：最外层用RelativeLayout，然后抛帽子和戴帽子的分别在最下面的各一边，在抛帽子的时候add一个View，使用属性动画和计算好的坐标点结合贝塞尔曲线使帽子飞到戴帽子的人的头上。OK，这就是大致的整体思路，其中一些细节性的东西可以在开发过程中慢慢补充。做之前先来看看效果图[图中被整蛊的对象叫什么我就不说了，打个马赛克表示尊重]，照例再丢个GitHub传送门：GitHub传送门
某叉叉.gif
当然，也可以是这样的，只要稍微处理一下， 就可以做一个漂亮的表情包去整蛊你的小伙伴了：
表情包动画.gif
具体实现流程和相关代码：
新建一个类GreenCapView继承自RelativeLayout，再然后把一些基础的工作完成。
/**
* 添加戴帽子的人，位于左下角
*/
LayoutParams layoutParams = new LayoutParams(mLuoNiMaWidth, mLuoNiMaWidth);
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
addPeopleView(R.mipmap.icon_biaoqingbao, layoutParams);
/**
* 添加抛帽子的人，位于右下角
*/
LayoutParams layoutParams2 = new LayoutParams(mLuoNiMaWidth, mLuoNiMaWidth);
layoutParams2.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
layoutParams2.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
addPeopleView(R.mipmap.people_start, layoutParams2);
下面就是初始化帽子的开始坐标和终点坐标（终点坐标是动态变化的，所以这里需要一个常量值来定义帽子摞起来之后的间隔距离），还有图中有个“啪”的显示动画不知道大家注意到没，这里也要初始化一下它的显示坐标，定义为mPaX、mPaY。
/**
* 初始化帽子的起点坐标
*/
mStartX = ScreenUtils.getScreenWidth(mContext)
- mLuoNiMaWidth
+ 15;
mStartY = ScreenUtils.getScreenHeight(mContext)
- ScreenUtils.getStatusHeight(mContext)//状态栏的高度
- ScreenUtils.dip2px(mContext, 55) //title的高度
- mGreenCapHeight//绿帽子的高度
- mLuoNiMaWidth;//抛帽子小人的高度
/**
* 初始化帽子的终点坐标
*/
endX = (mLuoNiMaWidth - mGreenCapWidth) / 2;
endY = ScreenUtils.getScreenHeight(mContext)
- ScreenUtils.getStatusHeight(mContext)//状态栏的高度
- ScreenUtils.dip2px(mContext, 55) //title的高度
- mGreenCapHeight//绿帽子的高度
- mLuoNiMaWidth//抛帽子小人的高度
+ mIntervalLength//抵消第一个帽子减去的高度
+ 40;//戴帽子效果
/**
* 初始化“啪”的坐标
*/
mPaX = ScreenUtils.getScreenWidth(mContext) - ScreenUtils.dip2px(mContext, 30);
mPaY = mStartY - 50;
接下来就是在点击屏幕的时候添加一个绿帽子然后抛到某人的头上了，那么这里就要重写onTouchEvent方法：
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
startAnimation();
default:
break;
}
return true;
}
在startAnimation方法里，我们需要做的就是先获得一个绿帽子，然后执行属性动画，同时再执行那个“啪”字的显示，来增强滑稽感~
/**
* 开始动画
*/
private void startAnimation() {
endY = endY - mIntervalLength;
/**
* 判断如果已经达到边界，则不进行addView
*/
if (endY <= 0) {
return;
}
View mViewGood = getCap();
listGreenView.add(mViewGood);
addView(mViewGood);
getGreenCapValueAnimator(mViewGood).start();
/**
* 显示啪字动画
*/
if (mTextAnimationOver) {
startAnimationText();
}
}
这里最主要的不是添加绿帽子，而是绿帽子如何以潇洒的姿势飞到某人的头上，那么这里就要结合贝塞尔曲线自定义一个插值器了：
/**
* 自定义贝塞尔插值器
*/
class BezierEvaluator implements TypeEvaluator<PointF> {
private PointF pointF;
/**
* 控制点坐标
*/
public BezierEvaluator(PointF pointF) {
this.pointF = pointF;
}
@Override
public PointF evaluate(float time, PointF startValue, PointF endValue) {
float timeOn = 1.0f - time;
PointF point = new PointF();
//二阶贝塞尔公式
point.x = timeOn * timeOn * (startValue.x)
+ 2 * timeOn * time * (pointF.x)
+ time * time * (endValue.x);
point.y = timeOn * timeOn * (startValue.y)
+ 2 * timeOn * time * (pointF.y)
+ time * time * (endValue.y);
return point;
}
}
接下来就是给绿帽子添加属性动画的时候使用这个插值器：
/**
* 获得一个绿帽子动画
*/
private ValueAnimator getGreenCapValueAnimator(final View mViewGood) {
ValueAnimator animator = ValueAnimator.ofObject(new BezierEvaluator(new PointF(300, 300))
, new PointF(mStartX, mStartY), new PointF(endX, endY));
animator.setDuration(800);
animator.setInterpolator(new AccelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
PointF pointF = (PointF) valueAnimator.getAnimatedValue();
mViewGood.setX(pointF.x);
mViewGood.setY(pointF.y);
}
});
return animator;
}
“啪”字动画：
/**
* "啪"字动画
*/
private void startAnimationText() {
mTextAnimationOver = false;
final TextView textView = new TextView(mContext);
textView.setText("啪");
textView.setTextColor(Color.parseColor("#333333"));
textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.text_size_18sp));
textView.setX(mPaX);
textView.setY(mPaY);
addView(textView);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(ObjectAnimator.ofFloat(textView, "ScaleX", 0f, 1.0f)
, ObjectAnimator.ofFloat(textView, "ScaleY", 0f, 1.0f));
animatorSet.setDuration(500);
animatorSet.setInterpolator(new OvershootInterpolator());
animatorSet.start();
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
removeView(textView);
mTextAnimationOver = true;
}
});
}
不知道细心的你有没有发现listGreenView这个变量是干嘛的，用来存储绿帽子View的一个集合，为了后面可以把这些绿帽子remove掉。
/**
* 初始化部分参数和remove不要的view
*/
public void removeAllGreenCaps() {
for (int i = 0; i < listGreenView.size(); i++) {
if (listGreenView.get(i) != null) {
removeView(listGreenView.get(i));
}
}
listGreenView.clear();
/**
* 重新计算终点坐标
*/
endY = ScreenUtils.getScreenHeight(mContext)
- ScreenUtils.getStatusHeight(mContext)//状态栏的高度
- ScreenUtils.dip2px(mContext, 55) //title的高度
- mGreenCapHeight//绿帽子的高度
- mLuoNiMaWidth//抛帽子小人的高度
+ mIntervalLength//抵消第一个帽子减去的高度
+ 40;//戴帽子效果
}
当然这里面还有自动模式开关的相关代码，我就不一一贴上来了，大家有兴趣的可以看下面的全家福，或者去github里下载整个项目，别忘记给小弟我一个star，你的star是我不竭的写作动力！！！
全家福：
GreenCapView.java
public class GreenCapView extends RelativeLayout {
/**
* 上下文
*/
private Context mContext;
/**
* 起点坐标
*/
private float mStartX, mStartY;
/**
* 终点坐标（可动态改变）
*/
private float endX, endY;
/**
* 罗尼玛的宽高、抛帽子的人的宽高
*/
private int mLuoNiMaWidth = 250;
/**
* 帽子的宽度
*/
private int mGreenCapWidth = 150;
/**
* 帽子的高度
*/
private int mGreenCapHeight = 100;
/**
* 绿帽子叠起之后的间隔长度
*/
private int mIntervalLength = 38;//40像素;
/**
* 绿帽子集合
*/
List<View> listGreenView = new ArrayList<>();
/**
* 字“啪”的显示坐标
*/
private float mPaX, mPaY;
public GreenCapView(Context context) {
this(context, null);
}
public GreenCapView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public GreenCapView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
initView();
}
/**
* 添加初始化view
*
* @param resource
* @param params
*/
private void addPeopleView(int resource, ViewGroup.LayoutParams params) {
ImageView mViewMMP = new ImageView(mContext);
mViewMMP.setImageResource(resource);
mViewMMP.setLayoutParams(params);
addView(mViewMMP);
}
/**
* 初始化参数
*/
private void initView() {
setBackgroundColor(Color.WHITE);
/**
* 添加戴帽子的人，位于左下角
*/
LayoutParams layoutParams = new LayoutParams(mLuoNiMaWidth, mLuoNiMaWidth);
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
addPeopleView(R.mipmap.icon_biaoqingbao, layoutParams);
/**
* 添加抛帽子的人，位于右下角
*/
LayoutParams layoutParams2 = new LayoutParams(mLuoNiMaWidth, mLuoNiMaWidth);
layoutParams2.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
layoutParams2.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
addPeopleView(R.mipmap.people_start, layoutParams2);
/**
* 初始化帽子的起点坐标
*/
mStartX = ScreenUtils.getScreenWidth(mContext)
- mLuoNiMaWidth
+ 15;
mStartY = ScreenUtils.getScreenHeight(mContext)
- ScreenUtils.getStatusHeight(mContext)//状态栏的高度
- ScreenUtils.dip2px(mContext, 55) //title的高度
- mGreenCapHeight//绿帽子的高度
- mLuoNiMaWidth;//抛帽子小人的高度
/**
* 初始化帽子的终点坐标
*/
endX = (mLuoNiMaWidth - mGreenCapWidth) / 2;
endY = ScreenUtils.getScreenHeight(mContext)
- ScreenUtils.getStatusHeight(mContext)//状态栏的高度
- ScreenUtils.dip2px(mContext, 55) //title的高度
- mGreenCapHeight//绿帽子的高度
- mLuoNiMaWidth//抛帽子小人的高度
+ mIntervalLength//抵消第一个帽子减去的高度
+ 40;//戴帽子效果
/**
* 初始化“啪”的坐标
*/
mPaX = ScreenUtils.getScreenWidth(mContext) - ScreenUtils.dip2px(mContext, 30);
mPaY = mStartY - 50;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
startAnimation();
default:
break;
}
return true;
}
/**
* 开始动画
*/
private void startAnimation() {
endY = endY - mIntervalLength;
/**
* 判断如果已经达到边界，则不进行addView
*/
if (endY <= 0) {
return;
}
View mViewGood = getCap();
listGreenView.add(mViewGood);
addView(mViewGood);
getGreenCapValueAnimator(mViewGood).start();
/**
* 显示啪字动画
*/
if (mTextAnimationOver) {
startAnimationText();
}
}
/**
* "啪"字动画是否结束标记，作用是防止字体重合
*/
private boolean mTextAnimationOver = true;
/**
* "啪"字动画
*/
private void startAnimationText() {
mTextAnimationOver = false;
final TextView textView = new TextView(mContext);
textView.setText("啪");
textView.setTextColor(Color.parseColor("#333333"));
textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.text_size_18sp));
textView.setX(mPaX);
textView.setY(mPaY);
addView(textView);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(ObjectAnimator.ofFloat(textView, "ScaleX", 0f, 1.0f)
, ObjectAnimator.ofFloat(textView, "ScaleY", 0f, 1.0f));
animatorSet.setDuration(500);
animatorSet.setInterpolator(new OvershootInterpolator());
animatorSet.start();
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
removeView(textView);
mTextAnimationOver = true;
}
});
}
/**
* 获得一个绿帽子
*/
private View getCap() {
final View mViewGood = new View(mContext);
mViewGood.setBackgroundResource(R.mipmap.icon_greencap);
mViewGood.setLayoutParams(new ViewGroup.LayoutParams(mGreenCapWidth, mGreenCapHeight));
return mViewGood;
}
/**
* 获得一个绿帽子动画
*/
private ValueAnimator getGreenCapValueAnimator(final View mViewGood) {
ValueAnimator animator = ValueAnimator.ofObject(new BezierEvaluator(new PointF(300, 300))
, new PointF(mStartX, mStartY), new PointF(endX, endY));
animator.setDuration(800);
animator.setInterpolator(new AccelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
PointF pointF = (PointF) valueAnimator.getAnimatedValue();
mViewGood.setX(pointF.x);
mViewGood.setY(pointF.y);
}
});
return animator;
}
/**
* 初始化部分参数和remove不要的view
*/
public void removeAllGreenCaps() {
for (int i = 0; i < listGreenView.size(); i++) {
if (listGreenView.get(i) != null) {
removeView(listGreenView.get(i));
}
}
listGreenView.clear();
/**
* 重新计算终点坐标
*/
endY = ScreenUtils.getScreenHeight(mContext)
- ScreenUtils.getStatusHeight(mContext)//状态栏的高度
- ScreenUtils.dip2px(mContext, 55) //title的高度
- mGreenCapHeight//绿帽子的高度
- mLuoNiMaWidth//抛帽子小人的高度
+ mIntervalLength//抵消第一个帽子减去的高度
+ 40;//戴帽子效果
}
/**
* 帽子飞起动画
*/
private ValueAnimator valueAnimator;
/**
* 自动模式默认关闭
*/
private boolean mAutomaticPatternStatus = false;
public boolean ismAutomaticPatternStatus() {
return mAutomaticPatternStatus;
}
/**
* 自动模式控制开关
*/
public void automaticPatternSwitch() {
if (mAutomaticPatternStatus) {
mAutomaticPatternStatus = false;
closeAutomaticPattern();
} else {
mAutomaticPatternStatus = true;
openAutomaticPattern();
}
}
/**
* 开启自动模式
*/
private void openAutomaticPattern() {
if (valueAnimator != null) {
valueAnimator.cancel();
valueAnimator = null;
}
valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(150);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.setRepeatMode(ValueAnimator.RESTART);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationRepeat(Animator animation) {
super.onAnimationRepeat(animation);
Log.i("TAG动画", "动画开始再次执行了");
startAnimation();
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
Log.i("TAG动画", "动画开始执行了哦哦");
startAnimation();
}
@Override
public void onAnimationCancel(Animator animation) {
super.onAnimationCancel(animation);
Log.i("TAG动画", "动画取消");
}
});
valueAnimator.start();
}
/**
* 关闭自动模式
*/
private void closeAutomaticPattern() {
if (valueAnimator != null) {
valueAnimator.cancel();
valueAnimator = null;
}
}
/**
* 自定义贝塞尔插值器
*/
class BezierEvaluator implements TypeEvaluator<PointF> {
private PointF pointF;
/**
* 控制点坐标
*/
public BezierEvaluator(PointF pointF) {
this.pointF = pointF;
}
@Override
public PointF evaluate(float time, PointF startValue, PointF endValue) {
float timeOn = 1.0f - time;
PointF point = new PointF();
//二阶贝塞尔公式
point.x = timeOn * timeOn * (startValue.x)
+ 2 * timeOn * time * (pointF.x)
+ time * time * (endValue.x);
point.y = timeOn * timeOn * (startValue.y)
+ 2 * timeOn * time * (pointF.y)
+ time * time * (endValue.y);
return point;
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<com.zhuyong.greencapview.GreenCapView
android:id="@+id/green_cap_view_luonima"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</com.zhuyong.greencapview.GreenCapView>
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
private GreenCapView mGreenCapView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Toolbar
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mGreenCapView = (GreenCapView) findViewById(R.id.green_cap_view_luonima);
setSupportActionBar(mToolbar);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_luonima, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_automatic_pattern:
mGreenCapView.automaticPatternSwitch();
boolean status = mGreenCapView.ismAutomaticPatternStatus();
item.setTitle(status ? "关闭自动模式" : "打开自动模式");
break;
case R.id.action_clear:
mGreenCapView.removeAllGreenCaps();
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
}
GitHub传送门：源码
网友评论